Overview

1. Component Styles and CSS Variables

Most of our components rely on CSS Variables for their styling.
These variables serve as placeholders for common properties like color, background-color, and border-color.
Instead of hardcoding specific values for these properties, we reference the CSS variables.

2. Dynamic Theme Switching

The @qui/styles package includes both light and dark theme styles. This allows our websites to seamlessly switch between these themes without requiring a complete rebuild.
When the user selects a theme (light or dark), we dynamically update the values of the CSS variables.
- For example, if the active theme is dark, we adjust the variables to match the dark color scheme.

This approach allows us to define the component's CSS rules once, and the theme-specific adjustments happen automatically based on the active theme.

Theme Switching

Theme switching is accomplished by applying either the dark or light className to an element in your DOM tree. We recommend the <html> or <body> element, but there's nothing stopping you from choosing another element.

The active theme for a subtree of elements is based on the presence of the dark or light className on the closest parent element. This approach allows you to customize separate sections of your application based on the desired theme.

This section will always feature the dark theme regardless of the active theme.

import {ReactNode} from "react"

import {Moon, Sun} from "lucide-react"

import {QButton} from "@qui/react"
import {Theme, useTheme} from "@qui/react-router-utils"

// This site is based on react-router and uses `@qui/react-router-utils` to manage
// the active theme.
export default function OverviewTheme(): ReactNode {
  const [theme, setTheme] = useTheme()

  return (
    <div className="flex flex-col gap-4">
      <div className="dark">
        <div className="flex w-full rounded-sm border border-strong bg-2 px-3 py-2">
          <span className="text-primary">
            This section will always feature the dark theme regardless of the
            active theme.
          </span>
        </div>
      </div>

      <div className="flex justify-center">
        <QButton
          color="primary"
          endIcon={theme === "light" ? Sun : Moon}
          onClick={() =>
            setTheme(theme === Theme.LIGHT ? Theme.DARK : Theme.LIGHT)
          }
          variant="fill"
        >
          Toggle Site Theme
        </QButton>
      </div>
    </div>
  )
}

Colors

Palette