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
darkclass 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!
Last updated