html

The root element of an HTML document, containing all other elements.

Description

The <html> element is the root of an HTML document. In Vanilla Breeze, it serves as the attachment point for theming and page layout configuration via data attributes.

Basic Example

<!DOCTYPE html> <html lang="en"> <head>...</head> <body>...</body> </html>

Documentation Page

Documentation pages use the data-page="docs" attribute for layout:

<html lang="en" data-page="docs"> <head>...</head> <body>...</body> </html>

Vanilla Breeze Attributes

Vanilla Breeze uses data attributes on the <html> element to control theming and layout.

data-page

Sets the page layout type. Different values apply different structural styles.

Value Description
docs Documentation layout with sticky header, sidebar navigation, and article structure
<html lang="en" data-page="docs">

data-mode

Controls light/dark mode. When omitted, mode follows the user's system preference (auto).

Value Description
(omitted) Auto mode - follows system preference via prefers-color-scheme
light Force light mode regardless of system preference
dark Force dark mode regardless of system preference
<html lang="en" data-mode="dark">

data-theme

Sets the brand color theme. When omitted, uses the default purple/blue theme.

Value Description
(omitted) Default theme - purple primary (hue 260)
ocean Teal-blue professional palette (hue 200)
forest Green nature-inspired palette (hue 145)
sunset Warm orange-coral palette (hue 25)
<html lang="en" data-theme="ocean">

Combining Attributes

All data attributes can be combined:

<html lang="en" data-page="docs" data-theme="forest" data-mode="dark">

Theme Manager

Vanilla Breeze includes a ThemeManager utility for programmatic theme control with localStorage persistence.

import { ThemeManager } from './lib/theme-manager.js'; // Initialize on page load (applies saved preferences) ThemeManager.init(); // Change mode ThemeManager.setMode('dark'); // Force dark ThemeManager.setMode('light'); // Force light ThemeManager.setMode('auto'); // Follow system // Change brand theme ThemeManager.setBrand('ocean'); // Apply ocean theme ThemeManager.setBrand('default'); // Reset to default // Toggle between light and dark ThemeManager.toggleMode(); // Get current state const { mode, brand, effectiveMode } = ThemeManager.getState(); // Listen for changes window.addEventListener('theme-change', (e) => { console.log(e.detail); // { mode, brand, effectiveMode } });

Standard Attributes

The <html> element supports these standard HTML attributes:

Attribute Description
lang Document language (e.g., en, es, fr). Required for accessibility.
dir Text direction: ltr (left-to-right) or rtl (right-to-left)

Accessibility

  • Always set lang: Screen readers use this to select the correct pronunciation
  • Theme considerations: The data-mode attribute works with color-scheme CSS to ensure proper contrast and respect user preferences
  • Motion preferences: Vanilla Breeze respects prefers-reduced-motion regardless of theme settings

Related