Use data-theme attribute for theme switching and set color-scheme

[taoyouh]

What does this PR change? What problem does it solve?

When dark/light mode is selected, not only set the css colors but also set the color-scheme variable, so that native controls (if any, such as custom HTML embedded in markdown) have more natural color by default.

This pull request refactors the site's theme switching logic and CSS selectors to use the data-theme attribute on the html element instead of toggling the dark class on the body. This change improves consistency and maintainability for theme-dependent styles, and updates both the JavaScript and CSS to reflect the new approach. The most important changes are grouped below:

Theme Switching Logic

• All theme toggle and initialization scripts now set the data-theme attribute on the html element, replacing the previous use of the dark class on the body. This affects files such as header.html and footer.html. [1] [2] [3]

CSS Selector Updates

• CSS selectors throughout the codebase now use [data-theme="dark"] and [data-theme="light"] instead of .dark or :not(.dark), ensuring styles are applied based on the data-theme attribute. This includes updates in theme-vars.css, header.css, post-single.css, and scroll-bar.css. [1] [2] [3] [4] [5]

Theme Variable Improvements

• The CSS variables for theme colors and color-scheme are now scoped to [data-theme="dark"] and [data-theme="light"], further aligning the code with the new theme management approach. [1] [2] [3]

Scroll Bar and TOC Styling

• Scroll bar and table of contents (TOC) styles now rely on the data-theme attribute, ensuring correct appearance in both light and dark modes. [1] [2] [3]

These changes make the theme system more robust and easier to extend, and ensure consistent behavior across the site.

Was the change discussed in an issue or in the Discussions before?

Not discussed before.

PR Checklist

• This change adds/updates translations and I have used the template present here.
• I have enabled maintainer edits for this PR.
• I have verified that the code works as described/as intended.
• This change adds a Social Icon which has a permissive license to use it.
• This change does not include any CDN resources/links.
• This change does not include any unrelated scripts such as bash and python scripts.
• This change updates the overridden internal templates from HUGO's repository.

[Copilot]

Pull Request Overview

This PR adds the CSS color-scheme property to the theme's color scheme definitions to ensure native HTML controls (such as form inputs, scrollbars, or embedded HTML elements) automatically adapt their appearance to match the selected dark or light mode.

Key Changes:

• Added color-scheme: only light; to the light theme definition
• Added color-scheme: only dark; to the dark theme definition

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
assets/css/core/theme-vars.css	Added color-scheme property to both light and dark theme CSS class definitions
layouts/partials/head.html	Added color-scheme property to the inline dark theme CSS within the HTML head

---

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[adityatelange]

Doesn't change the browser theme to light/dark.

Use disableScrollBarStyle: true disable the scrollbar style so that the browser sets the mode.

[taoyouh]

Sorry I don't quite understand. This PR intends to make HTML without custom CSS to have acceptable visibility by default. For example I can add a checkbox in my content:

<input type="checkbox" id="contactFormAcceptPolicy" required />

With my PR it looks like this:

Without my PR the checkbox has inverted color scheme:

Also, if I add some validation to a form, the default validation UI is not easy to change via CSS and it becomes:
With this PR:

Without this PR:

It will be a hard-work to set custom style for all kinds of elements. However, if we set the color-scheme, the default styles will match our custom color scheme better.

I don't see any effect of this PR on scroll bar style or browser scheme.

[taoyouh]

Sorry wrong image attached. I've updated my comment above.

[adityatelange]

Right, but if we are setting color-scheme it should change color of all browser-provided UI elements including scrollbars. This way we affect only internal elements inside the body tag as .dark is added to body only.

[taoyouh]

I assumed if the body is using dark scheme, scrollbars and other browser elements inside body should also be dark scheme for consistency. If we ever use native scrollbar, a dark-scheme page with ligh-scheme scroll bar shall look weird.

Do you have some other consideration on that? Or, will it look better if I set the color-scheme on body.dark instead of :root?

[adityatelange]

@taoyouh
Done some major changes for color-scheme to work with/without js enabled. I think this would work
Also if you see any other color issues, please let me know

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[taoyouh]

I have tested my scenario and it looked good with your changes. I have some additional suggestions: given we now set color-scheme we can use dark-light function to remove some css replications.

[taoyouh]

Looks good to me now