[CSS] Dark Mode Guide: System & User-Based CSS Implementation

Today, the capability to switch between dark and light modes is nearly indispensable across various websites and applications. This feature not only protects the user's eyesight but also conserves energy and enhances the overall user experience by catering to individual preferences. This article aims to meticulously guide beginners on how to incorporate this theme transition using CSS on web pages.

Default Mode Settings Based on System Configuration

By default, when a user visits a web page, it typically displays based on their system preferences. If a user's operating system or browser preference is set to dark mode, the respective web page will appear in the same mode. Such a behavior aligns the web page's style with the user's preferences, reducing eye strain and ensuring a more enjoyable browsing experience. The CSS feature prefers-color-scheme is used to facilitate this function.

What is prefers-color-scheme?

prefers-color-scheme is a feature within CSS media queries that detects the preferred color theme from a user's system settings.

Available Values:

• no-preference: Used when the user's system has no specific theme preference.
• light: Applied when light mode is preferred.
• dark: Applied when dark mode is preferred.

Implementation

1. Apply light mode style by default:

:root {
  --primary-font-color: #111827;
  --secondary-font-color: #374151;
  --bg-color: #f9f9f9;
}

• :root in CSS signifies the highest level element, usually employed to set default values for the entire web page.
• The above configuration sets the web page's default mode to light, specifying values for primary font color, secondary font color, and background color.
• --primary-font-color, --secondary-font-color, --bg-color are CSS variables storing the color values used across the web page.

2. Apply style for preferred dark mode:

@media (prefers-color-scheme: dark) {
  :root {
    --primary-font-color: #ffffff;
    --secondary-font-color: #d1d5db;
    --bg-color: #181818;
  }
}

• @media (prefers-color-scheme: dark) is a media query defining styles applied exclusively when a user's operating system or browser setting prefers dark mode.
• This section houses configurations to transition the web page's style to dark mode if a user's system setting prefers it.

By using this CSS, the website automatically transitions between light and dark modes based on the user's system preferences. The dark mode style applies only if the user prefers the dark setting, while by default, the light mode style is applied.

Considerations

• Not all browsers might support prefers-color-scheme, hence it's essential to implement with compatibility in mind.
• Relying solely on the user's system settings might be inadequate. It would be prudent to allow users to manually switch themes within the website. Details regarding this will be elaborated upon below.

Theme Transition Based on User Selection

After setting the initial mode based on system preferences, users might wish to adjust the theme as per their liking. Catering to users who might want to toggle between dark and light modes depending on their environment or specific tasks is crucial. This user-centric theme transition enhances website adaptability, providing a more personalized experience. A combination of HTML, CSS, and JavaScript achieves this functionality.

Implementation

1. HTML: Add a button for mode transition Introduce a button or toggle switch on the web page to enable toggling between dark and light modes.

<button id="themeToggle">Dark Mode</button>

2. Default and Light Mode Styles

:root,
[data-theme='light'] {
    --primary-font-color: #111827;
    --secondary-font-color: #374151;
    --bg-color: #f9f9f9;
    --divider-color: rgba(0, 0, 0, 0.1);
}

• :root in CSS denotes the primary element. By defining variables here, one can set the default style for the entire page.
• [data-theme='light'] represents the style applied to elements with a data-theme attribute value of 'light'.

3. Dark Mode Styles

[data-theme='dark'] {
    --primary-font-color: #ffffff;
    --secondary-font-color: #d1d5db;
    --bg-color: #181818;
    --divider-color: rgba(255, 255, 255, 0.1);
}

• [data-theme='dark'] denotes the style applied to elements with a data-theme value of 'dark'.

4. JavaScript: Implement Mode Transition Logic Implement logic using JavaScript to enable theme transition when the button is clicked.

const themeToggleButton = document.getElementById('themeToggle');

themeToggleButton.addEventListener('click', function() {
    const currentTheme = document.documentElement.getAttribute('data-theme');

    if (currentTheme === 'dark') {
        document.documentElement.setAttribute('data-theme', 'light');
        themeToggleButton.innerText = 'Dark Mode';
    } else {
        document.documentElement.setAttribute('data-theme', 'dark');
        themeToggleButton.innerText = 'Light Mode';
    }
});

By employing the above configurations, clicking the 'Dark Mode' button transitions the web page theme to dark mode. Conversely, in dark mode, clicking the 'Light Mode' button reverts to light mode.

The ability to toggle between dark and light modes on a website is pivotal for enhancing user experience. Through this article, we trust you've garnered a foundational understanding of how to implement this feature. Even if you're a novice in web development, following these guidelines will empower you to effectively introduce a theme transition feature to your web page.