Learn
JavaScript
Light/Dark

Light / Dark

Javascript
Light
Dark

Light/dark

Kacper Walczak · 23-10-2023

  • Check out how to light/dark your website or app.

Edited: 12-06-2024

How to light/dark

If you are looking for an instant solution to light/dark your website or app, check out my Light/Dark CSS Generator (opens in a new tab) website.

Only CSS

To change theme only with CSS you can use prefers-color-scheme media query.

@media (prefers-color-scheme: dark) {
    body {
        background: black;
        color: white;
    }
}

CSS variables

This is the simples approach to automatically change theme based on user preferences.

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #0e0e0e;
        --text-color: #f0f0f0;
    }
}
 
@media (prefers-color-scheme: light) {
    :root {
        --background-color: #ffffff;
        --text-color: #1a1a1a;
    }
}
 
body {
    color-scheme: light dark;
    background-color: var(--background-color);
    color: var(--text-color);
}

Dynamic theme changing with JS

You can also use CSS variables to change theme dynamically.

body {
    background: var(--bg-color);
    color: var(--text-color);
}
 
body.dark {
    --bg-color: black;
    --text-color: white;
}
 
body.light {
    --bg-color: white;
    --text-color: black;
}

And then you will need to change class on body element.

document.body.classList.add('dark');
document.body.classList.remove('light');

Use library

Check out Qtheme library. Qtheme is a library that allows you to create themes and change them dynamically.

Qtheme

Init theme at the beginning of your app.

import {Qtheme} from '@quak.lib/qtheme';
 
Qtheme.setTheme({
    name: 'dark',
    atoms: [
        ['bg-color', 'background:black'],
        ['text-color', 'color:white']
    ]
})

Use in HTML:

<body class="bg-color text-color">
    <p>Regular text</p>
</body>

Change to light theme:

Qtheme.setTheme({
    name: 'light',
    atoms: [
        ['bg-color', 'background:white'],
        ['text-color', 'color:black']
    ]
})

That's all. You can theme your apps and websites with any approach you want.

READ

Latest readings

  • Readings are sites which will help you with detailed

  • information about given topic. Read latest ones from Learn.

AI

06-03-2026

Local Voice Assistant with Ollama

  • Build your own local voice assistant powered by Ollama.

AI

06-03-2026

AI YouTube Thumbnail Generator

  • Generate YouTube thumbnails with FastAPI and Ollama.

Architecture

05-09-2024

Graph DB usage comparison

  • Compare Neo4j and Tigergraph databases, which is easier to work with, etc.