Dark Mode

@use "@react-md/core" with (
  $color-scheme: dark
);

@include core.styles;

@use "@react-md/core" with (
  $color-scheme: system
);

@include core.styles;

@use "@react-md/core" with (
  // If the $color-scheme is not set or set to `light`, the dark elevation
  // styles are omitted by default to keep the bundle smaller. So when enabling
  // a toggleable dark mode, force the styles to be created:
  $disable-dark-elevation: false
);

@include core.styles;

.dark-theme {
  @include core.dark-theme;
}

// if you want to default with a dark theme instead:
@use "@react-md/core" with (
  $color-scheme: dark
);

@include core.styles;

.light-theme {
  @include core.light-theme;
}

import { LocalStorageColorSchemeProvider } from "@react-md/core/theme/LocalStorageColorSchemeProvider";

function App() {
  return (
    <LocalStorageColorSchemeProvider>
      <RestOfTheApp />
      <ApplyTheme />
    </LocalStorageColorSchemeProvider>
  );
}

import { useColorScheme } from "@react-md/core/theme/useColorScheme";
import { useHtmlClassName } from "@react-md/core/useHtmlClassName";

function ApplyTheme() {
  const { currentColor, setColorScheme } = useColorScheme();
  useHtmlClassName(currentColor === "dark" ? "dark-theme" : "");

  // Whatever UI is desired for this
  return (
    <Button
      onClick={() =>
        setColorScheme((prev) => (prev === "light" ? "dark" : "light"))
      }
    >
      Theme
    </Button>
  );
}

@use "@react-md/core" with (
  $color-scheme: light
);

@include core.styles;

.dark-theme {
  @include core.dark-theme;
}

@media (prefers-color-scheme: dark) {
  .system-theme {
    @include core.dark-theme;
  }
}

import { useColorScheme } from "@react-md/core/theme/useColorScheme";
import { useHtmlClassName } from "@react-md/core/useHtmlClassName";
import { cnb } from "cnbuilder";

function ApplyTheme() {
  const { colorScheme } = useColorScheme();
  useHtmlClassName(cnb(colorScheme !== "light" && `${colorScheme}-theme`));
  return null;
}

"use client";

import { type ColorScheme } from "@react-md/core/theme/types";
import { ColorSchemeProvider } from "@react-md/core/theme/useColorScheme";
import { useColorSchemeProvider } from "@react-md/core/theme/useColorSchemeProvider";
import { type UseStateSetter } from "@react-md/core/types";
import {
  type ReactElement,
  type ReactNode,
  useCallback,
  useState,
} from "react";

import { COLOR_SCHEME_KEY } from "@/constants/cookies.js";
import { setCookie } from "@/utils/clientCookies.js";

export interface CookieColorSchemeProviderProps {
  children: ReactNode;
  defaultColorScheme: ColorScheme;
}

export function CookieColorSchemeProvider(
  props: CookieColorSchemeProviderProps
): ReactElement {
  const { children, defaultColorScheme } = props;

  const [colorScheme, setColorScheme] = useState(defaultColorScheme);
  const value = useColorSchemeProvider({
    colorScheme,
    setColorScheme: useCallback<UseStateSetter<ColorScheme>>((nextOrFn) => {
      setColorScheme((prev) => {
        const next = typeof nextOrFn === "function" ? nextOrFn(prev) : nextOrFn;

        setCookie(COLOR_SCHEME_KEY, next);

        return next;
      });
    }, []),
  });

  return <ColorSchemeProvider value={value}>{children}</ColorSchemeProvider>;
}

"use client";

import Cookies from "js-cookie";

export function setCookie(name: string, value: string): void {
  const today = new Date();
  const nextYear = today.getFullYear() + 1;
  Cookies.set(name, value, {
    secure: true,
    expires: new Date(today.setFullYear(nextYear)),
    // since Vercel is running on a different domain, this must be "none" instead
    // of strict to access it from the server
    sameSite: "none",
  });
}

export function removeCookie(name: string): void {
  Cookies.remove(name, {
    secure: true,
    sameSite: "none",
  });
}

import { CoreProviders } from "@react-md/core/CoreProviders";
import { RootHtml } from "@react-md/core/RootHtml";
import { MenuConfigurationProvider } from "@react-md/core/menu/MenuConfigurationProvider";
import { NullSuspense } from "@react-md/core/suspense/NullSuspense";
import { isColorScheme } from "@react-md/core/theme/isColorScheme";
import { cnb } from "cnbuilder";
import { Roboto_Flex } from "next/font/google";
import { cookies } from "next/headers.js";
import { type ReactElement, type ReactNode } from "react";

import { CookieColorSchemeProvider } from "@/components/CookieColorSchemeProvider.jsx";
import { LoadThemeStyles } from "@/components/LoadThemeStyles.jsx";
import { COLOR_SCHEME_KEY } from "@/constants/cookies.js";
import { rmdConfig } from "@/constants/rmdConfig.jsx";

import "./layout.scss";

export { metadata } from "@/constants/metadata.js";

const roboto = Roboto_Flex({
  subsets: ["latin"],
  display: "swap",
  variable: "--roboto",
});

export interface RootLayoutProps {
  children: ReactNode;
}

export function RootLayout({ children }: RootLayoutProps): ReactElement {
  const colorSchemeCookie = cookies().get(COLOR_SCHEME_KEY)?.value;
  const defaultColorScheme = isColorScheme(colorSchemeCookie)
    ? colorScheme
    : "system";

  return (
    <RootHtml className={cnb(roboto.variable, `${defaultColorScheme}-theme`)}>
      <CoreProviders {...rmdConfig}>
        <MenuConfigurationProvider renderAsSheet="phone">
          <CookieColorSchemeProvider defaultColorScheme={defaultColorScheme}>
            <NullSuspense>
              <LoadThemeStyles />
            </NullSuspense>
            <MainLayout>{children}</MainLayout>
          </CookieColorSchemeProvider>
        </MenuConfigurationProvider>
      </CoreProviders>
    </RootHtml>
  );
}

"use client";

import { useColorScheme } from "@react-md/core/theme/useColorScheme";
import { useHtmlClassName } from "@react-md/core/useHtmlClassName";

export function LoadThemeStyles(): null {
  const { colorScheme } = useColorScheme();
  useHtmlClassName(`${colorScheme}-theme`);
  return null;
}