feature/theme-support | theme support for six-root

docs/.vitepress/config.mts

@@ -15,7 +15,6 @@ const componentNavItems = components.map((component) => {
 // https://vitepress.dev/reference/site-config
 export default withMermaid({
   ignoreDeadLinks: [/^https?:\/\/localhost/, './../wrappers/set-attributes'],
-  appearance: false,
   head: [['link', { rel: 'icon', href: 'favicon.ico' }]],
   title: 'Web Components',
   description: 'Component Library following the SIX Style Guide',
@@ -64,6 +63,7 @@ export default withMermaid({
               items: [
                 { text: 'Tables', link: '/guide/styling/tables' },
                 { text: 'Colors', link: '/guide/styling/colors' },
+                { text: 'Dark Mode', link: '/guide/styling/dark-mode' },
                 { text: 'Spacing', link: '/guide/styling/spacing' },
                 { text: 'Typography', link: '/guide/styling/typography' },
                 { text: 'Shadows', link: '/guide/styling/shadows' },

docs/.vitepress/theme/index.ts

@@ -4,13 +4,32 @@ import DefaultTheme from 'vitepress/theme';
 import './style.css';
 import { defineCustomElements } from '@six-group/ui-library/loader';
 import { Theme } from 'vitepress';
+import { onMounted, watch } from 'vue';
+import { useData, useRouter } from 'vitepress';
 
 // @ts-ignore
 const modules = import.meta.glob('../../examples/**/*.vue', { eager: true });
 const exampleComponents = [];
 for (const path in modules) {
   exampleComponents.push(modules[path].default);
 }
+
+// Sync VitePress theme with the SIX theme attribute
+function syncSixTheme(isDark: boolean) {
+  document.documentElement.setAttribute('data-six-theme', isDark ? 'dark' : 'light');
+}
+
+// Initialize theme class immediately on load (before Vue mounts)
+if (typeof window !== 'undefined') {
+  // Drop any theme persisted by the six-root demo so it doesn't survive a reload
+  localStorage.removeItem('six-theme');
+  const savedTheme = localStorage.getItem('vitepress-theme-appearance');
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const isDark =
+    savedTheme === 'dark' || (savedTheme === 'auto' && prefersDark) || (!savedTheme && prefersDark);
+  syncSixTheme(isDark);
+}
+
 export default {
   extends: DefaultTheme,
   Layout: () => {
@@ -27,4 +46,27 @@ export default {
       app.component(component.name, component);
     });
   },
+  setup() {
+    const { isDark } = useData();
+    const router = useRouter();
+
+    // Set initial theme on mount
+    onMounted(() => {
+      syncSixTheme(isDark.value);
+    });
+
+    // Watch for theme changes and update the attribute
+    watch(isDark, (newIsDark) => {
+      syncSixTheme(newIsDark);
+    });
+
+    // Demos (e.g. six-root with six-theme-switcher) can switch the SIX theme
+    // globally; reset it when navigating so it doesn't leak to other pages
+    const prevAfterRouteChanged = router.onAfterRouteChanged;
+    router.onAfterRouteChanged = async (to) => {
+      await prevAfterRouteChanged?.(to);
+      localStorage.removeItem('six-theme');
+      syncSixTheme(isDark.value);
+    };
+  },
 } satisfies Theme;

docs/.vitepress/theme/style.css

@@ -6,20 +6,59 @@
  */
 
 /**
- * Colors
- --vp-code-block-color
+ * Colors - Light Theme
  * -------------------------------------------------------------------------- */
 
 :root {
+  /* Brand colors */
   --vp-c-brand-1: #de3919;
   --vp-c-brand-2: #e83c1a;
   --vp-c-brand-3: #f23f1b;
   --vp-c-brand-soft: #f7401b;
+
+  /* Text colors */
+  --vp-c-text-1: unset;
+
+  /* Layout */
   --vp-nav-logo-height: 14px;
+
+  /* Search */
   --vp-local-search-highlight-bg: none;
   --vp-local-search-highlight-text: var(--vp-c-brand-1);
+
+  /* Code blocks - Light theme */
   --vp-code-block-bg: #f6f6f7;
   --vp-code-bg: #f6f6f7;
+  --vp-code-color: #383a42;
+}
+
+/**
+ * Colors - Dark Theme
+ * -------------------------------------------------------------------------- */
+.dark,
+[data-six-theme='dark'] {
+  /* Code blocks - Dark theme */
+  --vp-code-block-bg: #1e1e1e;
+  --vp-code-bg: #1e1e1e;
+  --vp-code-color: #abb2bf;
+
+  /* Background colors */
+  --vp-c-bg: var(--six-color-web-rock-900);
+  --vp-c-bg-soft: #242424;
+  --vp-c-bg-mute: #2c2c2c;
+  --vp-c-bg-alt: #151515;
+
+  /* Divider colors */
+  --vp-c-divider: #2e2e2e;
+  --vp-c-gutter: #1a1a1a;
+
+  /* Text colors */
+  --vp-c-text-1: rgba(255, 255, 245, 0.86);
+  --vp-c-text-2: rgba(235, 235, 245, 0.6);
+  --vp-c-text-3: rgba(235, 235, 245, 0.38);
+
+  /* Sidebar */
+  --vp-sidebar-bg-color: #232323;
 }
 
 /**
@@ -46,6 +85,28 @@
 /* overwrite to match color of vitepress code background */
 code {
   background: var(--vp-code-bg);
+  color: var(--vp-code-color);
+}
+
+/* Code blocks styling */
+.vp-doc div[class*='language-'] {
+  background-color: var(--vp-code-block-bg);
+}
+
+.vp-doc div[class*='language-'] code {
+  color: var(--vp-code-color);
+}
+
+/* Improve code block header visibility in dark mode */
+.dark .vp-doc div[class*='language-'] .lang,
+[data-six-theme='dark'] .vp-doc div[class*='language-'] .lang {
+  color: rgba(235, 235, 245, 0.6);
+}
+
+/* Improve line numbers visibility */
+.dark .vp-doc .line-numbers-wrapper,
+[data-six-theme='dark'] .vp-doc .line-numbers-wrapper {
+  color: rgba(235, 235, 245, 0.3);
 }
 
 /*
@@ -55,3 +116,47 @@ code {
 .content-container {
   max-width: 1400px !important;
 }
+
+/*
+  Page scrollbars follow the VitePress theme (.dark) instead of the SIX theme tokens,
+  which demos (e.g. the six-root example) can toggle at runtime.
+ */
+html {
+  scrollbar-color: var(--six-color-web-rock-500) var(--six-color-web-rock-300);
+}
+
+html::-webkit-scrollbar-track {
+  background: var(--six-color-web-rock-300);
+}
+
+html::-webkit-scrollbar-thumb {
+  background: var(--six-color-web-rock-500);
+}
+
+html::-webkit-scrollbar-thumb:hover {
+  background: var(--six-color-web-rock-600);
+}
+
+html.dark {
+  scrollbar-color: var(--six-color-web-rock-700) var(--six-color-web-rock-900);
+}
+
+html.dark::-webkit-scrollbar-track {
+  background: var(--six-color-web-rock-900);
+}
+
+html.dark::-webkit-scrollbar-thumb {
+  background: var(--six-color-web-rock-700);
+}
+
+html.dark::-webkit-scrollbar-thumb:hover {
+  background: var(--six-color-web-rock-600);
+}
+
+/*
+  Inside the six-root demo, scrollbars follow the SIX theme tokens again
+  (scrollbar-color is inherited, so the pinned page value would leak in here)
+ */
+.six-root-wrapper {
+  scrollbar-color: var(--six-scrollbar-thumb-color) var(--six-scrollbar-background-color);
+}

docs/changelog.md

@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## Upcoming
 
+### Added
+
+- Dark mode: activated via the `data-six-theme="dark"` attribute on the root element, or
+  automatically via the OS preference (`prefers-color-scheme`) when no attribute is set. Dark token
+  overrides now live in `dark-theme.css` and follow the SIX dark mode design guidelines. See the
+  [Dark Mode guide](./guide/styling/dark-mode.md). `six-root` and `six-theme-switcher` manage the
+  attribute automatically (the previous `.theme-dark`/`.theme-light` classes are no longer used).
+  `six-theme-switcher` now also works standalone — without a `six-root` it toggles the
+  `data-six-theme` attribute directly and stays in sync with attribute and OS preference changes.
+
 ## 5.5.0 - 2026-07-03
 
 - `six-breadcrumbs` new style aligned with design guidelines. Added `size` interface property.

docs/components/component.tags.mts

@@ -1 +1 @@
-export const components = ["six-alert","six-avatar","six-badge","six-breadcrumbs","six-breadcrumbs-item","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-paginator","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-rating","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];
+export const components = ["six-alert","six-avatar","six-badge","six-breadcrumbs","six-breadcrumbs-item","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-paginator","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-rating","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-theme-switcher","six-tile","six-timepicker","six-tooltip"];

docs/components/six-icon-button.md

@@ -203,6 +203,7 @@ Often icon buttons are combined with badges to signal new entries. For this simp
  - [six-tab](six-tab.html)
  - [six-tab-group](six-tab-group.html)
  - [six-tag](six-tag.html)
+ - [six-theme-switcher](six-theme-switcher.html)
  - [six-tile](six-tile.html)
 
 ### Depends on
@@ -222,6 +223,7 @@ graph TD;
   six-tab --> six-icon-button
   six-tab-group --> six-icon-button
   six-tag --> six-icon-button
+  six-theme-switcher --> six-icon-button
   six-tile --> six-icon-button
   style six-icon-button fill:#f9f,stroke:#333,stroke-width:4px
 ```

docs/components/six-root.md

@@ -11,11 +11,15 @@ You can remove the content padding by adding `padded="false"` to `six-root`.
 
 You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well as provide version information by adding `version="DEV-1.1.2"`to `six-root`. Providing nothing or `PROD` will disable stage indication
 
+## Theme Support
+
+`six-root` includes built-in theme management. Set the `theme` attribute to `light`, `dark`, or `auto` (follows system preference). Use `six-theme-switcher` to toggle themes.
+
 <docs-demo-six-root-0></docs-demo-six-root-0>
 
 ```html
 <div class="six-root-wrapper">
-  <six-root stage="PROD" style="height: 100%" version="PROD-1.2.3">
+  <six-root id="app-root" stage="PROD" style="height: 100%" version="PROD-1.2.3">
     <six-header slot="header">
 
       <six-header-item>
@@ -35,6 +39,11 @@ You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well
       </six-header-item>
 
 
+      <six-header-item>
+        <six-theme-switcher></six-theme-switcher>
+      </six-header-item>
+
+
       <six-header-dropdown-item>
         <six-icon-button slot="trigger">
           <six-avatar                     image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
@@ -103,7 +112,19 @@ You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well
     </six-sidebar>
 
     <div slot="main">
-      <p>Content</p>
+      <six-input label="Input Field" placeholder="Type something" value="Sample text"></six-input>
+      <br>
+      <six-textarea label="Textarea" placeholder="Type something" rows="3"></six-textarea>
+      <br>
+      <six-button>Primary Button</six-button>
+      <six-button type="secondary">Secondary Button</six-button>
+      <br><br>
+      <six-alert type="info" open>
+        <six-icon slot="icon">info</six-icon>
+        This is an info alert. Toggle the theme using the switcher in the header to see how components adapt.
+      </six-alert>
+
+      <h3>Content</h3>
       <div>
         <six-button id="show-tasks">Show some tasks...</six-button>
         <six-button id="toggle-text">Toggle some text...</six-button>
@@ -225,6 +246,7 @@ You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well
       );
 
     const Select = getElements({
+      root: '#app-root',
       header: 'six-header',
       leftSidebar: 'six-sidebar[slot="left-sidebar"]',
       tasksButton: '#show-tasks',
@@ -280,11 +302,51 @@ You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well
 
 ## Properties
 
-| Property  | Attribute | Description                                          | Type                                                                   | Default |
-| --------- | --------- | ---------------------------------------------------- | ---------------------------------------------------------------------- | ------- |
-| `padded`  | `padded`  | Defines whether the content section should be padded | `boolean`                                                              | `true`  |
-| `stage`   | `stage`   | Defines the stage of the application                 | `"ACCEPTANCE" \| "DEV" \| "ETU" \| "ITU" \| "LOCAL" \| "PROD" \| null` | `null`  |
-| `version` | `version` | Defines the version of the application               | `string`                                                               | `''`    |
+| Property  | Attribute | Description                                          | Type                                                                   | Default   |
+| --------- | --------- | ---------------------------------------------------- | ---------------------------------------------------------------------- | --------- |
+| `padded`  | `padded`  | Defines whether the content section should be padded | `boolean`                                                              | `true`    |
+| `stage`   | `stage`   | Defines the stage of the application                 | `"ACCEPTANCE" \| "DEV" \| "ETU" \| "ITU" \| "LOCAL" \| "PROD" \| null` | `null`    |
+| `theme`   | `theme`   | Defines the theme                                    | `"auto" \| "dark" \| "light"`                                          | `'light'` |
+| `version` | `version` | Defines the version of the application               | `string`                                                               | `''`      |
+
+
+## Methods
+
+### `getTheme() => Promise<{ theme: SixTheme; appliedTheme: "light" | "dark"; }>`
+
+Gets the current theme and applied theme.
+
+#### Returns
+
+Type: `Promise<{ theme: SixTheme; appliedTheme: "light" | "dark"; }>`
+
+
+
+### `setTheme(theme: SixTheme) => Promise<void>`
+
+Sets the theme.
+
+#### Parameters
+
+| Name    | Type                          | Description |
+| ------- | ----------------------------- | ----------- |
+| `theme` | `"auto" \| "light" \| "dark"` |             |
+
+#### Returns
+
+Type: `Promise<void>`
+
+
+
+### `toggleTheme() => Promise<void>`
+
+Toggles between light and dark theme.
+
+#### Returns
+
+Type: `Promise<void>`
+
+
 
 
 ## Slots