import { createContext, use, useContext } from "octane";
module
  type ThemeName = "light" | "dark";
  interface ProviderProps {
    theme: ThemeName;
    children: unknown;
  }

  const Theme = createContext<ThemeName>("light");

component ThemeLabel
  setup const theme = use(Theme);
  p.theme-label #{"Current theme: " + theme}

component ThemeSwatch
  setup const theme = useContext(Theme);
  span(aria-label={"Theme swatch: " + theme} data-theme={theme})
props { theme, children }: ProviderProps

Theme(value={theme})
  section.theme-shell(data-theme={theme})
    ThemeLabel
    ThemeSwatch
    | #{children}