[PR #3074] [MERGED] chore: make style sheets consistent #4214

New issue

Closed

opened 2026-03-17 01:46:11 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 01:46:11 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/3074
Author: @liyasthomas
Created: 5/23/2023
Status: ✅ Merged
Merged: 5/30/2023
Merged by: @AndrewBastin

Base: release/2023.4.4 ← Head: chore/consistent-styles

📝 Commits (2)

9767fbb chore: make style sheets consistent
83ad146 fix: pwa icons

📊 Changes

16 files changed (+618 additions, -95 deletions)

View changed files

📝 packages/hoppscotch-common/assets/scss/themes.scss (+3 -0)
📝 packages/hoppscotch-common/meta.ts (+14 -2)
➕ packages/hoppscotch-common/public/icons/pwa-1024x1024.png (+0 -0)
➕ packages/hoppscotch-common/public/icons/pwa-128x128.png (+0 -0)
➕ packages/hoppscotch-common/public/icons/pwa-16x16.png (+0 -0)
➕ packages/hoppscotch-common/public/icons/pwa-192x192.png (+0 -0)
➕ packages/hoppscotch-common/public/icons/pwa-256x256.png (+0 -0)
➕ packages/hoppscotch-common/public/icons/pwa-32x32.png (+0 -0)
➕ packages/hoppscotch-common/public/icons/pwa-512x512.png (+0 -0)
📝 packages/hoppscotch-selfhost-web/index.html (+1 -1)
📝 packages/hoppscotch-selfhost-web/meta.ts (+14 -2)
📝 packages/hoppscotch-selfhost-web/vite.config.ts (+40 -6)
📝 packages/hoppscotch-sh-admin/assets/scss/styles.scss (+19 -20)
📝 packages/hoppscotch-sh-admin/assets/scss/themes.scss (+75 -64)
📝 packages/hoppscotch-ui/src/assets/scss/styles.scss (+449 -0)
📝 packages/hoppscotch-ui/src/assets/scss/themes.scss (+3 -0)

📄 Description

Closes HFE-63

TLDR;

Adds missing PWA icons
Adds supported-color-schemes meta tags for dark/light mode detection
Adds color-scheme in the themes' style sheet for native dark/light mode form inputs
Made style sheets consistent across the hoppscotch-ui and hoppscotch-common packages

`🤖 Generated by Copilot at 1201bfe`

Summary

🎨🌐🛠️

This pull request improves the web app's appearance, performance, accessibility, and integration with different color schemes, browsers, and operating systems. It adds the color-scheme property to the themes.scss files of different packages, updates the background color and the theme-color meta tags, modifies the title and the icons of the web app, and adds custom protocol handlers to the web app manifest. It also enhances the UI elements of the code editor, the select element, and the split panes, and refactors some code related to the font size, line height, and sticky fold dimensions.

color-scheme added
web app looks better, faster
autumn leaves falling

Walkthrough

Add color-scheme property to different theme selectors to optimize the user interface for light and dark themes (link, link, link, link, link, link, link, link, link) in themes.scss files

_{🔄 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/3074 **Author:** [@liyasthomas](https://github.com/liyasthomas) **Created:** 5/23/2023 **Status:** ✅ Merged **Merged:** 5/30/2023 **Merged by:** [@AndrewBastin](https://github.com/AndrewBastin) **Base:** `release/2023.4.4` ← **Head:** `chore/consistent-styles` --- ### 📝 Commits (2) - [`9767fbb`](https://github.com/hoppscotch/hoppscotch/commit/9767fbb917ca9712259bbc9f22770239a8ebbbe8) chore: make style sheets consistent - [`83ad146`](https://github.com/hoppscotch/hoppscotch/commit/83ad14638b78f5c508a65d183367162365355932) fix: pwa icons ### 📊 Changes **16 files changed** (+618 additions, -95 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/assets/scss/themes.scss` (+3 -0) 📝 `packages/hoppscotch-common/meta.ts` (+14 -2) ➕ `packages/hoppscotch-common/public/icons/pwa-1024x1024.png` (+0 -0) ➕ `packages/hoppscotch-common/public/icons/pwa-128x128.png` (+0 -0) ➕ `packages/hoppscotch-common/public/icons/pwa-16x16.png` (+0 -0) ➕ `packages/hoppscotch-common/public/icons/pwa-192x192.png` (+0 -0) ➕ `packages/hoppscotch-common/public/icons/pwa-256x256.png` (+0 -0) ➕ `packages/hoppscotch-common/public/icons/pwa-32x32.png` (+0 -0) ➕ `packages/hoppscotch-common/public/icons/pwa-512x512.png` (+0 -0) 📝 `packages/hoppscotch-selfhost-web/index.html` (+1 -1) 📝 `packages/hoppscotch-selfhost-web/meta.ts` (+14 -2) 📝 `packages/hoppscotch-selfhost-web/vite.config.ts` (+40 -6) 📝 `packages/hoppscotch-sh-admin/assets/scss/styles.scss` (+19 -20) 📝 `packages/hoppscotch-sh-admin/assets/scss/themes.scss` (+75 -64) 📝 `packages/hoppscotch-ui/src/assets/scss/styles.scss` (+449 -0) 📝 `packages/hoppscotch-ui/src/assets/scss/themes.scss` (+3 -0) </details> ### 📄 Description Closes HFE-63 TLDR; 1. Adds missing PWA icons 2. Adds `supported-color-schemes` meta tags for dark/light mode detection 3. Adds `color-scheme` in the themes' style sheet for native dark/light mode form inputs 4. Made style sheets consistent across the `hoppscotch-ui` and `hoppscotch-common` packages  ### <samp>🤖 Generated by Copilot at 1201bfe</samp> ### Summary 🎨🌐🛠️  This pull request improves the web app's appearance, performance, accessibility, and integration with different color schemes, browsers, and operating systems. It adds the `color-scheme` property to the `themes.scss` files of different packages, updates the background color and the theme-color meta tags, modifies the title and the icons of the web app, and adds custom protocol handlers to the web app manifest. It also enhances the UI elements of the code editor, the select element, and the split panes, and refactors some code related to the font size, line height, and sticky fold dimensions. > _`color-scheme` added_ > _web app looks better, faster_ > _autumn leaves falling_ ### Walkthrough * Add `color-scheme` property to different theme selectors to optimize the user interface for light and dark themes ([link](https://github.com/hoppscotch/hoppscotch/pull/3074/files?diff=unified&w=0#diff-c80409917a5fc9fa688ecbb372869961d5b7b33bf6f53ddacacfdf84df85fe8eR210), [link](https://github.com/hoppscotch/hoppscotch/pull/3074/files?diff=unified&w=0#diff-c80409917a5fc9fa688ecbb372869961d5b7b33bf6f53ddacacfdf84df85fe8eR216), [link](https://github.com/hoppscotch/hoppscotch/pull/3074/files?diff=unified&w=0#diff-c80409917a5fc9fa688ecbb372869961d5b7b33bf6f53ddacacfdf84df85fe8eR222), [link](https://github.com/hoppscotch/hoppscotch/pull/3074/files?diff=unified&w=0#diff-8a6451b28ac835ec8728b525a3185a4f9104072818652840044ae4c839db7d82R210), [link](https://github.com/hoppscotch/hoppscotch/pull/3074/files?diff=unified&w=0#diff-8a6451b28ac835ec8728b525a3185a4f9104072818652840044ae4c839db7d82R216), [link](https://github.com/hoppscotch/hoppscotch/pull/3074/files?diff=unified&w=0#diff-8a6451b28ac835ec8728b525a3185a4f9104072818652840044ae4c839db7d82R222), [link](https://github.com/hoppscotch/hoppscotch/pull/3074/files?diff=unified&w=0#diff-01add05769746b59667d8fcba29a674ddbbdc6b669473474ef8e0858bd996bb0R210), [link](https://github.com/hoppscotch/hoppscotch/pull/3074/files?diff=unified&w=0#diff-01add05769746b59667d8fcba29a674ddbbdc6b669473474ef8e0858bd996bb0R216), [link](https://github.com/hoppscotch/hoppscotch/pull/3074/files?diff=unified&w=0#diff-01add05769746b59667d8fcba29a674ddbbdc6b669473474ef8e0858bd996bb0R222)) in `themes.scss` files --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>