Theming
Dark mode, typography, and customizing the look of Glasswave.
Dark mode
Glasswave automatically adapts to the user's browser theme (light or dark).
There is no manual theme switcher, as theming is handled through Tailwind CSS using dark: modifiers.
If you want to control the theme manually (e.g. with a theme toggle), override Tailwind's dark variant in your CSS so it follows a class instead of the system preference:
1@import "glasswave/styles";2@import "tailwindcss";3 4@custom-variant dark (&:where(.dark, .dark *));Then toggle the dark class on the <html> element — all Glasswave components will follow.
Typography
Glasswave is designed for the Inter typeface, but does not bundle it. The library declares Inter as the preferred sans-serif family with system fallbacks:
1@theme {2 --font-sans: "Inter", "Inter Variable", ui-sans-serif, system-ui, sans-serif;3}If Inter is loaded on your page it is picked up automatically; otherwise components fall back to system fonts. No extra network requests are made by the library.
Loading Inter
With Next.js, use next/font — the font is self-hosted and served from your own domain:
1import { Inter } from "next/font/google";2 3const inter = Inter({ subsets: ["latin"] });4 5export default function RootLayout({ children }) {6 return (7 <html lang="en" className={inter.className}>8 <body>{children}</body>9 </html>10 );11}Outside of Next.js, any method works — for example Fontsource:
1npm install @fontsource-variable/inter1import "@fontsource-variable/inter";Using a different font
Override --font-sans in your own @theme block after the Glasswave import:
1@import "glasswave/styles";2@import "tailwindcss";3 4@theme {5 --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;6}