[PR #55] [MERGED] 🎨 Add theme support (and settings storage) #2386

New issue

Closed

opened 2026-03-17 00:05:47 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 00:05:47 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/55
Author: @NBTX
Created: 8/25/2019
Status: ✅ Merged
Merged: 8/25/2019
Merged by: @liyasthomas

Base: master ← Head: master

📝 Commits (8)

35d7e1b 🔌 Add websocket page
37ed800 Merge pull request #1 from NBTX/feat/websocket
67f0600 Improve mobile navigation
02ef69f 🎨 Add theme support
4d238b8 Merge branch 'master' of github.com:NBTX/postwoman-vue
d66fade Merge branch 'master' of https://github.com/liyasthomas/postwoman
0571ec7 Merge branch 'master' of https://github.com/liyasthomas/postwoman
bd434ff Improve URL validation check. (See https://github.com/liyasthomas/postwoman/issues/56)

📊 Changes

15 files changed (+854 additions, -420 deletions)

View changed files

📝 assets/css/styles.scss (+57 -33)
➕ assets/css/themes.scss (+39 -0)
➕ components/logo.vue (+29 -0)
➕ components/section.vue (+47 -0)
➕ components/settings/swatch.vue (+67 -0)
📝 layouts/default.vue (+40 -5)
📝 nuxt.config.js (+3 -0)
📝 package-lock.json (+19 -0)
📝 package.json (+2 -1)
📝 pages/index.vue (+197 -213)
➕ pages/settings.vue (+126 -0)
📝 pages/websocket.vue (+169 -168)
➕ plugins/vuex-persist.js (+5 -0)
➕ store/index.js (+3 -0)
➕ store/postwoman.js (+51 -0)

📄 Description

This PR adds support for background theme selection and accent color selection. Additional background/accent colors can be easily defined the application. (Refer to /layouts/settings.vue for guidance.)

Here's a full list of what this PR achieves:

Move root (var) style properties to /assets/css/themes.scss
Improve mobile navigation
Create section component for the collapsable sections.
Create logo component, so color can be changed.
Add settings page
Add option to select theme color
Add option to select theme background
Add option to enable/disable multi-colored frames.
Add settings to VueX Store
Persist VueX store in LocalStorage.

This PR also:

solves https://github.com/liyasthomas/postwoman/issues/32
solves https://github.com/liyasthomas/postwoman/pull/18 with regard to the Nuxt refactor.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/55 **Author:** [@NBTX](https://github.com/NBTX) **Created:** 8/25/2019 **Status:** ✅ Merged **Merged:** 8/25/2019 **Merged by:** [@liyasthomas](https://github.com/liyasthomas) **Base:** `master` ← **Head:** `master` --- ### 📝 Commits (8) - [`35d7e1b`](https://github.com/hoppscotch/hoppscotch/commit/35d7e1b32e1ffd34f0b0a30e79b8b0e9d3703e12) 🔌 Add websocket page - [`37ed800`](https://github.com/hoppscotch/hoppscotch/commit/37ed800d6a57aa1699b741d41c1f19dc293fdf83) Merge pull request #1 from NBTX/feat/websocket - [`67f0600`](https://github.com/hoppscotch/hoppscotch/commit/67f0600702a7f66a62f1d6b726b5954aeba518ae) Improve mobile navigation - [`02ef69f`](https://github.com/hoppscotch/hoppscotch/commit/02ef69f0f7190ca319d8754773b882cfe76113b2) 🎨 Add theme support - [`4d238b8`](https://github.com/hoppscotch/hoppscotch/commit/4d238b8ac61f7be13736a92bbd320a6b51594f19) Merge branch 'master' of github.com:NBTX/postwoman-vue - [`d66fade`](https://github.com/hoppscotch/hoppscotch/commit/d66fadecdaf061bc8a2900052db3c3e759c489e2) Merge branch 'master' of https://github.com/liyasthomas/postwoman - [`0571ec7`](https://github.com/hoppscotch/hoppscotch/commit/0571ec723ddf8000366312ca20030f74785ef3a3) Merge branch 'master' of https://github.com/liyasthomas/postwoman - [`bd434ff`](https://github.com/hoppscotch/hoppscotch/commit/bd434ff285e313eb71880698df9eb428d0b08f02) Improve URL validation check. (See https://github.com/liyasthomas/postwoman/issues/56) ### 📊 Changes **15 files changed** (+854 additions, -420 deletions) <details> <summary>View changed files</summary> 📝 `assets/css/styles.scss` (+57 -33) ➕ `assets/css/themes.scss` (+39 -0) ➕ `components/logo.vue` (+29 -0) ➕ `components/section.vue` (+47 -0) ➕ `components/settings/swatch.vue` (+67 -0) 📝 `layouts/default.vue` (+40 -5) 📝 `nuxt.config.js` (+3 -0) 📝 `package-lock.json` (+19 -0) 📝 `package.json` (+2 -1) 📝 `pages/index.vue` (+197 -213) ➕ `pages/settings.vue` (+126 -0) 📝 `pages/websocket.vue` (+169 -168) ➕ `plugins/vuex-persist.js` (+5 -0) ➕ `store/index.js` (+3 -0) ➕ `store/postwoman.js` (+51 -0) </details> ### 📄 Description ![image](https://user-images.githubusercontent.com/43181178/63643876-fc4f5480-c6d2-11e9-9ba2-6c67cf1379c2.png) ![image](https://user-images.githubusercontent.com/43181178/63643878-10935180-c6d3-11e9-89ca-5d6a56c32c9f.png) ![image](https://user-images.githubusercontent.com/43181178/63643908-a5964a80-c6d3-11e9-9355-cb06e93f9244.png) This PR adds support for background theme selection and accent color selection. Additional background/accent colors can be easily defined the application. (Refer to `/layouts/settings.vue` for guidance.) Here's a full list of what this PR achieves: - Move root (var) style properties to `/assets/css/themes.scss` - Improve mobile navigation - Create section component for the collapsable sections. - Create logo component, so color can be changed. - Add settings page - Add option to select theme color - Add option to select theme background - Add option to enable/disable multi-colored frames. - Add settings to VueX Store - Persist VueX store in LocalStorage. This PR also: - solves https://github.com/liyasthomas/postwoman/issues/32 - solves https://github.com/liyasthomas/postwoman/pull/18 with regard to the Nuxt refactor. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>