Skip to content

Conversation

@Jorgagu
Copy link

@Jorgagu Jorgagu commented Sep 2, 2025

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

Implement comprehensive dark mode support with automatic system preference detection and
manual toggle. Includes CSS variables for theming, JavaScript toggle with localStorage
persistence, GitHub markdown CSS overrides, and prevents page navigation color blink.

Features:

* CSS variables for light/dark theme colors
* Theme toggle button with SVG icons in header
* System preference detection (prefers-color-scheme: dark)
* localStorage persistence for user preference
* GitHub markdown CSS dark theme overrides
* Netlify badge switching for dark/light modes
* Fixed dropdown styling in dark mode
* Immediate theme application to prevent color blink

Closes conventional-commits#607
@Jorgagu
Copy link
Author

Jorgagu commented Sep 2, 2025

👋 @damianopetrungaro could you please review and give feedbacks on this PR ?

@Jorgagu
Copy link
Author

Jorgagu commented Sep 16, 2025

👋 @lorenzodianni since you initiated the design and the new UI, could you please review this?

@lorenzodianni
Copy link
Member

Hi @Jorgagu, thanks for the PR!
I think the right starting point is to continue following the core package github-markdown-css, which provides us with all the base styles. If we upgrade it to the latest version, the package already includes built-in light/dark mode support. On top of that, we can customize colors and styles as needed.

In my opinion, if we move forward with this restyle without upgrading the package, we’ll have significant technical debt in the near future.

@damianopetrungaro what do you think?

@Jorgagu
Copy link
Author

Jorgagu commented Sep 23, 2025

@lorenzodianni If you’d like, I can upgrade the github-markdown-css package in a new branch (and PR) to test the behavior, then rebase this branch afterward to finish the work if needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Adding dark mode

2 participants