Dark Mode

Dark Mode Configuration

OrbitUI components come with built-in support for a dark theme, leveraging Tailwind CSS’s dark mode capabilities and CSS variables. Configuring dark mode allows users to switch between a light and dark appearance for your website or application, enhancing usability and aesthetics based on user preference.

OrbitUI’s dark theme is applied when the .dark class is present on the <html> element of your page. The theme file generated by npx orbitkit init contains the necessary CSS variables defined within this .dark selector.

Toggling the .dark Class

To enable or disable dark mode, you need to add or remove the .dark class from the <html> element. This typically involves using JavaScript. The implementation can vary depending on your project’s complexity and desired user experience (e.g., respecting system preference, providing a manual toggle, saving preference in local storage).

Here’s a basic example of how you might toggle the .dark class using a simple script and save the user’s preference in localStorage:

// Function to set the theme class
function setTheme(theme) {
  document.documentElement.classList.toggle("dark", theme === "dark");
}

// Check local storage or system preference on page load
const storedTheme = localStorage.getItem("theme");
if (storedTheme) {
  setTheme(storedTheme);
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
  // Respect system preference if no theme is stored
  setTheme("dark");
} else {
  // Default to light if no preference
  setTheme("light");
}

// Example function to toggle theme (e.g., connected to a button)
// You would call this from a button or toggle element in your UI
function toggleTheme() {
  const currentTheme = document.documentElement.classList.contains("dark")
    ? "dark"
    : "light";
  const newTheme = currentTheme === "light" ? "dark" : "light";
  setTheme(newTheme);
  localStorage.setItem("theme", newTheme); // Save preference
}

You would then create a UI element (like a button or switch) in your site’s header or settings that calls the toggleTheme function when clicked.

OrbitUI components automatically pick up the dark theme styles defined in the theme file when the .dark class is present, so no additional configuration is needed at the component level.

Theme Variables in Dark Mode

The specific color values for the dark theme are defined in your OrbitUI theme file (generated by npx orbitkit init). These values override the default (light) values when the .dark class is active.

Refer to the Theming Guide for a detailed list of the theme variables and their values in both light and dark modes, and how to customize them.

By following these steps, you can successfully implement dark mode in your Astro project using OrbitUI components and Tailwind CSS.