Joomla.org

Details: Written by: Viviana Menzel; Category: August; Published: 20 August 2026; Hits: 295

Do you want to set up a dark mode with CSS? Here's how! The light-dark() CSS function is baseline (works across the latest browser versions) since May 2024 and allows you to easily create a dark mode for your website.

What is light-dark()?

The light-dark() function accepts two colors and returns a color depending on the defined color scheme. Instead of using the media feature prefers-color-scheme you can utilize the color-scheme property. This approach allows you to define styles that automatically adjust based on the user's color scheme preference.

How to set up a dark mode with CSS?

Step 1: Define the color scheme

Start by the setting the color-scheme property on the root element. This informs the browser that your site supports both light and dark modes.

:root {
    color-scheme: light dark;
}

Step 2: Use the light-dark() function

With light-dark() you can set colors for different modes. The function takes two color values: the first for light mode and the second for dark mode.

body {
    background-color: light-dark(#ffffff, #000000); 
    color: light-dark(#000000, #ffffff); 
}

Images

The light-dark() function also works with images: you can define two different images for the different color modes.

.background {
    background-image: light-dark(url("light-image.jpg"), url("dark-image.jpg"));
}

Gradients

You can define different gradients for the color modes.

:root {
  --light-gradient: linear-gradient(135deg, var(--color1) 20%, var(--color2));
  --dark-gradient: linear-gradient(45deg, var(--color3) 30%, var(--color4));
}
section {
    background-image: light-dark(var(--light-gradient), var(--dark-gradient));
}

Example

A small example how to use light-dark() on a website and how it looks when switching the color scheme in your system or browser.

CSS

:root {
    color-scheme: light dark;
    --primary: light-dark(#b2d6ca, #024b40);
    --accent: light-dark(#fd8b8b, #5d353e);
    --bg: light-dark(#F9FAFB, #121212);
    --text: light-dark(#212121, #EAEAEA);
    --gradient: linear-gradient(135deg, var(--primary) 30%, var(--accent));
}
body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: var(--bg);
    color: var(--text);
}
.primary {
    background-color: var(--primary);
}
.accent {
    background-color: var(--accent);
}
.gradient {
    background-image: var(--gradient);
}
section {
    padding: 3rem 2rem;
}
.card {
    padding: 1rem;
    border-radius: 16px;
}
.flex {
    display: flex;
    gap: 2rem;
}
.center {
    text-align: center;
}

HTML

<body>
    <main>
        <section class="center">
            <h1>CSS Example</h1>
            <p>A light-dark() color scheme</p>
        </section>
        <section class="flex">
            <div class="card primary">
                <h2>Primary card</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
            <div class="card accent">
                <h2>Accent card</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
            <div class="card gradient">
                <h2>Gradient card</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
            </div>
        </section>
    </main>
</body>

Result on a browser using light mode:

Screenshot of a website with three cards in different colors — Light mode

Result on a browser using dark mode:

Screenshot of a website with three cards in different colors in dark mode — Dark mode

Each user will see the website automatically in the preferred color mode (system or browser setting).

Conclusion

The light-dark() is a powerful function you can use to create color styles that automatically adjust based on the user’s system or browser settings for light or dark mode.

To offer more control over the display of a website you can create a toggle to switch between light and dark mode. The correct way to implement such a toggle is topic of discussions since years. Below I have added some references you can check out.