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',

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 } 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 HTML class
+function syncThemeClass(isDark: boolean) {
+  const htmlElement = document.documentElement;
+  htmlElement.classList.remove('theme-light', 'theme-dark');
+  htmlElement.classList.add(isDark ? 'theme-dark' : 'theme-light');
+}
+
+// Initialize theme class immediately on load (before Vue mounts)
+if (typeof window !== 'undefined') {
+  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);
+  syncThemeClass(isDark);
+}
+
 export default {
   extends: DefaultTheme,
   Layout: () => {
@@ -27,4 +46,17 @@ export default {
       app.component(component.name, component);
     });
   },
+  setup() {
+    const { isDark } = useData();
+
+    // Set initial theme class on mount
+    onMounted(() => {
+      syncThemeClass(isDark.value);
+    });
+
+    // Watch for theme changes and update HTML class
+    watch(isDark, (newIsDark) => {
+      syncThemeClass(newIsDark);
+    });
+  },
 } 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,
+.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-dark-background-color);
+  --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,
+.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,
+.theme-dark .vp-doc .line-numbers-wrapper {
+  color: rgba(235, 235, 245, 0.3);
 }
 
 /*

docs/changelog.md

@@ -12,6 +12,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ### Added
 
+- Added the ability to disable the `ValidationService` on Angular. See
+  [docs](./guide/angular.md#customisingdisabling-validationservice) for more details.
+- `six-root`: Added theme support (dark/light/auto) in coordination with design team.
 - Added param library to choose the icon library also in `six-icon-button` and `six-tile` (default
   is material-icons)
 - New `six-paginator` component (experimental).

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-theme-switcher.md

@@ -0,0 +1,151 @@
+# Theme Switcher
+
+A simple icon button that toggles between light and dark themes. Works with six-root's theme management system.
+
+
+## Theme Switcher
+
+The `six-theme-switcher` is a simple icon button that toggles between light and dark themes. It automatically syncs with `six-root`'s theme management system.
+
+<docs-demo-six-theme-switcher-0></docs-demo-six-theme-switcher-0>
+
+```html
+<div style="background: grey">
+  <six-theme-switcher></six-theme-switcher>
+</div>
+```
+
+
+## Sizes
+
+Theme switchers inherit the same size options as icon buttons.
+
+<docs-demo-six-theme-switcher-1></docs-demo-six-theme-switcher-1>
+
+```html
+<div style="background: grey">
+  <six-theme-switcher size="xSmall"></six-theme-switcher>
+  <six-theme-switcher size="small"></six-theme-switcher>
+  <six-theme-switcher size="medium"></six-theme-switcher>
+  <six-theme-switcher size="large"></six-theme-switcher>
+  <six-theme-switcher size="xLarge"></six-theme-switcher>
+</div>
+```
+
+
+## Disabled
+
+Set the `disabled` attribute to disable the theme switcher.
+
+<docs-demo-six-theme-switcher-2></docs-demo-six-theme-switcher-2>
+
+```html
+<div style="background: grey">
+  <six-theme-switcher disabled></six-theme-switcher>
+</div>
+```
+
+
+## Custom Label
+
+Provide a custom label for screen readers using the `label` attribute. This improves accessibility.
+
+<docs-demo-six-theme-switcher-3></docs-demo-six-theme-switcher-3>
+
+```html
+<div style="background: grey">
+  <six-theme-switcher label="Switch between light and dark mode"></six-theme-switcher>
+</div>
+```
+
+
+## With Tooltip
+
+Wrap a tooltip around the theme switcher to provide contextual information to the user.
+
+<docs-demo-six-theme-switcher-4></docs-demo-six-theme-switcher-4>
+
+```html
+<div style="background: grey">
+  <six-tooltip content="Toggle theme">
+    <six-theme-switcher></six-theme-switcher>
+  </six-tooltip>
+</div>
+```
+
+
+## In Header
+
+The theme switcher is commonly used in application headers.
+
+<docs-demo-six-theme-switcher-5></docs-demo-six-theme-switcher-5>
+
+```html
+<div style="border: 1px solid var(--six-color-web-rock-300); border-radius: 4px">
+  <six-root>
+    <six-header slot="header">
+      <six-header-item>
+        <six-icon-button name="menu"></six-icon-button>
+      </six-header-item>
+
+      <six-header-item>
+        <six-logo></six-logo>
+      </six-header-item>
+
+      <six-header-item style="margin-left: auto">
+        <six-theme-switcher></six-theme-switcher>
+      </six-header-item>
+
+      <six-header-item>
+        <six-icon-button name="settings"></six-icon-button>
+      </six-header-item>
+    </six-header>
+  </six-root>
+</div>
+```
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description                                     | Type                                                                                | Default          |
+| ---------- | ---------- | ----------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- |
+| `disabled` | `disabled` | Set to true to disable the theme switcher.      | `boolean`                                                                           | `false`          |
+| `label`    | `label`    | A description that gets read by screen readers. | `string`                                                                            | `'Toggle theme'` |
+| `size`     | `size`     | The icon button's size.                         | `"large" \| "medium" \| "small" \| "xLarge" \| "xSmall" \| "xxLarge" \| "xxxLarge"` | `'medium'`       |
+
+
+## Events
+
+| Event                       | Description                        | Type                     |
+| --------------------------- | ---------------------------------- | ------------------------ |
+| `six-theme-switcher-change` | Emitted when the theme is changed. | `CustomEvent<undefined>` |
+
+
+## Shadow Parts
+
+| Part     | Description                   |
+| -------- | ----------------------------- |
+| `"base"` | The component's base wrapper. |
+
+
+## Dependencies
+
+### Depends on
+
+- [six-icon-button](six-icon-button.html)
+
+### Graph
+```mermaid
+graph TD;
+  six-theme-switcher --> six-icon-button
+  six-icon-button --> six-icon
+  style six-theme-switcher fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+Copyright © 2021-present SIX-Group