Dark mode

Atomix allows you to easily enable dark mode for your webpage with a simple class.

Enabling Dark Mode

To activate dark mode, simply add the dark class to the <body> tag of your HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Example</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/enioaiello/atomix/dist/atomix.min.css">
</head>
<body class="dark">
    <h1>Welcome to Dark Mode</h1>
    <p>Your website now has a dark theme!</p>
</body>
</html>

How It Works

The dark class applies a predefined dark theme to the entire page.
Background colors, text colors, and other UI elements will automatically adjust to match the dark mode styling.

Toggling Dark Mode with JavaScript

If you want users to toggle between light and dark modes dynamically, you can use a simple JavaScript function:

<button onclick="toggleDarkMode()">Toggle Dark Mode</button>

<script>
    function toggleDarkMode() {
        document.body.classList.toggle("dark");
    }
</script>

This will allow users to switch between dark and light themes with a button click.

Dark mode improves readability in low-light environments and reduces eye strain. Try integrating it into your site for a better user experience!

PreviousSemantic elements NextTexts and fonts

Last updated 12 months ago

hashtagEnabling Dark Mode

hashtagHow It Works

hashtagToggling Dark Mode with JavaScript

Enabling Dark Mode

How It Works

Toggling Dark Mode with JavaScript