[PR #662] style: add dark mode theme with toggle functionality #643

New Issue

GiteaMirror · 2026-02-17T12:10:49-06:00

GiteaMirror commented

2026-02-17 12:10:49 -06:00

📋 Pull Request Information

Original PR: https://github.com/conventional-commits/conventionalcommits.org/pull/662
Author: @Jorgagu
Created: 9/2/2025
Status: 🔄 Open

Base: master ← Head: style/dark-mode-theme-toggle

📝 Commits (2)

3d4d460 style: add dark mode theme with toggle functionality
d3ea270 style: fix link color not changed in dark

📊 Changes

12 files changed (+406 additions, -5 deletions)

View changed files

📝 themes/conventional-commits/layouts/partials/footer.html (+2 -1)
📝 themes/conventional-commits/layouts/partials/head.html (+12 -1)
📝 themes/conventional-commits/layouts/partials/header.html (+3 -0)
➕ themes/conventional-commits/layouts/partials/theme-toggle.html (+7 -0)
📝 themes/conventional-commits/package-lock.json (+2 -2)
📝 themes/conventional-commits/package.json (+1 -1)
➕ themes/conventional-commits/static/css/scss/abstracts/_theme-variables.scss (+41 -0)
➕ themes/conventional-commits/static/css/scss/components/_theme-toggle.scss (+39 -0)
📝 themes/conventional-commits/static/css/scss/style.scss (+3 -0)
➕ themes/conventional-commits/static/css/scss/themes/_dark-mode.scss (+204 -0)
📝 themes/conventional-commits/static/js/index.js (+2 -0)
➕ themes/conventional-commits/static/js/theme-toggle.js (+90 -0)

📄 Description

This pull request adds full support for light and dark themes to the site, including a user-toggleable theme switcher, persistent theme preference, and dynamic styling across all major components. It introduces new SCSS variables and theme-specific styles, updates markup to support theme switching, and adds the necessary JavaScript logic for toggling and storing the user's theme choice.

Theme support and switching:

Added a ThemeToggle button (theme-toggle.html) to the site header and implemented its styling and logic, allowing users to switch between light and dark modes and persist their preference in localStorage. [1] [2] [3] [4] [5]
Injected theme class (theme-dark or theme-light) into the HTML root element on page load, based on user preference or system settings, and loaded the theme toggle script in the main HTML head.

SCSS and CSS enhancements:

Introduced theme variables in _theme-variables.scss and imported them into the main stylesheet, enabling consistent color management for both themes. [1] [2]
Added dark mode-specific styles in _dark-mode.scss to ensure all components and markdown content are visually coherent in dark mode, including overrides for third-party markdown CSS and icon color switching.

Visual improvements for theme-specific assets:

Updated the Netlify badge in the footer to show the appropriate badge for the current theme, toggling between light and dark SVGs as needed. [1] [2]

Version bump:

Updated package.json and package-lock.json to version 1.1.0 to reflect the addition of theme support. [1] [2]

Closes #607

_{🔄 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/conventional-commits/conventionalcommits.org/pull/662 **Author:** [@Jorgagu](https://github.com/Jorgagu) **Created:** 9/2/2025 **Status:** 🔄 Open **Base:** `master` ← **Head:** `style/dark-mode-theme-toggle` --- ### 📝 Commits (2) - [`3d4d460`](https://github.com/conventional-commits/conventionalcommits.org/commit/3d4d4601bc85d93d092339500e8af984af686706) style: add dark mode theme with toggle functionality - [`d3ea270`](https://github.com/conventional-commits/conventionalcommits.org/commit/d3ea270e1ed3acf8caee3436b1f225a9cd9ebeda) style: fix link color not changed in dark ### 📊 Changes **12 files changed** (+406 additions, -5 deletions) <details> <summary>View changed files</summary> 📝 `themes/conventional-commits/layouts/partials/footer.html` (+2 -1) 📝 `themes/conventional-commits/layouts/partials/head.html` (+12 -1) 📝 `themes/conventional-commits/layouts/partials/header.html` (+3 -0) ➕ `themes/conventional-commits/layouts/partials/theme-toggle.html` (+7 -0) 📝 `themes/conventional-commits/package-lock.json` (+2 -2) 📝 `themes/conventional-commits/package.json` (+1 -1) ➕ `themes/conventional-commits/static/css/scss/abstracts/_theme-variables.scss` (+41 -0) ➕ `themes/conventional-commits/static/css/scss/components/_theme-toggle.scss` (+39 -0) 📝 `themes/conventional-commits/static/css/scss/style.scss` (+3 -0) ➕ `themes/conventional-commits/static/css/scss/themes/_dark-mode.scss` (+204 -0) 📝 `themes/conventional-commits/static/js/index.js` (+2 -0) ➕ `themes/conventional-commits/static/js/theme-toggle.js` (+90 -0) </details> ### 📄 Description This pull request adds full support for light and dark themes to the site, including a user-toggleable theme switcher, persistent theme preference, and dynamic styling across all major components. It introduces new SCSS variables and theme-specific styles, updates markup to support theme switching, and adds the necessary JavaScript logic for toggling and storing the user's theme choice. **Theme support and switching:** * Added a `ThemeToggle` button (`theme-toggle.html`) to the site header and implemented its styling and logic, allowing users to switch between light and dark modes and persist their preference in `localStorage`. [[1]](diffhunk://#diff-fd82c9c0e39bee32e7788b210f090ab2339f31b2a1ec6b6fa5e3ef96093ed5c3R28-R30) [[2]](diffhunk://#diff-d9a5f3075981ac85c9e006581b3f2fa1576dc6451fe1e89379b69aab4124621aR1-R7) [[3]](diffhunk://#diff-4c74453e43c0ceda57a18b41406ae25dc1f8a65455f67b34cac43fcb3dbef162R1-R39) [[4]](diffhunk://#diff-0fae4fefa4529e26735562dc8c555ca96f1db003453b0b7ece9f486e7fcc689eR1-R90) [[5]](diffhunk://#diff-b9ccd6733236778a711a2c9d3e276f9b247a498557d578d9f448bd8ff26c4b02R2-R7) * Injected theme class (`theme-dark` or `theme-light`) into the HTML root element on page load, based on user preference or system settings, and loaded the theme toggle script in the main HTML head. **SCSS and CSS enhancements:** * Introduced theme variables in `_theme-variables.scss` and imported them into the main stylesheet, enabling consistent color management for both themes. [[1]](diffhunk://#diff-5bd7b22864548265bfd214950d8a178d178593fd66f4300b6656e2d8ca01533fR1-R41) [[2]](diffhunk://#diff-81c184b5f85afa8813f60e7a8e3e5f7d28be463bbb176a85479fdaf0b9bb2bb5R1-R11) * Added dark mode-specific styles in `_dark-mode.scss` to ensure all components and markdown content are visually coherent in dark mode, including overrides for third-party markdown CSS and icon color switching. **Visual improvements for theme-specific assets:** * Updated the Netlify badge in the footer to show the appropriate badge for the current theme, toggling between light and dark SVGs as needed. [[1]](diffhunk://#diff-09382d1e17027058c100ffd0323011f44a50c07a1331c30ac1ea234ef5b4f5edL13-R14) [[2]](diffhunk://#diff-94b814f70ea0ae8edbd9bacbe773a2c6b8834f328a853614f78e9c2ef2a728b2R1-R199) **Version bump:** * Updated `package.json` and `package-lock.json` to version 1.1.0 to reflect the addition of theme support. [[1]](diffhunk://#diff-39d7e3ee73ee6aff6edf8352ca2392acaf7a4cccb18e994b26530e143472e356L3-R3) [[2]](diffhunk://#diff-b36fbd875a1395667306453e0c6373b8c8816c20fef91161482285097a65c991L3-R9) Closes #607 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

GiteaMirror added the pull-request label 2026-02-17 12:10:49 -06:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/conventionalcommits.org#643