Hatsune Miku Theme

Composed for the browser.

A live preview of the generated Web CSS contract. All theme colors on this page resolve from --hm-* custom properties. View the live color tokens.

Theme

Reading system preference…

Use tokens, not hex values

Build with semantic roles.

Load hatsune-miku-theme.css and use its semantic custom properties for surfaces, text, actions, fields, and syntax. It follows the system color scheme by default. Set data-hm-theme to one of light, dark, snow-2024, mm-2025 on <html> or a container to choose or scope a theme.

Match secondary text to its surface: use --hm-color-text-secondary on page or content, --hm-color-text-on-chrome-secondary on chrome, and --hm-color-text-on-overlay-secondary on overlays. Action foreground and background pairs are surface-independent.

Preview in context

Test components and syntax together.

The controls below use state-specific foreground, background, border, focus, and field tokens. Status labels and symbols keep meaning independent of color.

Hatsune Miku Theme

Release settings

Check real interface roles across every registered theme before using one on another site.

Tab through the controls to inspect the shared focus ring.

  • Success
  • Warning
  • Error
  • Information

theme.ts

// Semantic roles survive framework changes.
export const theme = await loadTheme({
  name: 'Hatsune Miku Theme',
  voices: 4,
  mode: 'system'
});

function ThemeChip(props: ThemeProps) {
  return <button data-hm-theme="dark">
    {props.label}
  </button>;
}

Resolved token values

Inspect the Web color tokens.

Switch themes to update every swatch and its resolved browser value. Use the --hm-* property in CSS; displayed colors are generated reference output, not values to copy.

01

Foundations

Surfaces, structure, and keyboard focus.

  • Page --hm-color-surface-page Computed in your browser
  • Content --hm-color-surface-content Computed in your browser
  • Chrome --hm-color-surface-chrome Computed in your browser
  • Overlay --hm-color-surface-overlay Computed in your browser
  • Default border --hm-color-border-default Computed in your browser
  • Subtle border --hm-color-border-subtle Computed in your browser
  • Focus ring --hm-color-focus-ring Computed in your browser

02

Content

Readable text by surface, plus links, selection, and caret.

  • Primary text --hm-color-text-primary Computed in your browser
  • Secondary text --hm-color-text-secondary Computed in your browser
  • Secondary on chrome --hm-color-text-on-chrome-secondary Computed in your browser
  • Secondary on overlay --hm-color-text-on-overlay-secondary Computed in your browser
  • Subtle text --hm-color-text-subtle Computed in your browser
  • Placeholder --hm-color-text-placeholder Computed in your browser
  • Default link --hm-color-link-default Computed in your browser
  • Active link --hm-color-link-active Computed in your browser
  • Selection --hm-color-selection-background Computed in your browser
  • Caret --hm-color-caret Computed in your browser

03

Accents and status

Brand accents and labeled status foregrounds for content surfaces.

  • Primary accent --hm-color-accent-primary Computed in your browser
  • Secondary accent --hm-color-accent-secondary Computed in your browser
  • Tertiary accent --hm-color-accent-tertiary Computed in your browser
  • Success --hm-color-status-success Computed in your browser
  • Warning --hm-color-status-warning Computed in your browser
  • Error --hm-color-status-error Computed in your browser
  • Information --hm-color-status-info Computed in your browser

04

Syntax voices

Representative roles from the complete syntax contract.

  • Keyword --hm-color-syntax-keyword Computed in your browser
  • Control keyword --hm-color-syntax-keyword-control Computed in your browser
  • Variable --hm-color-syntax-variable Computed in your browser
  • Function --hm-color-syntax-function Computed in your browser
  • String --hm-color-syntax-string Computed in your browser
  • Type --hm-color-syntax-type Computed in your browser
  • Class --hm-color-syntax-class Computed in your browser
  • Number --hm-color-syntax-number Computed in your browser
  • Operator --hm-color-syntax-operator Computed in your browser
  • Comment --hm-color-syntax-comment Computed in your browser
  • Tag --hm-color-syntax-tag Computed in your browser
  • Attribute --hm-color-syntax-attribute Computed in your browser