# 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:

```html
<!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:

```html
<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!
