[PR #18] [CLOSED] Add light mode and toggle #2369

New issue

Closed

opened 2026-03-17 00:04:42 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 00:04:42 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/18
Author: @abraham
Created: 8/22/2019
Status: ❌ Closed

Base: master ← Head: light

📝 Commits (1)

2057222 Add light mode and toggle

📊 Changes

5 files changed (+41 additions, -3 deletions)

View changed files

📝 index.html (+9 -1)
➕ moon.png (+0 -0)
📝 script.js (+18 -1)
📝 style.css (+14 -1)
➕ sun.png (+0 -0)

📄 Description

Add light theme and <dark-mode-toggle> to switch between them. Based on the prefers-color-scheme feature.

This will only work for browsers that support ES Module imports and custom elements. Otherwise no toggle will display.

There are some areas that could be improved in light mode

Darker logo
Dark GitHub logo
Darker Authorization/Parameters label colors

Dark	Light

_{🔄 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/18 **Author:** [@abraham](https://github.com/abraham) **Created:** 8/22/2019 **Status:** ❌ Closed **Base:** `master` ← **Head:** `light` --- ### 📝 Commits (1) - [`2057222`](https://github.com/hoppscotch/hoppscotch/commit/2057222f464b76a5c628a86408b9b89624a75c28) Add light mode and toggle ### 📊 Changes **5 files changed** (+41 additions, -3 deletions) <details> <summary>View changed files</summary> 📝 `index.html` (+9 -1) ➕ `moon.png` (+0 -0) 📝 `script.js` (+18 -1) 📝 `style.css` (+14 -1) ➕ `sun.png` (+0 -0) </details> ### 📄 Description Add light theme and [`<dark-mode-toggle>`](https://github.com/GoogleChromeLabs/dark-mode-toggle) to switch between them. Based on the [`prefers-color-scheme`](https://web.dev/prefers-color-scheme) feature. This will only work for browsers that support ES Module imports and custom elements. Otherwise no toggle will display. There are some areas that could be improved in light mode - Darker logo - Dark GitHub logo - Darker Authorization/Parameters label colors | Dark | Light | | ------------- | ------------- | | ![Screenshot from 2019-08-22 16-28-16](https://user-images.githubusercontent.com/3341/63552273-dd976500-c4fc-11e9-9723-f3e48730c45c.png) | ![Screenshot from 2019-08-22 16-28-25](https://user-images.githubusercontent.com/3341/63552283-e4be7300-c4fc-11e9-82d8-99c06c85d794.png) | --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>