diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index 7a51490f3..023e896a4 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -16,5 +16,21 @@
       </option>
       <option name="myCustomValuesEnabled" value="true" />
     </inspection_tool>
+    <inspection_tool class="HtmlUnknownTag" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="7">
+            <item index="0" class="java.lang.String" itemvalue="nobr" />
+            <item index="1" class="java.lang.String" itemvalue="noembed" />
+            <item index="2" class="java.lang.String" itemvalue="comment" />
+            <item index="3" class="java.lang.String" itemvalue="noscript" />
+            <item index="4" class="java.lang.String" itemvalue="embed" />
+            <item index="5" class="java.lang.String" itemvalue="script" />
+            <item index="6" class="java.lang.String" itemvalue="six-theme-switcher" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
   </profile>
 </component>
\ No newline at end of file
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index c1cc08f24..87b584146 100644
--- a/docs/.vitepress/config.mts
+++ b/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',
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index b1b5a4d11..355413e09 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@@ -4,6 +4,8 @@ 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 });
@@ -11,6 +13,23 @@ 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;
diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css
index 4647e23f6..b8f4cf14e 100644
--- a/docs/.vitepress/theme/style.css
+++ b/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);
 }
 
 /*
diff --git a/docs/changelog.md b/docs/changelog.md
index 5e0347bb3..a25a7dd45 100644
--- a/docs/changelog.md
+++ b/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).
diff --git a/docs/components/six-icon-button.md b/docs/components/six-icon-button.md
index 5be57d61b..bbd419dae 100644
--- a/docs/components/six-icon-button.md
+++ b/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
 ```
diff --git a/docs/components/six-theme-switcher.md b/docs/components/six-theme-switcher.md
new file mode 100644
index 000000000..a11f94c02
--- /dev/null
+++ b/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
diff --git a/docs/examples/docs-demo-six-root-0.vue b/docs/examples/docs-demo-six-root-0.vue
index 472a683c0..010ddbbd4 100644
--- a/docs/examples/docs-demo-six-root-0.vue
+++ b/docs/examples/docs-demo-six-root-0.vue
@@ -2,7 +2,7 @@
 <div>
 
         <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>
@@ -22,6 +22,11 @@
               </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"
@@ -90,7 +95,19 @@
             </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>
@@ -234,6 +251,7 @@ export default {
               );
 
             const Select = getElements({
+              root: '#app-root',
               header: 'six-header',
               leftSidebar: 'six-sidebar[slot="left-sidebar"]',
               tasksButton: '#show-tasks',
diff --git a/docs/examples/docs-demo-six-theme-switcher-0.vue b/docs/examples/docs-demo-six-theme-switcher-0.vue
new file mode 100644
index 000000000..16ac93dc8
--- /dev/null
+++ b/docs/examples/docs-demo-six-theme-switcher-0.vue
@@ -0,0 +1,18 @@
+<template>
+<div>
+
+        <div style="background: grey">
+          <six-theme-switcher></six-theme-switcher>
+        </div>
+      
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-theme-switcher-0',
+  mounted() {  }
+}
+</script>
\ No newline at end of file
diff --git a/docs/examples/docs-demo-six-theme-switcher-1.vue b/docs/examples/docs-demo-six-theme-switcher-1.vue
new file mode 100644
index 000000000..1dfa4204b
--- /dev/null
+++ b/docs/examples/docs-demo-six-theme-switcher-1.vue
@@ -0,0 +1,22 @@
+<template>
+<div>
+
+        <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>
+      
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-theme-switcher-1',
+  mounted() {  }
+}
+</script>
\ No newline at end of file
diff --git a/docs/examples/docs-demo-six-theme-switcher-2.vue b/docs/examples/docs-demo-six-theme-switcher-2.vue
new file mode 100644
index 000000000..fc9b34f9f
--- /dev/null
+++ b/docs/examples/docs-demo-six-theme-switcher-2.vue
@@ -0,0 +1,18 @@
+<template>
+<div>
+
+        <div style="background: grey">
+          <six-theme-switcher disabled></six-theme-switcher>
+        </div>
+      
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-theme-switcher-2',
+  mounted() {  }
+}
+</script>
\ No newline at end of file
diff --git a/docs/examples/docs-demo-six-theme-switcher-3.vue b/docs/examples/docs-demo-six-theme-switcher-3.vue
new file mode 100644
index 000000000..e99f65d02
--- /dev/null
+++ b/docs/examples/docs-demo-six-theme-switcher-3.vue
@@ -0,0 +1,18 @@
+<template>
+<div>
+
+        <div style="background: grey">
+          <six-theme-switcher label="Switch between light and dark mode"></six-theme-switcher>
+        </div>
+      
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-theme-switcher-3',
+  mounted() {  }
+}
+</script>
\ No newline at end of file
diff --git a/docs/examples/docs-demo-six-theme-switcher-4.vue b/docs/examples/docs-demo-six-theme-switcher-4.vue
new file mode 100644
index 000000000..d7ac583b9
--- /dev/null
+++ b/docs/examples/docs-demo-six-theme-switcher-4.vue
@@ -0,0 +1,20 @@
+<template>
+<div>
+
+        <div style="background: grey">
+          <six-tooltip content="Toggle theme">
+            <six-theme-switcher></six-theme-switcher>
+          </six-tooltip>
+        </div>
+      
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-theme-switcher-4',
+  mounted() {  }
+}
+</script>
\ No newline at end of file
diff --git a/docs/examples/docs-demo-six-theme-switcher-5.vue b/docs/examples/docs-demo-six-theme-switcher-5.vue
new file mode 100644
index 000000000..c9233f980
--- /dev/null
+++ b/docs/examples/docs-demo-six-theme-switcher-5.vue
@@ -0,0 +1,36 @@
+<template>
+<div>
+
+        <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>
+      
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-theme-switcher-5',
+  mounted() {  }
+}
+</script>
\ No newline at end of file
diff --git a/docs/guide/styling/colors.md b/docs/guide/styling/colors.md
index 8ce901596..8637e2a17 100644
--- a/docs/guide/styling/colors.md
+++ b/docs/guide/styling/colors.md
@@ -101,11 +101,51 @@ status colors, and neutral tones.
     </span>
   </div>
   <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;">
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #5f574f; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">900</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#5f574f</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #6f665d; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">800</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#6f665d</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #7e756c; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">700</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#7e756c</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #8e847b; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">600</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#8e847b</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #9e9389; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">500</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#9e9389</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #aea297; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">400</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#aea297</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #beb1a6; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">300</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#beb1a6</div>
+    </div>
     <div style="text-align: center;">
       <div style="width: 44px; height: 44px; background-color: #ada398; border-radius: 4px;"></div>
       <div style="font-size: 12px; margin-top: 4px;">200</div>
       <div style="font-size: 10px; color: #7b7b7b;">#ada398</div>
     </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #d6d1cd; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">100</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#d6d1cd</div>
+    </div>
     <div style="text-align: center;">
       <div style="width: 44px; height: 44px; background-color: #ebe8e7; border-radius: 4px;"></div>
       <div style="font-size: 12px; margin-top: 4px;">50</div>
@@ -125,6 +165,21 @@ status colors, and neutral tones.
     </span>
   </div>
   <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;">
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #1045a1; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">900</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#1045a1</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #1764c0; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">800</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#1764c0</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #1a75d2; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">700</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#1a75d2</div>
+    </div>
     <div style="text-align: center;">
       <div style="width: 44px; height: 44px; background-color: #1f87e5; border-radius: 4px;"></div>
       <div style="font-size: 12px; margin-top: 4px;">600</div>
@@ -136,9 +191,29 @@ status colors, and neutral tones.
       <div style="font-size: 10px; color: #7b7b7b;">#2196f3</div>
     </div>
     <div style="text-align: center;">
-      <div style="width: 44px; height: 44px; background-color: #a8d0f5; border-radius: 4px;"></div>
-      <div style="font-size: 12px; margin-top: 4px;">Light</div>
-      <div style="font-size: 10px; color: #7b7b7b;">#a8d0f5</div>
+      <div style="width: 44px; height: 44px; background-color: #42a4f5; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">400</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#42a4f5</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #63b4f6; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">300</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#63b4f6</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #90c9f9; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">200</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#90c9f9</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #bbdefb; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">100</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#bbdefb</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #e3f2fd; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">50</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#e3f2fd</div>
     </div>
   </div>
 </div>
@@ -165,9 +240,44 @@ status colors, and neutral tones.
       <div style="font-size: 10px; color: #7b7b7b;">#de3919</div>
     </div>
     <div style="text-align: center;">
-      <div style="width: 44px; height: 44px; background-color: #f58c78; border-radius: 4px;"></div>
-      <div style="font-size: 12px; margin-top: 4px;">Light</div>
-      <div style="font-size: 10px; color: #7b7b7b;">#f58c78</div>
+      <div style="width: 44px; height: 44px; background-color: #ec411d; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">700</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#ec411d</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #fa4823; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">600</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#fa4823</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #ff4e27; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">500</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#ff4e27</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #ff6b46; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">400</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#ff6b46</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #ff8767; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">300</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#ff8767</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #ffa992; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">200</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#ffa992</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #ffcbbd; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">100</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#ffcbbd</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #fce9e7; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">50</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#fce9e7</div>
     </div>
   </div>
 </div>
@@ -183,6 +293,11 @@ status colors, and neutral tones.
     </span>
   </div>
   <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;">
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #ea7719; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">900</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#ea7719</div>
+    </div>
     <div style="text-align: center;">
       <div style="width: 44px; height: 44px; background-color: #ef9f25; border-radius: 4px;"></div>
       <div style="font-size: 12px; margin-top: 4px;">800</div>
@@ -194,9 +309,39 @@ status colors, and neutral tones.
       <div style="font-size: 10px; color: #7b7b7b;">#f2b72c</div>
     </div>
     <div style="text-align: center;">
-      <div style="width: 44px; height: 44px; background-color: #f9deb4; border-radius: 4px;"></div>
-      <div style="font-size: 12px; margin-top: 4px;">Light</div>
-      <div style="font-size: 10px; color: #7b7b7b;">#f9deb4</div>
+      <div style="width: 44px; height: 44px; background-color: #f5ce33; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">600</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#f5ce33</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #f5df36; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">500</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#f5df36</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #f7e454; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">400</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#f7e454</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #f9e973; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">300</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#f9e973</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #fbef9a; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">200</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#fbef9a</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #fdf5c2; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">100</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#fdf5c2</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #fefce6; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">50</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#fefce6</div>
     </div>
   </div>
 </div>
@@ -212,6 +357,21 @@ status colors, and neutral tones.
     </span>
   </div>
   <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;">
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #008600; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">900</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#008600</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #09a800; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">800</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#09a800</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #3abd00; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">700</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#3abd00</div>
+    </div>
     <div style="text-align: center;">
       <div style="width: 44px; height: 44px; background-color: #58d200; border-radius: 4px;"></div>
       <div style="font-size: 12px; margin-top: 4px;">600</div>
@@ -223,9 +383,221 @@ status colors, and neutral tones.
       <div style="font-size: 10px; color: #7b7b7b;">#6ae300</div>
     </div>
     <div style="text-align: center;">
-      <div style="width: 44px; height: 44px; background-color: #aaff6c; border-radius: 4px;"></div>
-      <div style="font-size: 12px; margin-top: 4px;">Light</div>
-      <div style="font-size: 10px; color: #7b7b7b;">#aaff6c</div>
+      <div style="width: 44px; height: 44px; background-color: #85e845; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">400</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#85e845</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #a0ee6e; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">300</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#a0ee6e</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #bef39b; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">200</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#bef39b</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #d9f8c3; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">100</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#d9f8c3</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #f0fde7; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">50</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#f0fde7</div>
+    </div>
+  </div>
+</div>
+<div style="display: flex; flex-direction: row">
+  <div style="display: flex; gap: 8px; flex-direction: column">
+    <div style="width: 175px; height: 40px; display: flex; align-items: center">
+      <span style="font-weight: 500;">
+        Marine
+      </span>
+    </div>
+    <span style="font-size: 12px">
+        <code>--six-color-marine-{n}</code>
+    </span>
+  </div>
+  <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;">
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #002c5f; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">900</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#002c5f</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #19416f; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">800</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#19416f</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #33567e; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">700</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#33567e</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #4c6b8f; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">600</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#4c6b8f</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #66809f; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">500</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#66809f</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #7f95af; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">400</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#7f95af</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #99aabe; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">300</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#99aabe</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #b2bfcf; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">200</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#b2bfcf</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #ccd4df; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">100</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#ccd4df</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #e5e9ef; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">50</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#e5e9ef</div>
+    </div>
+  </div>
+</div>
+<div style="display: flex; flex-direction: row">
+  <div style="display: flex; gap: 8px; flex-direction: column">
+    <div style="width: 175px; height: 40px; display: flex; align-items: center">
+      <span style="font-weight: 500;">
+        Horizon
+      </span>
+    </div>
+    <span style="font-size: 12px">
+        <code>--six-color-horizon-{n}</code>
+    </span>
+  </div>
+  <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;">
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #88c1e4; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">900</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#88c1e4</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #94c7e7; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">800</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#94c7e7</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #9fcde9; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">700</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#9fcde9</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #abd3ec; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">600</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#abd3ec</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #b7d9ee; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">500</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#b7d9ee</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #c3e0f1; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">400</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#c3e0f1</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #cfe6f4; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">300</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#cfe6f4</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #dbecf7; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">200</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#dbecf7</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #e7f2f9; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">100</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#e7f2f9</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #f3f9fc; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">50</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#f3f9fc</div>
+    </div>
+  </div>
+</div>
+<div style="display: flex; flex-direction: row">
+  <div style="display: flex; gap: 8px; flex-direction: column">
+    <div style="width: 175px; height: 40px; display: flex; align-items: center">
+      <span style="font-weight: 500;">
+        Indigo
+      </span>
+    </div>
+    <span style="font-size: 12px">
+        <code>--six-color-indigo-{n}</code>
+    </span>
+  </div>
+  <div style="display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px;">
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #5c1bb8; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">900</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#5c1bb8</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #6c32bf; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">800</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#6c32bf</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #7d49c6; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">700</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#7d49c6</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #8d5fcd; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">600</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#8d5fcd</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #9d76d4; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">500</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#9d76d4</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #ae8ddc; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">400</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#ae8ddc</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #bea4e3; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">300</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#bea4e3</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #cebbea; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">200</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#cebbea</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #ded1f1; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">100</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#ded1f1</div>
+    </div>
+    <div style="text-align: center;">
+      <div style="width: 44px; height: 44px; background-color: #efe8f8; border-radius: 4px;"></div>
+      <div style="font-size: 12px; margin-top: 4px;">50</div>
+      <div style="font-size: 10px; color: #7b7b7b;">#efe8f8</div>
     </div>
   </div>
 </div>
diff --git a/examples/angular/src/app/header/header.html b/examples/angular/src/app/header/header.html
index e03940c8e..d914152b2 100644
--- a/examples/angular/src/app/header/header.html
+++ b/examples/angular/src/app/header/header.html
@@ -29,6 +29,10 @@
     </six-icon-button>
   </six-header-item>
 
+  <six-header-item>
+    <six-theme-switcher label="Toggle Theme"></six-theme-switcher>
+  </six-header-item>
+
   <!-- App Switcher -->
   <six-header-dropdown-item>
     <six-header-menu-button slot="trigger">
diff --git a/examples/react/src/components/header/header.tsx b/examples/react/src/components/header/header.tsx
index e1277d245..991e6be3f 100644
--- a/examples/react/src/components/header/header.tsx
+++ b/examples/react/src/components/header/header.tsx
@@ -12,6 +12,7 @@ import {
   SixMenu,
   SixMenuItem,
   SixSearchField,
+  SixThemeSwitcher,
 } from '@six-group/ui-library-react';
 import styles from './header.module.css';
 import { SixLanguageSwitcherCustomEvent } from '@six-group/ui-library';
@@ -69,6 +70,10 @@ export function Header({ leftSidebar, toggleRightSidebar }: HeaderProps) {
         </SixIconButton>
       </SixHeaderItem>
 
+      <SixHeaderItem>
+        <SixThemeSwitcher label="Toggle Theme"></SixThemeSwitcher>
+      </SixHeaderItem>
+
       <SixHeaderDropdownItem>
         <SixHeaderMenuButton slot="trigger">
           <span>{currentApp}</span>
diff --git a/examples/react/src/components/rightSidebar/rightSidebar.module.css b/examples/react/src/components/rightSidebar/rightSidebar.module.css
index cd5868256..9b8b73088 100644
--- a/examples/react/src/components/rightSidebar/rightSidebar.module.css
+++ b/examples/react/src/components/rightSidebar/rightSidebar.module.css
@@ -1,8 +1,3 @@
-.right-sidebar {
-  background: var(--six-color-web-rock-100);
-}
-
 .task-card {
   width: 100%;
-  background-color: var(--six-color-white);
 }
diff --git a/examples/react/src/routes/form/form.module.css b/examples/react/src/routes/form/form.module.css
index f4b4dcccb..011d507ce 100644
--- a/examples/react/src/routes/form/form.module.css
+++ b/examples/react/src/routes/form/form.module.css
@@ -1,5 +1,4 @@
 .pre {
-  background-color: var(--six-color-web-rock-100);
   padding: var(--six-spacing-medium);
 }
 
diff --git a/examples/react/src/routes/tabGroup/tabGroup.module.css b/examples/react/src/routes/tabGroup/tabGroup.module.css
index 898d1015d..e69de29bb 100644
--- a/examples/react/src/routes/tabGroup/tabGroup.module.css
+++ b/examples/react/src/routes/tabGroup/tabGroup.module.css
@@ -1,3 +0,0 @@
-.tab-panel {
-  background-color: var(--six-color-web-rock-100);
-}
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
index aea3efee0..61eeef7fc 100644
--- a/examples/vue/src/App.vue
+++ b/examples/vue/src/App.vue
@@ -46,6 +46,10 @@ const searchActive = ref(false);
         <six-icon-button name="search" @click="searchActive = !searchActive" />
       </six-header-item>
 
+      <six-header-item>
+        <six-theme-switcher label="Toggle Theme" />
+      </six-header-item>
+
       <!-- search input -->
       <six-search-field slot="search-field" :debounce="600" clearable />
 
diff --git a/libraries/ui-library-angular/src/lib/stencil-generated/components.ts b/libraries/ui-library-angular/src/lib/stencil-generated/components.ts
index 0c6f861a5..4f8af9d65 100644
--- a/libraries/ui-library-angular/src/lib/stencil-generated/components.ts
+++ b/libraries/ui-library-angular/src/lib/stencil-generated/components.ts
@@ -1424,14 +1424,15 @@ export declare interface SixRating extends Components.SixRating {
 
 
 @ProxyCmp({
-  inputs: ['padded', 'stage', 'version']
+  inputs: ['padded', 'stage', 'theme', 'version'],
+  methods: ['setTheme', 'getTheme', 'toggleTheme']
 })
 @Component({
   selector: 'six-root',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['padded', 'stage', 'version'],
+  inputs: ['padded', 'stage', 'theme', 'version'],
   standalone: false
 })
 export class SixRoot {
@@ -1886,6 +1887,38 @@ export declare interface SixTextarea extends Components.SixTextarea {
 }
 
 
+@ProxyCmp({
+  inputs: ['disabled', 'label', 'size']
+})
+@Component({
+  selector: 'six-theme-switcher',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['disabled', 'label', 'size'],
+  outputs: ['sixThemeSwitcherChange:six-theme-switcher-change'],
+  standalone: false
+})
+export class SixThemeSwitcher {
+  protected el: HTMLSixThemeSwitcherElement;
+  @Output() sixThemeSwitcherChange = new EventEmitter<CustomEvent<ISixThemeSwitcherEmptyPayload>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+import type { EmptyPayload as ISixThemeSwitcherEmptyPayload } from '@six-group/ui-library';
+
+export declare interface SixThemeSwitcher extends Components.SixThemeSwitcher {
+  /**
+   * Emitted when the theme is changed.
+   */
+  'six-theme-switcher-change': EventEmitter<CustomEvent<ISixThemeSwitcherEmptyPayload>>;
+}
+
+
 @ProxyCmp({
   inputs: ['closeable', 'disableTooltip', 'disabled', 'elevated', 'iconName', 'label', 'library', 'size'],
   methods: ['hide', 'show']
diff --git a/libraries/ui-library-angular/src/lib/stencil-generated/index.ts b/libraries/ui-library-angular/src/lib/stencil-generated/index.ts
index 49f8ee234..8fc3f26fa 100644
--- a/libraries/ui-library-angular/src/lib/stencil-generated/index.ts
+++ b/libraries/ui-library-angular/src/lib/stencil-generated/index.ts
@@ -60,6 +60,7 @@ export const DIRECTIVES = [
   d.SixTabPanel,
   d.SixTag,
   d.SixTextarea,
+  d.SixThemeSwitcher,
   d.SixTile,
   d.SixTimepicker,
   d.SixTooltip
diff --git a/libraries/ui-library-react/src/lib/stencil-generated/components.ts b/libraries/ui-library-react/src/lib/stencil-generated/components.ts
index f6f4ad032..50cdd829a 100644
--- a/libraries/ui-library-react/src/lib/stencil-generated/components.ts
+++ b/libraries/ui-library-react/src/lib/stencil-generated/components.ts
@@ -7,7 +7,7 @@
 
 /* eslint-disable */
 
-import { type EmptyPayload, type SixAlertCustomEvent, type SixButtonCustomEvent, type SixCheckboxCustomEvent, type SixDateCustomEvent, type SixDatepickerCustomEvent, type SixDatepickerSelectPayload, type SixDetailsCustomEvent, type SixDialogCustomEvent, type SixDialogRequestClose, type SixDrawerCustomEvent, type SixDrawerRequestClose, type SixDropdownAsyncFilterPayload, type SixDropdownAutoFilterPayload, type SixDropdownCustomEvent, type SixDropdownScrollPayload, type SixFileListDownloadPayload, type SixFileListItemCustomEvent, type SixFileListRemovePayload, type SixFileUploadCustomEvent, type SixFileUploadFailurePayload, type SixFileUploadSuccessPayload, type SixInputCustomEvent, type SixItemPickerChangePayload, type SixItemPickerCustomEvent, type SixLanguageSwitcherChangePayload, type SixLanguageSwitcherCustomEvent, type SixMenuCustomEvent, type SixMenuItemSelectedPayload, type SixPaginatorCustomEvent, type SixPaginatorPageChangedPayload, type SixPaginatorResultsPerPageChangedPayload, type SixRadioCustomEvent, type SixRangeCustomEvent, type SixRatingCustomEvent, type SixSearchFieldChangePayload, type SixSearchFieldCustomEvent, type SixSelectChangePayload, type SixSelectCustomEvent, type SixSidebarCustomEvent, type SixSwitchCustomEvent, type SixTabCustomEvent, type SixTabGroupCustomEvent, type SixTabHidePayload, type SixTabShowPayload, type SixTagCustomEvent, type SixTextareaCustomEvent, type SixTileCustomEvent, type SixTimepickerChange, type SixTimepickerCustomEvent, type SixTooltipCustomEvent } from "@six-group/ui-library";
+import { type EmptyPayload, type SixAlertCustomEvent, type SixButtonCustomEvent, type SixCheckboxCustomEvent, type SixDateCustomEvent, type SixDatepickerCustomEvent, type SixDatepickerSelectPayload, type SixDetailsCustomEvent, type SixDialogCustomEvent, type SixDialogRequestClose, type SixDrawerCustomEvent, type SixDrawerRequestClose, type SixDropdownAsyncFilterPayload, type SixDropdownAutoFilterPayload, type SixDropdownCustomEvent, type SixDropdownScrollPayload, type SixFileListDownloadPayload, type SixFileListItemCustomEvent, type SixFileListRemovePayload, type SixFileUploadCustomEvent, type SixFileUploadFailurePayload, type SixFileUploadSuccessPayload, type SixInputCustomEvent, type SixItemPickerChangePayload, type SixItemPickerCustomEvent, type SixLanguageSwitcherChangePayload, type SixLanguageSwitcherCustomEvent, type SixMenuCustomEvent, type SixMenuItemSelectedPayload, type SixPaginatorCustomEvent, type SixPaginatorPageChangedPayload, type SixPaginatorResultsPerPageChangedPayload, type SixRadioCustomEvent, type SixRangeCustomEvent, type SixRatingCustomEvent, type SixSearchFieldChangePayload, type SixSearchFieldCustomEvent, type SixSelectChangePayload, type SixSelectCustomEvent, type SixSidebarCustomEvent, type SixSwitchCustomEvent, type SixTabCustomEvent, type SixTabGroupCustomEvent, type SixTabHidePayload, type SixTabShowPayload, type SixTagCustomEvent, type SixTextareaCustomEvent, type SixThemeSwitcherCustomEvent, type SixTileCustomEvent, type SixTimepickerChange, type SixTimepickerCustomEvent, type SixTooltipCustomEvent } from "@six-group/ui-library";
 import { SixAlert as SixAlertElement, defineCustomElement as defineSixAlert } from "@six-group/ui-library/dist/components/six-alert.js";
 import { SixAvatar as SixAvatarElement, defineCustomElement as defineSixAvatar } from "@six-group/ui-library/dist/components/six-avatar.js";
 import { SixBadge as SixBadgeElement, defineCustomElement as defineSixBadge } from "@six-group/ui-library/dist/components/six-badge.js";
@@ -66,6 +66,7 @@ import { SixTabPanel as SixTabPanelElement, defineCustomElement as defineSixTabP
 import { SixTab as SixTabElement, defineCustomElement as defineSixTab } from "@six-group/ui-library/dist/components/six-tab.js";
 import { SixTag as SixTagElement, defineCustomElement as defineSixTag } from "@six-group/ui-library/dist/components/six-tag.js";
 import { SixTextarea as SixTextareaElement, defineCustomElement as defineSixTextarea } from "@six-group/ui-library/dist/components/six-textarea.js";
+import { SixThemeSwitcher as SixThemeSwitcherElement, defineCustomElement as defineSixThemeSwitcher } from "@six-group/ui-library/dist/components/six-theme-switcher.js";
 import { SixTile as SixTileElement, defineCustomElement as defineSixTile } from "@six-group/ui-library/dist/components/six-tile.js";
 import { SixTimepicker as SixTimepickerElement, defineCustomElement as defineSixTimepicker } from "@six-group/ui-library/dist/components/six-timepicker.js";
 import { SixTooltip as SixTooltipElement, defineCustomElement as defineSixTooltip } from "@six-group/ui-library/dist/components/six-tooltip.js";
@@ -907,6 +908,17 @@ export const SixTextarea: StencilReactComponent<SixTextareaElement, SixTextareaE
     defineCustomElement: defineSixTextarea
 });
 
+export type SixThemeSwitcherEvents = { onSixThemeSwitcherChange: EventName<SixThemeSwitcherCustomEvent<EmptyPayload>> };
+
+export const SixThemeSwitcher: StencilReactComponent<SixThemeSwitcherElement, SixThemeSwitcherEvents> = /*@__PURE__*/ createComponent<SixThemeSwitcherElement, SixThemeSwitcherEvents>({
+    tagName: 'six-theme-switcher',
+    elementClass: SixThemeSwitcherElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onSixThemeSwitcherChange: 'six-theme-switcher-change' } as SixThemeSwitcherEvents,
+    defineCustomElement: defineSixThemeSwitcher
+});
+
 export type SixTileEvents = {
     onSixTileClosed: EventName<SixTileCustomEvent<EmptyPayload>>,
     onSixTileSelected: EventName<SixTileCustomEvent<EmptyPayload>>
diff --git a/libraries/ui-library-vue/src/lib/stencil-generated/components.ts b/libraries/ui-library-vue/src/lib/stencil-generated/components.ts
index c302d975e..b163e6877 100644
--- a/libraries/ui-library-vue/src/lib/stencil-generated/components.ts
+++ b/libraries/ui-library-vue/src/lib/stencil-generated/components.ts
@@ -599,7 +599,8 @@ export const SixRating: StencilVueComponent<JSX.SixRating> = /*@__PURE__*/ defin
 export const SixRoot: StencilVueComponent<JSX.SixRoot> = /*@__PURE__*/ defineContainer<JSX.SixRoot>('six-root', undefined, [
   'padded',
   'stage',
-  'version'
+  'version',
+  'theme'
 ]);
 
 
@@ -799,6 +800,16 @@ export const SixTextarea: StencilVueComponent<JSX.SixTextarea, JSX.SixTextarea["
 'value', 'input', undefined);
 
 
+export const SixThemeSwitcher: StencilVueComponent<JSX.SixThemeSwitcher> = /*@__PURE__*/ defineContainer<JSX.SixThemeSwitcher>('six-theme-switcher', undefined, [
+  'size',
+  'disabled',
+  'label',
+  'six-theme-switcher-change'
+], [
+  'six-theme-switcher-change'
+]);
+
+
 export const SixTile: StencilVueComponent<JSX.SixTile> = /*@__PURE__*/ defineContainer<JSX.SixTile>('six-tile', undefined, [
   'label',
   'iconName',
diff --git a/libraries/ui-library/src/components.d.ts b/libraries/ui-library/src/components.d.ts
index 99cac41a5..bccb9710d 100644
--- a/libraries/ui-library/src/components.d.ts
+++ b/libraries/ui-library/src/components.d.ts
@@ -24,6 +24,7 @@ import { SixLanguageSwitcherChangePayload, SixLanguageSwitcherInput } from "./co
 import { SixMenuItemData as SixMenuItemData1, SixMenuItemSelectedPayload } from "./components/six-menu/six-menu";
 import { SixPaginatorPageChangedPayload, SixPaginatorResultsPerPageChangedPayload } from "./components/six-paginator/six-paginator";
 import { StageType } from "./components/six-stage-indicator/six-stage-indicator";
+import { SixTheme } from "./components/six-root/six-root";
 import { SixSearchFieldChangePayload } from "./components/six-search-field/six-search-field";
 import { SixSelectChangePayload } from "./components/six-select/six-select";
 import { StageType as StageType1 } from "./components/six-stage-indicator/six-stage-indicator";
@@ -49,6 +50,7 @@ export { SixLanguageSwitcherChangePayload, SixLanguageSwitcherInput } from "./co
 export { SixMenuItemData as SixMenuItemData1, SixMenuItemSelectedPayload } from "./components/six-menu/six-menu";
 export { SixPaginatorPageChangedPayload, SixPaginatorResultsPerPageChangedPayload } from "./components/six-paginator/six-paginator";
 export { StageType } from "./components/six-stage-indicator/six-stage-indicator";
+export { SixTheme } from "./components/six-root/six-root";
 export { SixSearchFieldChangePayload } from "./components/six-search-field/six-search-field";
 export { SixSelectChangePayload } from "./components/six-select/six-select";
 export { StageType as StageType1 } from "./components/six-stage-indicator/six-stage-indicator";
@@ -1790,16 +1792,33 @@ export namespace Components {
      * @status stable
      */
     interface SixRoot {
+        /**
+          * Gets the current theme and applied theme.
+         */
+        "getTheme": () => Promise<{ theme: SixTheme; appliedTheme: "light" | "dark"; }>;
         /**
           * Defines whether the content section should be padded
           * @default true
          */
         "padded": boolean;
+        /**
+          * Sets the theme.
+         */
+        "setTheme": (theme: SixTheme) => Promise<void>;
         /**
           * Defines the stage of the application
           * @default null
          */
         "stage": StageType;
+        /**
+          * Defines the theme
+          * @default 'light'
+         */
+        "theme": SixTheme;
+        /**
+          * Toggles between light and dark theme.
+         */
+        "toggleTheme": () => Promise<void>;
         /**
           * Defines the version of the application
           * @default ''
@@ -2400,6 +2419,27 @@ export namespace Components {
          */
         "value": string;
     }
+    /**
+     * @since 5.0
+     * @status stable
+     */
+    interface SixThemeSwitcher {
+        /**
+          * Set to true to disable the theme switcher.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * A description that gets read by screen readers.
+          * @default 'Toggle theme'
+         */
+        "label": string;
+        /**
+          * The icon button's size.
+          * @default 'medium'
+         */
+        "size": 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
+    }
     /**
      * @since 1.0
      * @status stable
@@ -2743,6 +2783,10 @@ export interface SixTextareaCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSixTextareaElement;
 }
+export interface SixThemeSwitcherCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLSixThemeSwitcherElement;
+}
 export interface SixTileCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLSixTileElement;
@@ -3697,6 +3741,27 @@ declare global {
         prototype: HTMLSixTextareaElement;
         new (): HTMLSixTextareaElement;
     };
+    interface HTMLSixThemeSwitcherElementEventMap {
+        "six-theme-switcher-change": EmptyPayload;
+    }
+    /**
+     * @since 5.0
+     * @status stable
+     */
+    interface HTMLSixThemeSwitcherElement extends Components.SixThemeSwitcher, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLSixThemeSwitcherElementEventMap>(type: K, listener: (this: HTMLSixThemeSwitcherElement, ev: SixThemeSwitcherCustomEvent<HTMLSixThemeSwitcherElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLSixThemeSwitcherElementEventMap>(type: K, listener: (this: HTMLSixThemeSwitcherElement, ev: SixThemeSwitcherCustomEvent<HTMLSixThemeSwitcherElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLSixThemeSwitcherElement: {
+        prototype: HTMLSixThemeSwitcherElement;
+        new (): HTMLSixThemeSwitcherElement;
+    };
     interface HTMLSixTileElementEventMap {
         "six-tile-closed": EmptyPayload;
         "six-tile-selected": EmptyPayload;
@@ -3826,6 +3891,7 @@ declare global {
         "six-tab-panel": HTMLSixTabPanelElement;
         "six-tag": HTMLSixTagElement;
         "six-textarea": HTMLSixTextareaElement;
+        "six-theme-switcher": HTMLSixThemeSwitcherElement;
         "six-tile": HTMLSixTileElement;
         "six-timepicker": HTMLSixTimepickerElement;
         "six-tooltip": HTMLSixTooltipElement;
@@ -5691,6 +5757,11 @@ declare namespace LocalJSX {
           * @default null
          */
         "stage"?: StageType;
+        /**
+          * Defines the theme
+          * @default 'light'
+         */
+        "theme"?: SixTheme;
         /**
           * Defines the version of the application
           * @default ''
@@ -6307,6 +6378,31 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    /**
+     * @since 5.0
+     * @status stable
+     */
+    interface SixThemeSwitcher {
+        /**
+          * Set to true to disable the theme switcher.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * A description that gets read by screen readers.
+          * @default 'Toggle theme'
+         */
+        "label"?: string;
+        /**
+          * Emitted when the theme is changed.
+         */
+        "onSix-theme-switcher-change"?: (event: SixThemeSwitcherCustomEvent<EmptyPayload>) => void;
+        /**
+          * The icon button's size.
+          * @default 'medium'
+         */
+        "size"?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge';
+    }
     /**
      * @since 1.0
      * @status stable
@@ -6616,6 +6712,7 @@ declare namespace LocalJSX {
         "six-tab-panel": SixTabPanel;
         "six-tag": SixTag;
         "six-textarea": SixTextarea;
+        "six-theme-switcher": SixThemeSwitcher;
         "six-tile": SixTile;
         "six-timepicker": SixTimepicker;
         "six-tooltip": SixTooltip;
@@ -6925,6 +7022,11 @@ declare module "@stencil/core" {
              * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.
              */
             "six-textarea": LocalJSX.SixTextarea & JSXBase.HTMLAttributes<HTMLSixTextareaElement>;
+            /**
+             * @since 5.0
+             * @status stable
+             */
+            "six-theme-switcher": LocalJSX.SixThemeSwitcher & JSXBase.HTMLAttributes<HTMLSixThemeSwitcherElement>;
             /**
              * @since 1.0
              * @status stable
diff --git a/libraries/ui-library/src/components/six-alert/six-alert.scss b/libraries/ui-library/src/components/six-alert/six-alert.scss
index 920f00792..37409b49b 100644
--- a/libraries/ui-library/src/components/six-alert/six-alert.scss
+++ b/libraries/ui-library/src/components/six-alert/six-alert.scss
@@ -15,8 +15,8 @@
   position: relative;
   display: flex;
   align-items: stretch;
-  background-color: var(--six-color-white);
-  border: solid 1px var(--six-color-web-rock-200);
+  background-color: var(--six-alert-background-color);
+  border: solid 1px var(--six-alert-border-color);
   border-top-width: 3px;
   border-radius: var(--six-border-radius-medium);
   box-shadow: var(--box-shadow);
@@ -24,7 +24,7 @@
   font-size: var(--six-font-size-small);
   font-weight: var(--six-font-weight-normal);
   line-height: 1.6;
-  color: var(--six-color-web-rock-700);
+  color: var(--six-alert-color);
   opacity: 0;
   transform: scale(0.9);
   transition:
@@ -58,10 +58,10 @@
 }
 
 .alert--primary {
-  border-top-color: var(--six-color-web-rock-900);
+  border-top-color: var(--six-alert-primary-color);
 
   .alert__icon {
-    color: var(--six-color-web-rock-900);
+    color: var(--six-alert-primary-color);
   }
 }
 
diff --git a/libraries/ui-library/src/components/six-button/six-button.scss b/libraries/ui-library/src/components/six-button/six-button.scss
index a07495eff..4e78df051 100644
--- a/libraries/ui-library/src/components/six-button/six-button.scss
+++ b/libraries/ui-library/src/components/six-button/six-button.scss
@@ -70,47 +70,40 @@
     outline-offset: var(--six-focus-ring-offset);
   }
 
-  &.button--secondary {
-    background-color: var(--six-color-white);
-    border-color: var(--six-color-web-rock-900);
-    color: var(--six-color-web-rock-900);
+  &.button--disabled:not(.button--link) {
+    background-color: var(--six-button-background-color-disabled);
+    border-color: var(--six-button-border-color-disabled);
+    color: var(--six-button-color-disabled);
+  }
 
-    &.button--disabled {
-      background-color: var(--six-color-web-rock-400);
-      border-color: var(--six-color-web-rock-400);
-      color: var(--six-color-web-rock-700);
-    }
+  &.button--secondary {
+    background-color: transparent;
+    border-color: var(--six-button-secondary-border-color);
+    color: var(--six-button-secondary-color);
 
     &:hover:not(.button--disabled) {
-      background-color: var(--six-color-web-rock-100);
+      background-color: var(--six-button-transparent-background-color-hover);
     }
 
     &:active:not(.button--disabled) {
-      background-color: var(--six-color-web-rock-300);
-      border-color: var(--six-color-web-rock-900);
+      opacity: 70%;
       border-width: 1px;
     }
   }
 
   &.button--primary {
-    background-color: var(--six-color-web-rock-900);
-    border-color: var(--six-color-web-rock-900);
-    color: var(--six-color-white);
-
-    &.button--disabled {
-      background-color: var(--six-color-web-rock-400);
-      border-color: var(--six-color-web-rock-400);
-      color: var(--six-color-web-rock-700);
-    }
+    background-color: var(--six-button-primary-background-color);
+    border-color: var(--six-button-primary-background-color);
+    color: var(--six-button-primary-color);
 
     &:hover:not(.button--disabled) {
-      background-color: var(--six-color-web-rock-800);
-      border-color: var(--six-color-web-rock-800);
+      background-color: var(--six-button-primary-background-color-hover);
+      border-color: var(--six-button-primary-background-color-hover);
     }
 
     &:active:not(.button--disabled) {
-      background-color: var(--six-color-web-rock-900);
-      border-color: var(--six-color-web-rock-900);
+      background-color: var(--six-button-primary-background-color-active);
+      border-color: var(--six-button-primary-background-color-active);
       opacity: 70%;
     }
   }
@@ -129,7 +122,7 @@
     }
 
     &:active:not(.button--disabled) {
-      color: var(--six-color-action-light-to-be-defined);
+      color: var(--six-color-action-200);
     }
   }
 
@@ -138,12 +131,6 @@
     border-color: var(--six-color-danger-800);
     color: var(--six-color-white);
 
-    &.button--disabled {
-      background-color: var(--six-color-web-rock-400);
-      border-color: var(--six-color-web-rock-400);
-      color: var(--six-color-web-rock-700);
-    }
-
     &:hover:not(.button--disabled) {
       background-color: var(--six-color-danger-900);
       border-color: var(--six-color-danger-900);
@@ -161,12 +148,6 @@
     border-color: var(--six-color-warning-700);
     color: var(--six-color-web-rock-900);
 
-    &.button--disabled {
-      background-color: var(--six-color-web-rock-400);
-      border-color: var(--six-color-web-rock-400);
-      color: var(--six-color-web-rock-700);
-    }
-
     &:hover:not(.button--disabled) {
       background-color: var(--six-color-warning-800);
       border-color: var(--six-color-warning-800);
@@ -184,12 +165,6 @@
     border-color: var(--six-color-success-500);
     color: var(--six-color-web-rock-900);
 
-    &.button--disabled {
-      background-color: var(--six-color-web-rock-400);
-      border-color: var(--six-color-web-rock-400);
-      color: var(--six-color-web-rock-700);
-    }
-
     &:hover:not(.button--disabled) {
       background-color: var(--six-color-success-600);
       border-color: var(--six-color-success-600);
@@ -207,12 +182,6 @@
     border-color: var(--six-color-action-500);
     color: var(--six-color-white);
 
-    &.button--disabled {
-      background-color: var(--six-color-web-rock-400);
-      border-color: var(--six-color-web-rock-400);
-      color: var(--six-color-web-rock-700);
-    }
-
     &:hover:not(.button--disabled) {
       background-color: var(--six-color-action-600);
       border-color: var(--six-color-action-600);
@@ -227,17 +196,11 @@
 
   &.button--action-outline {
     border-color: var(--six-color-action-500);
-    background-color: var(--six-color-white);
+    background-color: transparent;
     color: var(--six-color-action-500);
 
-    &.button--disabled {
-      background-color: var(--six-color-web-rock-400);
-      border-color: var(--six-color-web-rock-400);
-      color: var(--six-color-web-rock-700);
-    }
-
     &:hover:not(.button--disabled) {
-      background-color: var(--six-color-web-rock-100);
+      background-color: var(--six-button-transparent-background-color-hover);
     }
 
     &:active:not(.button--disabled) {
diff --git a/libraries/ui-library/src/components/six-card/six-card.scss b/libraries/ui-library/src/components/six-card/six-card.scss
index bdc910d1a..feda0e646 100644
--- a/libraries/ui-library/src/components/six-card/six-card.scss
+++ b/libraries/ui-library/src/components/six-card/six-card.scss
@@ -3,6 +3,6 @@
 :host {
   display: inline-block;
   box-shadow: var(--six-shadow-medium);
-  border: 1px solid var(--six-color-web-rock-100);
+  border: 1px solid var(--six-card-border-color);
   padding: var(--six-spacing-medium);
 }
diff --git a/libraries/ui-library/src/components/six-date/six-date.scss b/libraries/ui-library/src/components/six-date/six-date.scss
index 603c2ee06..b2c3d60c6 100644
--- a/libraries/ui-library/src/components/six-date/six-date.scss
+++ b/libraries/ui-library/src/components/six-date/six-date.scss
@@ -23,9 +23,9 @@
   pointer-events: none;
   padding: var(--six-spacing-small);
   padding-bottom: var(--six-spacing-x-large);
-  border: 1px solid var(--six-color-web-rock-300);
+  border: 1px solid var(--six-date-panel-border-color);
   box-shadow: var(--six-shadow-small);
-  background-color: var(--six-color-white);
+  background-color: var(--six-date-panel-background-color);
 
   // animation
   opacity: 0;
@@ -68,7 +68,7 @@ header {
     padding: var(--six-spacing-x-small);
 
     &:hover {
-      background-color: var(--six-color-web-rock-100);
+      background-color: var(--six-date-selector-background-color-hover);
     }
   }
 }
@@ -82,7 +82,7 @@ header {
   padding: var(--six-spacing-x-small);
 
   &:hover {
-    background-color: var(--six-color-web-rock-200);
+    background-color: var(--six-date-cell-background-color-hover);
   }
 }
 
@@ -94,7 +94,7 @@ header {
 
 .cell--today .label {
   padding: var(--six-spacing-xxx-small);
-  border-bottom: 2px solid var(--six-color-web-rock-900);
+  border-bottom: 2px solid var(--six-date-cell-today-border-color);
 }
 
 .cell--selected.cell--today .label {
@@ -128,7 +128,7 @@ header {
 }
 
 .cell--outdated {
-  color: var(--six-color-web-rock-400);
+  color: var(--six-date-cell-outdated-color);
 }
 
 .cell--today.cell--disabled .label {
diff --git a/libraries/ui-library/src/components/six-details/six-details.scss b/libraries/ui-library/src/components/six-details/six-details.scss
index 898b40a25..613e725ac 100644
--- a/libraries/ui-library/src/components/six-details/six-details.scss
+++ b/libraries/ui-library/src/components/six-details/six-details.scss
@@ -38,7 +38,7 @@
     }
 
     &.details--open {
-      background-color: var(--six-color-web-rock-50);
+      background-color: var(--six-details-body-background-color);
 
       &:hover {
         border: none;
diff --git a/libraries/ui-library/src/components/six-dialog/six-dialog.scss b/libraries/ui-library/src/components/six-dialog/six-dialog.scss
index 951e7d104..c9f174651 100644
--- a/libraries/ui-library/src/components/six-dialog/six-dialog.scss
+++ b/libraries/ui-library/src/components/six-dialog/six-dialog.scss
@@ -20,7 +20,7 @@
   bottom: 0;
   left: 0;
   z-index: var(--six-z-index-dialog);
-  color: var(--six-color-web-rock-900);
+  color: var(--six-dialog-color);
 
   &:not(.dialog--visible) {
     @include hidden;
diff --git a/libraries/ui-library/src/components/six-dropdown/six-dropdown.scss b/libraries/ui-library/src/components/six-dropdown/six-dropdown.scss
index ff4317c00..421345f95 100644
--- a/libraries/ui-library/src/components/six-dropdown/six-dropdown.scss
+++ b/libraries/ui-library/src/components/six-dropdown/six-dropdown.scss
@@ -27,9 +27,9 @@
   font-size: var(--six-font-size-small);
   font-weight: var(--six-font-weight-normal);
   color: var(--color);
-  background-color: var(--six-panel-background-color);
+  background-color: var(--six-dropdown-background-color);
   border-radius: var(--six-border-radius-medium);
-  border: 1px solid var(--six-color-web-rock-300);
+  border: 1px solid var(--six-dropdown-border-color);
   box-shadow: var(--six-shadow-small);
   opacity: 0;
   pointer-events: none;
diff --git a/libraries/ui-library/src/components/six-file-list-item/six-file-list-item.scss b/libraries/ui-library/src/components/six-file-list-item/six-file-list-item.scss
index b0e2a0b49..74fd452dd 100644
--- a/libraries/ui-library/src/components/six-file-list-item/six-file-list-item.scss
+++ b/libraries/ui-library/src/components/six-file-list-item/six-file-list-item.scss
@@ -38,7 +38,7 @@
     }
 
     &:hover:not(&--disabled) {
-      color: var(--six-color-web-rock-900);
+      color: var(--six-file-list-item-icon-color-hover);
     }
   }
 }
diff --git a/libraries/ui-library/src/components/six-file-upload/six-file-upload.scss b/libraries/ui-library/src/components/six-file-upload/six-file-upload.scss
index 8d211857e..5254079ff 100644
--- a/libraries/ui-library/src/components/six-file-upload/six-file-upload.scss
+++ b/libraries/ui-library/src/components/six-file-upload/six-file-upload.scss
@@ -1,6 +1,5 @@
 @use 'src/global/component';
 
-$over-color: var(--six-color-action-light-to-be-defined);
 $disabled-color: var(--six-color-inactive);
 $transition: 0.3s;
 $margin: 1rem;
@@ -69,7 +68,7 @@ $margin: 1rem;
 
   &:not(.six-file-upload--disabled) &__drop-zone:hover,
   &__drop-zone--hover {
-    background-color: $over-color;
+    background-color: var(--six-file-upload-drop-zone-hover-background-color);
 
     &.six-file-upload__drop-zone--compact {
       background-color: inherit;
diff --git a/libraries/ui-library/src/components/six-footer/six-footer.scss b/libraries/ui-library/src/components/six-footer/six-footer.scss
index 15b903a8f..50dd0ca20 100644
--- a/libraries/ui-library/src/components/six-footer/six-footer.scss
+++ b/libraries/ui-library/src/components/six-footer/six-footer.scss
@@ -5,7 +5,7 @@
 }
 
 .six-footer {
-  color: var(--six-color-web-rock-900);
+  color: var(--six-footer-color);
   padding: var(--six-spacing-x-small) 0;
   text-align: center;
   width: 100%;
diff --git a/libraries/ui-library/src/components/six-icon-button/readme.md b/libraries/ui-library/src/components/six-icon-button/readme.md
index 66a7deeab..b51aba629 100644
--- a/libraries/ui-library/src/components/six-icon-button/readme.md
+++ b/libraries/ui-library/src/components/six-icon-button/readme.md
@@ -42,6 +42,7 @@ Icons buttons are simple, icon-only buttons that can be used for actions and in
  - [six-tab](../six-tab)
  - [six-tab-group](../six-tab-group)
  - [six-tag](../six-tag)
+ - [six-theme-switcher](../six-theme-switcher)
  - [six-tile](../six-tile)
 
 ### Depends on
@@ -61,6 +62,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
 ```
diff --git a/libraries/ui-library/src/components/six-item-picker/six-item-picker.scss b/libraries/ui-library/src/components/six-item-picker/six-item-picker.scss
index bfc941dbd..571c4f544 100644
--- a/libraries/ui-library/src/components/six-item-picker/six-item-picker.scss
+++ b/libraries/ui-library/src/components/six-item-picker/six-item-picker.scss
@@ -30,7 +30,7 @@
     color: var(--six-color-web-rock-500);
 
     &:hover {
-      background-color: var(--six-color-web-rock-100);
+      background-color: var(--six-item-picker-background-color-hover);
       border-radius: 100%;
     }
 
@@ -39,7 +39,7 @@
     }
 
     &--disabled {
-      color: var(--six-color-web-rock-300);
+      color: var(--six-item-picker-color-disabled);
       cursor: not-allowed;
 
       &:hover {
@@ -47,7 +47,7 @@
       }
 
       &:active {
-        color: var(--six-color-web-rock-300);
+        color: var(--six-item-picker-color-disabled);
       }
     }
 
diff --git a/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.scss b/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.scss
index 2d133122d..577d276d0 100644
--- a/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.scss
+++ b/libraries/ui-library/src/components/six-language-switcher/six-language-switcher.scss
@@ -11,7 +11,7 @@
     cursor: pointer;
 
     &:hover {
-      color: var(--six-color-web-rock-600);
+      color: var(--six-language-switcher-color-hover);
     }
 
     &:focus-visible {
@@ -20,7 +20,7 @@
     }
 
     &--selected {
-      color: var(--six-color-black);
+      color: var(--six-language-switcher-color-selected);
       text-decoration: underline;
     }
   }
diff --git a/libraries/ui-library/src/components/six-menu-item/six-menu-item.scss b/libraries/ui-library/src/components/six-menu-item/six-menu-item.scss
index e39ee9ae9..63cd589d2 100644
--- a/libraries/ui-library/src/components/six-menu-item/six-menu-item.scss
+++ b/libraries/ui-library/src/components/six-menu-item/six-menu-item.scss
@@ -1,6 +1,6 @@
 @use 'src/global/component';
 
-:host {
+:hst {
   display: block;
 }
 
diff --git a/libraries/ui-library/src/components/six-picto/six-picto.scss b/libraries/ui-library/src/components/six-picto/six-picto.scss
index ed7cbaef0..3e17e7f02 100644
--- a/libraries/ui-library/src/components/six-picto/six-picto.scss
+++ b/libraries/ui-library/src/components/six-picto/six-picto.scss
@@ -3,7 +3,7 @@
     height: 24px;
     width: 24px;
     display: inline-block;
-    background-color: var(--six-color-black);
+    background-color: var(--six-picto-background-color);
     background-size: cover;
     background-repeat: no-repeat;
   }
diff --git a/libraries/ui-library/src/components/six-range/six-range.scss b/libraries/ui-library/src/components/six-range/six-range.scss
index bb554201f..4e1a47985 100644
--- a/libraries/ui-library/src/components/six-range/six-range.scss
+++ b/libraries/ui-library/src/components/six-range/six-range.scss
@@ -4,8 +4,8 @@
 :host {
   --thumb-size: 14px;
   --tooltip-offset-y: 10px;
-  --track-color: var(--six-color-web-rock-900);
-  --thumb-color: var(--six-color-web-rock-900);
+  --track-color: var(--six-range-track-color);
+  --thumb-color: var(--six-range-thumb-color);
   --track-height: 3px;
 
   display: block;
@@ -67,7 +67,7 @@
     &::-moz-range-track {
       width: 100%;
       height: var(--track-height);
-      background-color: var(--six-progress-track-color);
+      background-color: red;
       border-radius: 3px;
       border: none;
     }
@@ -115,16 +115,16 @@
     &:disabled {
       &::-webkit-slider-thumb {
         cursor: not-allowed;
-        color: var(--six-color-web-rock-300);
-        border-color: var(--six-color-web-rock-300);
-        background-color: var(--six-color-web-rock-300);
+        color: var(--six-range-color-disabled);
+        border-color: var(--six-range-color-disabled);
+        background-color: var(--six-range-color-disabled);
       }
 
       &::-moz-range-thumb {
         cursor: not-allowed;
-        color: var(--six-color-web-rock-300);
-        border-color: var(--six-color-web-rock-300);
-        background-color: var(--six-color-web-rock-300);
+        color: var(--six-range-color-disabled);
+        border-color: var(--six-range-color-disabled);
+        background-color: var(--six-range-color-disabled);
       }
     }
   }
diff --git a/libraries/ui-library/src/components/six-range/six-range.tsx b/libraries/ui-library/src/components/six-range/six-range.tsx
index 01692f59b..c256ad27b 100644
--- a/libraries/ui-library/src/components/six-range/six-range.tsx
+++ b/libraries/ui-library/src/components/six-range/six-range.tsx
@@ -252,7 +252,7 @@ export class SixRange {
       this.nativeInput.style.background =
         '-webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) ' +
         percent +
-        '%, var(--six-color-web-rock-300) ' +
+        '%, var(--six-range-track-color-disabled) ' +
         percent +
         '%)';
     }
diff --git a/libraries/ui-library/src/components/six-range/test/six-range.spec.tsx b/libraries/ui-library/src/components/six-range/test/six-range.spec.tsx
new file mode 100644
index 000000000..f56305739
--- /dev/null
+++ b/libraries/ui-library/src/components/six-range/test/six-range.spec.tsx
@@ -0,0 +1,35 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { SixRange } from '../six-range';
+
+describe('six-range', () => {
+  it('renders', async () => {
+    global.ResizeObserver = jest.fn();
+
+    const page = await newSpecPage({
+      components: [SixRange],
+      html: `<six-range tooltip="none"></six-range>`,
+    });
+    expect(page.root).toEqualHtml(`
+      <six-range tooltip="none">
+       <mock:shadow-root>
+        <div class="form-control form-control--medium" part="form-control">
+         <label aria-hidden="true" class="form-control__label" htmlfor="input-1" id="input-label-1" part="label">
+          <slot name="label"></slot>
+         </label>
+         <div class="form-control__input">
+          <div class="range" part="base">
+           <input class="range__control" max="100" min="0" part="input" step="1" type="range" value="0" style="background: -webkit-linear-gradient(left, var(--track-color) 0%, var(--track-color) 0%, var(--six-range-track-color-disabled) 0%);">
+          </div>
+         </div>
+         <div aria-hidden="true" class="form-control__error-text" id="input-error-text-1" part="error-text">
+           <slot name="error-text"></slot>
+         </div>
+          <div aria-hidden="true" class="form-control__help-text" id="input-help-text-1" part="help-text">
+           <slot name="help-text"></slot>
+          </div>
+        </div>
+       </mock:shadow-root>
+      </six-range>
+    `);
+  });
+});
diff --git a/libraries/ui-library/src/components/six-rating/six-rating.scss b/libraries/ui-library/src/components/six-rating/six-rating.scss
index b6cf0625f..61322c40c 100644
--- a/libraries/ui-library/src/components/six-rating/six-rating.scss
+++ b/libraries/ui-library/src/components/six-rating/six-rating.scss
@@ -2,8 +2,6 @@
 @use '../../functional-components/form-control/form-control';
 
 :host {
-  --six-rating-color: var(--six-color-web-rock-500);
-  --six-rating-color-active: var(--six-color-warning-700);
   --six-rating-color-disabled-opacity: 0.4;
 
   display: block;
diff --git a/libraries/ui-library/src/components/six-root/index.html b/libraries/ui-library/src/components/six-root/index.html
index e6cf684ee..f7bdddb94 100644
--- a/libraries/ui-library/src/components/six-root/index.html
+++ b/libraries/ui-library/src/components/six-root/index.html
@@ -22,9 +22,16 @@ <h2>Basic Layout with all elements</h2>
         <code>PROD</code> will disable stage indication
       </p>
 
+      <h2>Theme Support</h2>
+      <p>
+        <code>six-root</code> includes built-in theme management. Set the <code>theme</code> attribute to
+        <code>light</code>, <code>dark</code>, or <code>auto</code> (follows system preference). Use
+        <code>six-theme-switcher</code> to toggle themes.
+      </p>
+
       <section>
         <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">
               <!-- hamburger menu -->
               <six-header-item>
@@ -43,6 +50,11 @@ <h2>Basic Layout with all elements</h2>
                 <six-icon-button name="search"></six-icon-button>
               </six-header-item>
 
+              <!-- Theme Switcher -->
+              <six-header-item>
+                <six-theme-switcher></six-theme-switcher>
+              </six-header-item>
+
               <!-- Profile -->
               <six-header-dropdown-item>
                 <six-icon-button slot="trigger">
@@ -113,7 +125,19 @@ <h2>Basic Layout with all elements</h2>
             </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>
@@ -235,6 +259,7 @@ <h3>Task</h3>
               );
 
             const Select = getElements({
+              root: '#app-root',
               header: 'six-header',
               leftSidebar: 'six-sidebar[slot="left-sidebar"]',
               tasksButton: '#show-tasks',
diff --git a/libraries/ui-library/src/components/six-root/readme.md b/libraries/ui-library/src/components/six-root/readme.md
index e0a879c58..fd385f3e9 100644
--- a/libraries/ui-library/src/components/six-root/readme.md
+++ b/libraries/ui-library/src/components/six-root/readme.md
@@ -9,11 +9,51 @@ Six root gives you a [basic layout](<https://en.wikipedia.org/wiki/Holy_grail_(w
 
 ## 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
diff --git a/libraries/ui-library/src/components/six-root/six-root.scss b/libraries/ui-library/src/components/six-root/six-root.scss
index 91aaeeb6a..d11fe495d 100644
--- a/libraries/ui-library/src/components/six-root/six-root.scss
+++ b/libraries/ui-library/src/components/six-root/six-root.scss
@@ -18,12 +18,14 @@
   }
 
   &__left-sidebar {
+    background: var(--six-root-main-background-color);
     height: 100%;
     overflow: scroll;
     grid-column: 1 / 2;
   }
 
   &__right-sidebar {
+    background: var(--six-root-main-background-color);
     height: 100%;
     overflow: scroll;
     grid-column: 3 / 4;
@@ -39,17 +41,14 @@ header {
   position: sticky;
   top: 0;
   z-index: var(--six-z-index-header);
-  // border fix
-  margin-right: 2px;
 }
 
 main {
   height: 100%;
-
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-
+  background: var(--six-root-main-background-color);
   grid-column: 2 / 3;
   overflow: auto;
 }
diff --git a/libraries/ui-library/src/components/six-root/six-root.tsx b/libraries/ui-library/src/components/six-root/six-root.tsx
index c5b2b81f0..47eea2311 100644
--- a/libraries/ui-library/src/components/six-root/six-root.tsx
+++ b/libraries/ui-library/src/components/six-root/six-root.tsx
@@ -1,6 +1,8 @@
-import { Component, Element, h, Prop } from '@stencil/core';
+import { Component, Element, h, Prop, Watch, Method } from '@stencil/core';
 import { StageType } from '../six-stage-indicator/six-stage-indicator';
 
+export type SixTheme = 'light' | 'dark' | 'auto';
+
 /**
  * @since 1.0
  * @status stable
@@ -18,6 +20,9 @@ import { StageType } from '../six-stage-indicator/six-stage-indicator';
   shadow: true,
 })
 export class SixRoot {
+  private mediaQuery?: MediaQueryList;
+  private mediaQueryHandler?: (e: MediaQueryListEvent) => void;
+
   @Element() host!: HTMLSixRootElement;
 
   /** Defines whether the content section should be padded */
@@ -30,6 +35,148 @@ export class SixRoot {
   /** Defines the version of the application*/
   @Prop() version = '';
 
+  /** Defines the theme */
+  @Prop({ mutable: true, reflect: true }) theme: SixTheme = 'light';
+
+  @Watch('theme')
+  handleThemeChange() {
+    this.applyTheme();
+  }
+
+  connectedCallback() {
+    this.setupSystemPreferenceDetection();
+    this.loadSavedTheme();
+    this.applyTheme();
+    this.exposeGlobalAPI();
+  }
+
+  disconnectedCallback() {
+    this.cleanupSystemPreferenceDetection();
+    this.cleanupGlobalAPI();
+  }
+
+  componentDidLoad() {
+    this.applyTheme();
+  }
+
+  /** Sets the theme. */
+  @Method()
+  async setTheme(theme: SixTheme) {
+    if (!['light', 'dark', 'auto'].includes(theme)) {
+      console.warn(`[six-root] Invalid theme: ${theme}. Using 'light' as fallback.`);
+      theme = 'light';
+    }
+
+    this.theme = theme;
+    this.saveTheme(theme);
+    this.applyTheme();
+  }
+
+  /** Gets the current theme and applied theme. */
+  @Method()
+  async getTheme(): Promise<{ theme: SixTheme; appliedTheme: 'light' | 'dark' }> {
+    return {
+      theme: this.theme,
+      appliedTheme: this.getAppliedTheme(),
+    };
+  }
+
+  /** Toggles between light and dark theme. */
+  @Method()
+  async toggleTheme() {
+    const currentApplied = this.getAppliedTheme();
+    const newTheme = currentApplied === 'dark' ? 'light' : 'dark';
+    await this.setTheme(newTheme);
+  }
+
+  private setupSystemPreferenceDetection() {
+    this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    this.mediaQueryHandler = () => {
+      if (this.theme === 'auto') {
+        this.applyTheme();
+      }
+    };
+    this.mediaQuery.addEventListener('change', this.mediaQueryHandler);
+  }
+
+  private cleanupSystemPreferenceDetection() {
+    if (this.mediaQuery && this.mediaQueryHandler) {
+      this.mediaQuery.removeEventListener('change', this.mediaQueryHandler);
+    }
+  }
+
+  private getSystemPreference(): 'light' | 'dark' {
+    if (this.mediaQuery && this.mediaQuery.matches) {
+      return 'dark';
+    }
+    return 'light';
+  }
+
+  private getAppliedTheme(): 'light' | 'dark' {
+    if (this.theme === 'auto') {
+      return this.getSystemPreference();
+    }
+    return this.theme as 'light' | 'dark';
+  }
+
+  private applyTheme() {
+    const appliedTheme = this.getAppliedTheme();
+    const root = document.documentElement;
+
+    root.classList.remove('theme-light', 'theme-dark');
+    root.classList.add(`theme-${appliedTheme}`);
+
+    this.updateMetaThemeColor(appliedTheme);
+  }
+
+  private updateMetaThemeColor(theme: 'light' | 'dark') {
+    let metaThemeColor = document.querySelector('meta[name="theme-color"]');
+
+    if (!metaThemeColor) {
+      metaThemeColor = document.createElement('meta');
+      metaThemeColor.setAttribute('name', 'theme-color');
+      document.head.appendChild(metaThemeColor);
+    }
+
+    const colors = {
+      light: '#ffffff',
+      dark: '#000000',
+    };
+
+    metaThemeColor.setAttribute('content', colors[theme] || colors.light);
+  }
+
+  private loadSavedTheme() {
+    const savedTheme = localStorage.getItem('six-theme') as SixTheme | null;
+    if (savedTheme && ['light', 'dark', 'auto'].includes(savedTheme)) {
+      this.theme = savedTheme;
+    }
+  }
+
+  private saveTheme(theme: SixTheme) {
+    try {
+      localStorage.setItem('six-theme', theme);
+    } catch (e) {
+      console.warn('[six-root] Failed to save theme to localStorage:', e);
+    }
+  }
+
+  private exposeGlobalAPI() {
+    if (!window.SixTheme) {
+      window.SixTheme = {
+        setTheme: (theme: SixTheme) => this.setTheme(theme),
+        getTheme: () => this.getTheme(),
+        toggle: () => this.toggleTheme(),
+      };
+    }
+  }
+
+  private cleanupGlobalAPI() {
+    if (window.SixTheme) {
+      delete window.SixTheme;
+    }
+  }
+
   render() {
     return (
       <host class="six-root">
@@ -55,3 +202,13 @@ export class SixRoot {
     );
   }
 }
+
+declare global {
+  interface Window {
+    SixTheme?: {
+      setTheme: (theme: SixTheme) => Promise<void>;
+      getTheme: () => Promise<{ theme: SixTheme; appliedTheme: 'light' | 'dark' }>;
+      toggle: () => Promise<void>;
+    };
+  }
+}
diff --git a/libraries/ui-library/src/components/six-root/test/six-root.spec.tsx b/libraries/ui-library/src/components/six-root/test/six-root.spec.tsx
new file mode 100644
index 000000000..82651341e
--- /dev/null
+++ b/libraries/ui-library/src/components/six-root/test/six-root.spec.tsx
@@ -0,0 +1,72 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { SixRoot } from '../six-root';
+
+describe('six-root', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixRoot],
+      html: `<six-root></six-root>`,
+    });
+
+    expect(page.root).toEqualHtml(`
+      <six-root theme="light">
+        <mock:shadow-root>
+          <host class="six-root">
+            <header part="header">
+              <slot name="header"></slot>
+            </header>
+            <nav class="six-root__left-sidebar" part="left-sidebar">
+                <slot name="left-sidebar"></slot>
+            </nav>
+            <main part="main">
+              <div class="six-root__container six-root__container--padded" part="container">
+                <slot name="main"></slot>
+              </div>
+              <div class="six-root__footer">
+                <slot name="footer"></slot>
+              </div>
+            </main>
+            <nav class="six-root__right-sidebar" part="right-sidebar">
+              <slot name="right-sidebar"></slot>
+            </nav>
+          </host>
+        </mock:shadow-root>
+      </six-root>
+    `);
+  });
+
+  it('applies theme correctly', async () => {
+    const page = await newSpecPage({
+      components: [SixRoot],
+      html: `<six-root theme="dark"></six-root>`,
+    });
+
+    expect(page.root?.getAttribute('theme')).toBe('dark');
+  });
+
+  it('can toggle theme', async () => {
+    const page = await newSpecPage({
+      components: [SixRoot],
+      html: `<six-root theme="light"></six-root>`,
+    });
+
+    const root = page.rootInstance as SixRoot;
+    await root.toggleTheme();
+
+    const theme = await root.getTheme();
+    expect(theme.theme).toBe('dark');
+  });
+
+  it('can set theme programmatically', async () => {
+    const page = await newSpecPage({
+      components: [SixRoot],
+      html: `<six-root></six-root>`,
+    });
+
+    const root = page.rootInstance as SixRoot;
+    await root.setTheme('dark');
+
+    const theme = await root.getTheme();
+    expect(theme.theme).toBe('dark');
+  });
+});
diff --git a/libraries/ui-library/src/components/six-sidebar-item/six-sidebar-item.scss b/libraries/ui-library/src/components/six-sidebar-item/six-sidebar-item.scss
index b226bfb33..2758ad473 100644
--- a/libraries/ui-library/src/components/six-sidebar-item/six-sidebar-item.scss
+++ b/libraries/ui-library/src/components/six-sidebar-item/six-sidebar-item.scss
@@ -17,7 +17,7 @@ a {
   align-items: center;
 
   &:hover:not(.sidebar-item--disabled) {
-    color: var(--six-color-web-rock-600);
+    color: var(--six-sidebar-item-color-hover);
   }
 
   &.sidebar-item--disabled {
diff --git a/libraries/ui-library/src/components/six-sidebar/six-sidebar.scss b/libraries/ui-library/src/components/six-sidebar/six-sidebar.scss
index 576bc3adb..2d4858df2 100644
--- a/libraries/ui-library/src/components/six-sidebar/six-sidebar.scss
+++ b/libraries/ui-library/src/components/six-sidebar/six-sidebar.scss
@@ -14,7 +14,7 @@
     overflow: auto;
 
     &.sidebar--open {
-      border-right: 1px solid var(--six-color-web-rock-300);
+      border-right: 1px solid var(--six-sidebar-border-color);
     }
 
     &:not(.sidebar--visible) {
diff --git a/libraries/ui-library/src/components/six-spinner/six-spinner.tsx b/libraries/ui-library/src/components/six-spinner/six-spinner.tsx
index 49ff0762b..36021836d 100644
--- a/libraries/ui-library/src/components/six-spinner/six-spinner.tsx
+++ b/libraries/ui-library/src/components/six-spinner/six-spinner.tsx
@@ -61,21 +61,21 @@ export class SixSpinner {
       <svg viewBox="0 0 45 55" part="svg">
         <polygon
           fill="none"
-          stroke="black"
+          stroke="var(--six-logo-bme-color)"
           stroke-width="2"
           stroke-linecap="round"
           points="4.42 51.96 17.02 31.473 2 31.473 2 22.486 17.02 22.486 4.42 2 15.404 2 30.289 26.98 14.763 51.96 4.42 51.96"
         />
         <polygon
           fill="none"
-          stroke="black"
+          stroke="var(--six-logo-bme-color)"
           stroke-width="2"
           stroke-linecap="round"
           points="42 51.96 31.655 51.96 24.598 40.498 29.831 32.073 42 51.96"
         />
         <polygon
           fill="none"
-          stroke="black"
+          stroke="var(--six-logo-bme-color)"
           stroke-width="2"
           stroke-linecap="round"
           points="24.518 12.719 31.014 2 42 2 29.831 21.637 24.518 12.719"
diff --git a/libraries/ui-library/src/components/six-theme-switcher/index.html b/libraries/ui-library/src/components/six-theme-switcher/index.html
new file mode 100644
index 000000000..ec77ab9fd
--- /dev/null
+++ b/libraries/ui-library/src/components/six-theme-switcher/index.html
@@ -0,0 +1,103 @@
+<!doctype html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <script type="module" src="/build/ui-library.esm.js"></script>
+    <script nomodule src="/build/ui-library.js"></script>
+    <link rel="stylesheet" href="/build/ui-library.css" />
+    <title>six-theme-switcher</title>
+  </head>
+  <body>
+    <div class="container">
+      <h2>Theme Switcher</h2>
+
+      <p>
+        The <code>six-theme-switcher</code> is a simple icon button that toggles between light and dark themes. It
+        automatically syncs with <code>six-root</code>'s theme management system.
+      </p>
+
+      <section>
+        <div style="background: grey">
+          <six-theme-switcher></six-theme-switcher>
+        </div>
+      </section>
+
+      <h2>Sizes</h2>
+
+      <p>Theme switchers inherit the same size options as icon buttons.</p>
+
+      <section>
+        <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>
+      </section>
+
+      <h2>Disabled</h2>
+
+      <p>Set the <code>disabled</code> attribute to disable the theme switcher.</p>
+
+      <section>
+        <div style="background: grey">
+          <six-theme-switcher disabled></six-theme-switcher>
+        </div>
+      </section>
+
+      <h2>Custom Label</h2>
+
+      <p>
+        Provide a custom label for screen readers using the <code>label</code> attribute. This improves accessibility.
+      </p>
+
+      <section>
+        <div style="background: grey">
+          <six-theme-switcher label="Switch between light and dark mode"></six-theme-switcher>
+        </div>
+      </section>
+
+      <h2>With Tooltip</h2>
+
+      <p>Wrap a tooltip around the theme switcher to provide contextual information to the user.</p>
+
+      <section>
+        <div style="background: grey">
+          <six-tooltip content="Toggle theme">
+            <six-theme-switcher></six-theme-switcher>
+          </six-tooltip>
+        </div>
+      </section>
+
+      <h2>In Header</h2>
+
+      <p>The theme switcher is commonly used in application headers.</p>
+
+      <section>
+        <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>
+      </section>
+    </div>
+  </body>
+</html>
diff --git a/libraries/ui-library/src/components/six-theme-switcher/readme.md b/libraries/ui-library/src/components/six-theme-switcher/readme.md
new file mode 100644
index 000000000..24c099fb3
--- /dev/null
+++ b/libraries/ui-library/src/components/six-theme-switcher/readme.md
@@ -0,0 +1,49 @@
+# six-theme-switcher
+
+A simple icon button that toggles between light and dark themes. Works with six-root's theme management system.
+
+<!-- EXAMPLES -->
+
+<!-- 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)
+
+### 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
diff --git a/libraries/ui-library/src/components/six-theme-switcher/six-theme-switcher.scss b/libraries/ui-library/src/components/six-theme-switcher/six-theme-switcher.scss
new file mode 100644
index 000000000..39b43a9a6
--- /dev/null
+++ b/libraries/ui-library/src/components/six-theme-switcher/six-theme-switcher.scss
@@ -0,0 +1,5 @@
+@import 'src/global/component';
+
+:host {
+  display: inline-block;
+}
diff --git a/libraries/ui-library/src/components/six-theme-switcher/six-theme-switcher.tsx b/libraries/ui-library/src/components/six-theme-switcher/six-theme-switcher.tsx
new file mode 100644
index 000000000..bc0f95f32
--- /dev/null
+++ b/libraries/ui-library/src/components/six-theme-switcher/six-theme-switcher.tsx
@@ -0,0 +1,105 @@
+import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';
+import { EmptyPayload } from '../../utils/types';
+
+export type SixTheme = 'light' | 'dark' | 'auto';
+
+/**
+ * @since 5.0
+ * @status stable
+ *
+ * @part base - The component's base wrapper.
+ */
+
+@Component({
+  tag: 'six-theme-switcher',
+  styleUrl: 'six-theme-switcher.scss',
+  shadow: true,
+})
+export class SixThemeSwitcher {
+  @State() currentTheme: SixTheme = 'light';
+  @State() appliedTheme: 'light' | 'dark' = 'light';
+
+  /** The icon button's size. */
+  @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';
+
+  /** Set to true to disable the theme switcher. */
+  @Prop({ reflect: true }) disabled = false;
+
+  /** A description that gets read by screen readers. */
+  @Prop({ reflect: true }) label = 'Toggle theme';
+
+  /** Emitted when the theme is changed. */
+  @Event({ eventName: 'six-theme-switcher-change' }) sixThemeChange!: EventEmitter<EmptyPayload>;
+
+  async connectedCallback() {
+    await this.updateThemeState();
+    this.setupThemeListener();
+  }
+
+  disconnectedCallback() {
+    this.cleanupThemeListener();
+  }
+
+  componentDidLoad() {
+    this.updateThemeState();
+  }
+
+  private setupThemeListener() {
+    document.addEventListener('six-root-theme-change', this.handleThemeChange);
+  }
+
+  private cleanupThemeListener() {
+    document.removeEventListener('six-root-theme-change', this.handleThemeChange);
+  }
+
+  private handleThemeChange = async () => {
+    await this.updateThemeState();
+  };
+
+  private async updateThemeState() {
+    if (window.SixTheme) {
+      try {
+        const { theme, appliedTheme } = await window.SixTheme.getTheme();
+        this.currentTheme = theme;
+        this.appliedTheme = appliedTheme;
+      } catch (e) {
+        console.warn('[six-theme-switcher] Failed to get theme:', e);
+      }
+    }
+  }
+
+  private handleClick = async () => {
+    if (this.disabled) {
+      return;
+    }
+
+    if (window.SixTheme) {
+      try {
+        await window.SixTheme.toggle();
+        await this.updateThemeState();
+        this.sixThemeChange.emit();
+      } catch (e) {
+        console.warn('[six-theme-switcher] Failed to toggle theme:', e);
+      }
+    } else {
+      console.warn('[six-theme-switcher] SixTheme API not found. Make sure six-root is present in your DOM.');
+    }
+  };
+
+  private getIconName(): string {
+    return this.appliedTheme === 'dark' ? 'light_mode' : 'dark_mode';
+  }
+
+  render() {
+    return (
+      <six-icon-button
+        part="base"
+        name={this.getIconName()}
+        size={this.size}
+        disabled={this.disabled}
+        label={this.label}
+        onClick={this.handleClick}
+      />
+    );
+  }
+}
diff --git a/libraries/ui-library/src/components/six-theme-switcher/test/six-theme-switcher.spec.tsx b/libraries/ui-library/src/components/six-theme-switcher/test/six-theme-switcher.spec.tsx
new file mode 100644
index 000000000..4bb753b48
--- /dev/null
+++ b/libraries/ui-library/src/components/six-theme-switcher/test/six-theme-switcher.spec.tsx
@@ -0,0 +1,49 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { SixThemeSwitcher } from '../six-theme-switcher';
+
+describe('six-theme-switcher', () => {
+  it('renders', async () => {
+    const page = await newSpecPage({
+      components: [SixThemeSwitcher],
+      html: `<six-theme-switcher></six-theme-switcher>`,
+    });
+
+    expect(page.root).toEqualHtml(`
+      <six-theme-switcher label="Toggle theme" size="medium">
+        <mock:shadow-root>
+          <six-icon-button label="Toggle theme" name="dark_mode" part="base" size="medium"></six-icon-button>
+        </mock:shadow-root>
+      </six-theme-switcher>
+    `);
+  });
+
+  it('renders with custom size', async () => {
+    const page = await newSpecPage({
+      components: [SixThemeSwitcher],
+      html: `<six-theme-switcher size="large"></six-theme-switcher>`,
+    });
+
+    const iconButton = page.root?.shadowRoot?.querySelector('six-icon-button');
+    expect(iconButton?.getAttribute('size')).toBe('large');
+  });
+
+  it('renders with disabled state', async () => {
+    const page = await newSpecPage({
+      components: [SixThemeSwitcher],
+      html: `<six-theme-switcher disabled></six-theme-switcher>`,
+    });
+
+    const iconButton = page.root?.shadowRoot?.querySelector('six-icon-button');
+    expect(iconButton?.hasAttribute('disabled')).toBe(true);
+  });
+
+  it('renders with custom label', async () => {
+    const page = await newSpecPage({
+      components: [SixThemeSwitcher],
+      html: `<six-theme-switcher label="Custom label"></six-theme-switcher>`,
+    });
+
+    const iconButton = page.root?.shadowRoot?.querySelector('six-icon-button');
+    expect(iconButton?.getAttribute('label')).toBe('Custom label');
+  });
+});
diff --git a/libraries/ui-library/src/components/six-tile/six-tile.scss b/libraries/ui-library/src/components/six-tile/six-tile.scss
index 2221ef84e..1122681a3 100644
--- a/libraries/ui-library/src/components/six-tile/six-tile.scss
+++ b/libraries/ui-library/src/components/six-tile/six-tile.scss
@@ -23,7 +23,7 @@
   min-height: var(--tile-size);
   width: var(--tile-size);
 
-  background-color: var(--six-color-clay-50);
+  background-color: var(--six-tile-background-color);
 
   display: inline-grid;
   grid-template-columns: 100%;
@@ -101,7 +101,7 @@
   justify-content: center;
   cursor: pointer;
   font-weight: var(--six-font-weight-normal);
-  color: var(--six-color-web-rock-900);
+  color: var(--six-tile-footer-color);
 
   &--small {
     @extend .tile__footer;
diff --git a/libraries/ui-library/src/components/six-timepicker/six-timepicker.scss b/libraries/ui-library/src/components/six-timepicker/six-timepicker.scss
index f1d9829b7..9238702e5 100644
--- a/libraries/ui-library/src/components/six-timepicker/six-timepicker.scss
+++ b/libraries/ui-library/src/components/six-timepicker/six-timepicker.scss
@@ -44,12 +44,9 @@
     display: flex;
     justify-content: center;
     min-width: min-content;
-    background-color: white;
+    background-color: var(--six-timepicker-background-color);
     padding: 0.5em;
-    box-shadow:
-      0 2px 4px -1px rgb(0 0 0 / 20%),
-      0 4px 5px 0 rgb(0 0 0 / 14%),
-      0 1px 10px 0 rgb(0 0 0 / 12%);
+    box-shadow: var(--six-shadow-medium);
     user-select: none;
     position: absolute;
     z-index: var(--six-z-index-dropdown);
diff --git a/libraries/ui-library/src/global/base.css b/libraries/ui-library/src/global/base.css
index 80a48b231..b4cd4e992 100644
--- a/libraries/ui-library/src/global/base.css
+++ b/libraries/ui-library/src/global/base.css
@@ -97,15 +97,6 @@ body > div.container {
 
   --six-focus-shadow: 0 0 0 var(--six-focus-offset-input);
   --six-input-focus-shadow: var(--six-focus-shadow) var(--six-input-border-color-focus);
-  --six-input-background-color: var(--six-color-white);
-  --six-input-background-color-hover: var(--six-color-white);
-  --six-input-background-color-focus: var(--six-color-white);
-  --six-input-background-color-disabled: var(--six-color-web-rock-100);
-  --six-input-border-color: var(--six-color-web-rock-400);
-  --six-input-border-color-hover: var(--six-color-web-rock-600);
-  --six-input-border-color-focus: var(--six-color-action-600);
-  --six-input-border-color-danger: var(--six-color-danger-800);
-  --six-input-border-color-disabled: var(--six-color-web-rock-400);
   --six-input-border-radius-small: var(--six-border-radius-medium);
   --six-input-border-radius-medium: var(--six-border-radius-medium);
   --six-input-border-radius-large: var(--six-border-radius-medium);
@@ -114,15 +105,6 @@ body > div.container {
   --six-input-font-size-medium: var(--six-font-size-small);
   --six-input-font-size-large: var(--six-font-size-medium);
   --six-input-letter-spacing: var(--six-letter-spacing-normal);
-  --six-input-color: var(--six-color-web-rock-900);
-  --six-input-color-hover: var(--six-color-web-rock-900);
-  --six-input-color-focus: var(--six-color-web-rock-900);
-  --six-input-color-disabled: var(--six-color-web-rock-600);
-  --six-input-icon-color: var(--six-color-web-rock-900);
-  --six-input-icon-color-hover: var(--six-color-web-rock-600);
-  --six-input-icon-color-focus: var(--six-color-web-rock-900);
-  --six-input-placeholder-color: var(--six-color-web-rock-500);
-  --six-input-placeholder-color-disabled: var(--six-color-web-rock-500);
   --six-input-spacing-small: var(--six-spacing-small);
   --six-input-spacing-medium: var(--six-spacing-medium);
   --six-input-spacing-large: var(--six-spacing-large);
@@ -132,79 +114,31 @@ body > div.container {
   --six-input-label-font-size-small: var(--six-font-size-xx-small);
   --six-input-label-font-size-medium: var(--six-font-size-x-small);
   --six-input-label-font-size-large: var(--six-font-size-small);
-  --six-input-label-color: var(--six-color-web-rock-900);
-  --six-input-label-color-disabled: var(--six-color-web-rock-600);
   --six-input-help-text-font-size-small: var(--six-font-size-xx-small);
   --six-input-help-text-font-size-medium: var(--six-font-size-x-small);
   --six-input-help-text-font-size-large: var(--six-font-size-small);
-  --six-input-help-text-color: var(--six-color-web-rock-600);
-  --six-input-help-text-color-disabled: var(--six-color-web-rock-600);
 
-  --six-overlay-background-color: var(--six-color-web-rock-900);
-
-  --six-panel-background-color: var(--six-color-white);
-  --six-panel-border-color: var(--six-color-clay-50);
-
-  --six-progress-track-color: var(--six-color-web-rock-300);
-  --six-progress-indicator-color: var(--six-color-danger-800);
-  --six-progress-label-color: var(--six-color-white);
-
-  /* add component specific variables here (used for a dedicated component) */
-  --six-tooltip-background-color: var(--six-color-web-rock-900);
-  --six-tooltip-color: var(--six-color-white);
   --six-tooltip-arrow-size: 5px;
   --six-tooltip-arrow-start-end-offset: 8px;
   --six-tooltip-font-size: var(--six-font-size-small);
   --six-tooltip-font-weight: var(--six-font-weight-normal);
   --six-tooltip-line-height: var(--six-line-height-dense);
 
-  --six-avatar-color: var(--six-color-white);
-  --six-avatar-background-color: var(--six-color-web-rock-300);
-
-  --six-checkbox-color: var(--six-color-white);
-  --six-selection-control-color: var(--six-color-action-500);
-  --six-selection-control-color-disabled: var(--six-color-web-rock-400);
   --six-selection-control-toggle-size: 1rem;
 
-  --six-details-color: var(--six-color-web-rock-900);
-
-  --six-drawer-color: var(--six-color-web-rock-900);
-  --six-drawer-background-color: var(--six-color-clay-50);
-
-  --six-footer-background-color: var(--six-color-white);
-
-  --six-header-background-color: var(--six-color-white);
-  --six-header-border-color: var(--six-color-web-rock-300);
-  --six-header-border-color-open: var(--six-color-web-rock-900);
   --six-header-border-with: 1px;
-  --six-header-selected-app-color-hover: var(--six-color-web-rock-600);
   --six-header-height: 3.75rem;
   --six-header-border-height: var(--six-spacing-xx-small);
 
-  --six-menu-divider-color: var(--six-color-clay-50);
-  --six-menu-item-background-color: var(--six-color-clay-50);
-
-  --six-search-color: var(--six-color-action-600);
-
-  --six-sidebar-color: var(--six-color-web-rock-900);
-  --six-sidebar-background-color: var(--six-color-white);
-  --six-sidebar-hover-background-color: var(--six-color-clay-50);
-  --six-sidebar-header-background-color: var(--six-color-clay-50);
-  --six-sidebar-item-background-color: var(--six-color-web-rock-50);
-
-  --six-tab-color: var(--six-color-web-rock-900);
-  --six-tab-color-active: var(--six-color-web-rock-900);
-  --six-tab-color-hover: var(--six-color-web-rock-700);
-  --six-tab-color-disabled: var(--six-color-web-rock-400);
-  --six-tab-border-color: var(--six-color-white);
   --six-tab-border-width: 3px;
-  --six-tab-border-color-active: var(--six-color-web-rock-900);
 
-  --six-rating-color: var(--six-color-web-rock-500);
-  --six-rating-color-active: var(--six-color-success-600);
   --six-rating-color-disabled-opacity: 0.4;
 }
 
+html.theme-dark {
+  background-color: var(--six-color-dark-background-color);
+}
+
 [hidden] {
   display: none !important;
 }
diff --git a/libraries/ui-library/src/global/base/colors.css b/libraries/ui-library/src/global/base/colors.css
index c8cf4cff9..0ce0417e4 100644
--- a/libraries/ui-library/src/global/base/colors.css
+++ b/libraries/ui-library/src/global/base/colors.css
@@ -1,3 +1,11 @@
+/* ============================================
+   DYNAMIC THEME COLOR SYSTEM
+   ============================================
+   Light theme is default.
+   Theme switcher component will toggle .theme-dark class
+   on <html> to switch colors.
+============================================ */
+
 :root {
   --six-color-red: #de3919;
   --six-color-black: #000;
@@ -16,26 +24,415 @@
   --six-color-web-rock-100: #f6f6f6;
   --six-color-web-rock-50: #fbfbfb;
 
+  --six-color-clay-900: #5f574f;
+  --six-color-clay-800: #6f665d;
+  --six-color-clay-700: #7e756c;
+  --six-color-clay-600: #8e847b;
+  --six-color-clay-500: #9e9389;
+  --six-color-clay-400: #aea297;
+  --six-color-clay-300: #beb1a6;
   --six-color-clay-200: #ada398;
+  --six-color-clay-100: #d6d1cd;
   --six-color-clay-50: #ebe8e7;
 
   --six-color-danger-900: #c52c0f;
   --six-color-danger-800: #de3919;
-  --six-color-danger-light-to-be-defined: #f58c78;
+  --six-color-danger-700: #ec411d;
+  --six-color-danger-600: #fa4823;
+  --six-color-danger-500: #ff4e27;
+  --six-color-danger-400: #ff6b46;
+  --six-color-danger-300: #ff8767;
+  --six-color-danger-200: #ffa992;
+  --six-color-danger-100: #ffcbbd;
+  --six-color-danger-50: #fce9e7;
 
+  --six-color-warning-900: #ea7719;
   --six-color-warning-800: #ef9f25;
   --six-color-warning-700: #f2b72c;
-  --six-color-warning-light-to-be-defined: #f9deb4;
+  --six-color-warning-600: #f5ce33;
+  --six-color-warning-500: #f5df36;
+  --six-color-warning-400: #f7e454;
+  --six-color-warning-300: #f9e973;
+  --six-color-warning-200: #fbef9a;
+  --six-color-warning-100: #fdf5c2;
+  --six-color-warning-50: #fefce6;
 
+  --six-color-success-900: #008600;
+  --six-color-success-800: #09a800;
+  --six-color-success-700: #3abd00;
   --six-color-success-600: #58d200;
   --six-color-success-500: #6ae300;
-  --six-color-success-light-to-be-defined: #aaff6c;
+  --six-color-success-400: #85e845;
+  --six-color-success-300: #a0ee6e;
+  --six-color-success-200: #bef39b;
+  --six-color-success-100: #d9f8c3;
+  --six-color-success-50: #f0fde7;
 
+  --six-color-action-900: #1045a1;
+  --six-color-action-800: #1764c0;
+  --six-color-action-700: #1a75d2;
   --six-color-action-600: #1f87e5;
   --six-color-action-500: #2196f3;
-  --six-color-action-light-to-be-defined: #a8d0f5;
+  --six-color-action-400: #42a4f5;
+  --six-color-action-300: #63b4f6;
+  --six-color-action-200: #90c9f9;
+  --six-color-action-100: #bbdefb;
+  --six-color-action-50: #e3f2fd;
+
+  --six-color-marine-900: #002c5f;
+  --six-color-marine-800: #19416f;
+  --six-color-marine-700: #33567e;
+  --six-color-marine-600: #4c6b8f;
+  --six-color-marine-500: #66809f;
+  --six-color-marine-400: #7f95af;
+  --six-color-marine-300: #99aabe;
+  --six-color-marine-200: #b2bfcf;
+  --six-color-marine-100: #ccd4df;
+  --six-color-marine-50: #e5e9ef;
+
+  --six-color-horizon-900: #88c1e4;
+  --six-color-horizon-800: #94c7e7;
+  --six-color-horizon-700: #9fcde9;
+  --six-color-horizon-600: #abd3ec;
+  --six-color-horizon-500: #b7d9ee;
+  --six-color-horizon-400: #c3e0f1;
+  --six-color-horizon-300: #cfe6f4;
+  --six-color-horizon-200: #dbecf7;
+  --six-color-horizon-100: #e7f2f9;
+  --six-color-horizon-50: #f3f9fc;
+
+  --six-color-indigo-900: #5c1bb8;
+  --six-color-indigo-800: #6c32bf;
+  --six-color-indigo-700: #7d49c6;
+  --six-color-indigo-600: #8d5fcd;
+  --six-color-indigo-500: #9d76d4;
+  --six-color-indigo-400: #ae8ddc;
+  --six-color-indigo-300: #bea4e3;
+  --six-color-indigo-200: #cebbea;
+  --six-color-indigo-100: #ded1f1;
+  --six-color-indigo-50: #efe8f8;
 
   --six-color-inactive: #c3c3c3;
 
   --six-focus-ring-color: var(--six-color-action-600);
 }
+
+html {
+  color: black;
+
+  --six-alert-background-color: var(--six-color-white);
+  --six-alert-border-color: var(--six-color-web-rock-200);
+  --six-alert-color: var(--six-color-web-rock-700);
+  --six-alert-primary-color: var(--six-color-web-rock-900);
+
+  --six-card-border-color: var(--six-color-web-rock-100);
+
+  --six-file-upload-drop-zone-hover-background-color: var(--six-color-action-200);
+
+  --six-picto-background-color: var(--six-color-black);
+
+  --six-item-picker-color-disabled: var(--six-color-web-rock-300);
+  --six-item-picker-background-color-hover: var(--six-color-web-rock-100);
+
+  --six-file-list-item-icon-color-hover: var(--six-color-web-rock-900);
+
+  --six-dropdown-border-color: var(--six-color-web-rock-300);
+  --six-dropdown-background-color: var(--six-color-white);
+
+  --six-date-panel-background-color: var(--six-color-white);
+  --six-date-panel-border-color: var(--six-color-web-rock-300);
+  --six-date-cell-background-color-hover: var(--six-color-web-rock-200);
+  --six-date-cell-today-border-color: var(--six-color-web-rock-900);
+  --six-date-selector-background-color-hover: var(--six-color-web-rock-100);
+  --six-date-cell-outdated-color: var(--six-color-web-rock-400);
+
+  --six-dialog-color: var(--six-color-web-rock-900);
+
+  --six-logo-bme-color: var(--six-color-web-rock-900);
+
+  --six-language-switcher-color-hover: var(--six-color-web-rock-600);
+  --six-language-switcher-color-selected: var(--six-color-black);
+
+  --six-button-transparent-background-color-hover: var(--six-color-web-rock-100);
+  --six-button-secondary-border-color: var(--six-color-web-rock-900);
+  --six-button-secondary-color: var(--six-color-web-rock-900);
+  --six-button-primary-background-color: var(--six-color-web-rock-900);
+  --six-button-primary-background-color-hover: var(--six-color-web-rock-800);
+  --six-button-primary-background-color-active: var(--six-color-web-rock-900);
+  --six-button-primary-color: var(--six-color-white);
+  --six-button-background-color-disabled: var(--six-color-web-rock-400);
+  --six-button-border-color-disabled: var(--six-color-web-rock-400);
+  --six-button-color-disabled: var(--six-color-web-rock-700);
+
+  --six-input-background-color: var(--six-color-white);
+  --six-input-background-color-hover: var(--six-color-white);
+  --six-input-background-color-focus: var(--six-color-white);
+  --six-input-background-color-disabled: var(--six-color-web-rock-100);
+  --six-input-border-color: var(--six-color-web-rock-400);
+  --six-input-border-color-hover: var(--six-color-web-rock-600);
+  --six-input-border-color-focus: var(--six-color-action-600);
+  --six-input-border-color-danger: var(--six-color-danger-800);
+  --six-input-border-color-disabled: var(--six-color-web-rock-400);
+  --six-input-color: var(--six-color-web-rock-900);
+  --six-input-color-hover: var(--six-color-web-rock-900);
+  --six-input-color-focus: var(--six-color-web-rock-900);
+  --six-input-color-disabled: var(--six-color-web-rock-600);
+  --six-input-icon-color: var(--six-color-web-rock-900);
+  --six-input-icon-color-hover: var(--six-color-web-rock-600);
+  --six-input-icon-color-focus: var(--six-color-web-rock-900);
+  --six-input-placeholder-color: var(--six-color-web-rock-500);
+  --six-input-placeholder-color-disabled: var(--six-color-web-rock-500);
+  --six-input-label-color: var(--six-color-web-rock-900);
+  --six-input-label-color-disabled: var(--six-color-web-rock-600);
+  --six-input-help-text-color: var(--six-color-web-rock-600);
+  --six-input-help-text-color-disabled: var(--six-color-web-rock-600);
+
+  --six-overlay-background-color: var(--six-color-web-rock-900);
+
+  --six-panel-background-color: var(--six-color-white);
+  --six-panel-border-color: var(--six-color-clay-50);
+
+  --six-progress-track-color: var(--six-color-web-rock-300);
+  --six-progress-indicator-color: var(--six-color-danger-800);
+  --six-progress-label-color: var(--six-color-white);
+
+  --six-range-track-color: var(--six-color-web-rock-900);
+  --six-range-thumb-color: var(--six-color-web-rock-900);
+  --six-range-color-disabled: var(--six-color-web-rock-300);
+  --six-range-track-color-disabled: var(--six-color-web-rock-300);
+
+  --six-tile-background-color: var(--six-color-clay-50);
+  --six-tile-footer-color: var(--six-color-web-rock-900);
+
+  --six-timepicker-background-color: var(--six-color-white);
+
+  --six-tooltip-background-color: var(--six-color-web-rock-900);
+  --six-tooltip-color: var(--six-color-white);
+
+  --six-avatar-color: var(--six-color-web-rock-700);
+  --six-avatar-background-color: var(--six-color-web-rock-300);
+
+  --six-checkbox-color: var(--six-color-white);
+
+  --six-selection-control-color: var(--six-color-action-500);
+  --six-selection-control-color-disabled: var(--six-color-web-rock-400);
+
+  --six-details-color: var(--six-color-web-rock-900);
+  --six-details-body-background-color: var(--six-color-web-rock-50);
+
+  --six-drawer-color: var(--six-color-web-rock-900);
+  --six-drawer-background-color: var(--six-color-clay-50);
+
+  --six-footer-background-color: var(--six-color-white);
+  --six-footer-color: var(--six-color-web-rock-900);
+
+  --six-header-background-color: var(--six-color-white);
+  --six-header-border-color: var(--six-color-web-rock-300);
+  --six-header-border-color-open: var(--six-color-web-rock-900);
+  --six-header-selected-app-color-hover: var(--six-color-web-rock-600);
+
+  --six-menu-divider-color: var(--six-color-clay-50);
+  --six-menu-item-background-color: var(--six-color-clay-50);
+
+  --six-search-color: var(--six-color-action-600);
+
+  --six-sidebar-color: var(--six-color-web-rock-900);
+  --six-sidebar-background-color: var(--six-color-white);
+  --six-sidebar-hover-background-color: var(--six-color-clay-50);
+  --six-sidebar-header-background-color: var(--six-color-clay-50);
+  --six-sidebar-border-color: var(--six-color-web-rock-300);
+  --six-sidebar-item-color-hover: var(--six-color-web-rock-600);
+
+  --six-tab-color: var(--six-color-web-rock-900);
+  --six-tab-color-active: var(--six-color-web-rock-900);
+  --six-tab-color-hover: var(--six-color-web-rock-700);
+  --six-tab-color-disabled: var(--six-color-web-rock-400);
+  --six-tab-border-color: var(--six-color-white);
+  --six-tab-border-color-active: var(--six-color-web-rock-900);
+
+  --six-rating-color: var(--six-color-web-rock-500);
+  --six-rating-color-active: var(--six-color-success-600);
+
+  --six-root-main-background-color: var(--six-color-white);
+
+  --six-scrollbar-background-color: var(--six-color-web-rock-300);
+  --six-scrollbar-thumb-color: var(--six-color-web-rock-500);
+  --six-scrollbar-thumb-hover-color: var(--six-color-web-rock-600);
+
+  /* Firefox, Chrome, Safari, Edge, Opera */
+  scrollbar-color: var(--six-scrollbar-thumb-color) var(--six-scrollbar-background-color);
+
+  /* Safari */
+  &::-webkit-scrollbar-track {
+    background: var(--six-scrollbar-background-color);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--six-scrollbar-thumb-color);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--six-scrollbar-thumb-hover-color);
+  }
+}
+
+.theme-dark {
+  color: white;
+
+  --six-color-dark-background-color: #151515;
+
+  --six-alert-background-color: var(--six-color-web-rock-900);
+  --six-alert-border-color: var(--six-color-web-rock-900);
+  --six-alert-color: var(--six-color-web-rock-400);
+  --six-alert-primary-color: var(--six-color-web-rock-700);
+
+  --six-card-border-color: var(--six-color-web-rock-900);
+
+  --six-file-upload-drop-zone-hover-background-color: var(--six-color-action-800);
+
+  --six-picto-background-color: var(--six-color-white);
+
+  --six-item-picker-color-disabled: var(--six-color-web-rock-800);
+  --six-item-picker-background-color-hover: var(--six-color-web-rock-900);
+
+  --six-file-list-item-icon-color-hover: var(--six-color-web-rock-300);
+
+  --six-dropdown-border-color: var(--six-color-web-rock-800);
+  --six-dropdown-background-color: var(--six-color-web-rock-900);
+
+  --six-date-panel-background-color: var(--six-color-web-rock-900);
+  --six-date-panel-border-color: var(--six-color-web-rock-700);
+  --six-date-cell-background-color-hover: var(--six-color-web-rock-800);
+  --six-date-cell-today-border-color: var(--six-color-web-rock-400);
+  --six-date-selector-background-color-hover: var(--six-color-web-rock-800);
+  --six-date-cell-outdated-color: var(--six-color-web-rock-700);
+
+  --six-dialog-color: var(--six-color-web-rock-200);
+
+  --six-logo-bme-color: var(--six-color-web-rock-600);
+
+  --six-language-switcher-color-hover: var(--six-color-web-rock-400);
+  --six-language-switcher-color-selected: var(--six-color-white);
+
+  --six-button-transparent-background-color-hover: var(--six-color-web-rock-900);
+  --six-button-secondary-border-color: var(--six-color-web-rock-100);
+  --six-button-secondary-color: var(--six-color-web-rock-100);
+  --six-button-primary-background-color: var(--six-color-web-rock-50);
+  --six-button-primary-background-color-hover: var(--six-color-web-rock-300);
+  --six-button-primary-background-color-active: var(--six-color-web-rock-400);
+  --six-button-primary-color: var(--six-color-black);
+  --six-button-background-color-disabled: var(--six-color-web-rock-600);
+  --six-button-border-color-disabled: var(--six-color-web-rock-600);
+  --six-button-color-disabled: var(--six-color-web-rock-400);
+
+  --six-input-background-color: var(--six-color-web-rock-900);
+  --six-input-background-color-hover: var(--six-color-web-rock-800);
+  --six-input-background-color-focus: var(--six-color-web-rock-800);
+  --six-input-background-color-disabled: var(--six-color-web-rock-700);
+  --six-input-border-color: var(--six-color-web-rock-500);
+  --six-input-border-color-hover: var(--six-color-web-rock-100);
+  --six-input-border-color-focus: var(--six-color-action-600);
+  --six-input-border-color-danger: var(--six-color-danger-800);
+  --six-input-border-color-disabled: var(--six-color-web-rock-500);
+  --six-input-color: var(--six-color-web-rock-50);
+  --six-input-color-hover: var(--six-color-web-rock-50);
+  --six-input-color-focus: var(--six-color-web-rock-50);
+  --six-input-color-disabled: var(--six-color-web-rock-600);
+  --six-input-icon-color: var(--six-color-web-rock-100);
+  --six-input-icon-color-hover: var(--six-color-web-rock-500);
+  --six-input-icon-color-focus: var(--six-color-web-rock-100);
+  --six-input-placeholder-color: var(--six-color-web-rock-400);
+  --six-input-placeholder-color-disabled: var(--six-color-web-rock-400);
+  --six-input-label-color: var(--six-color-web-rock-300);
+  --six-input-label-color-disabled: var(--six-color-web-rock-500);
+  --six-input-help-text-color: var(--six-color-web-rock-500);
+  --six-input-help-text-color-disabled: var(--six-color-web-rock-600);
+
+  --six-overlay-background-color: var(--six-color-web-rock-900);
+
+  --six-panel-background-color: var(--six-color-web-rock-800);
+  --six-panel-border-color: var(--six-color-clay-50);
+
+  --six-progress-track-color: var(--six-color-web-rock-900);
+  --six-progress-indicator-color: var(--six-color-danger-800);
+  --six-progress-label-color: var(--six-color-white);
+
+  --six-range-track-color: var(--six-color-web-rock-400);
+  --six-range-thumb-color: var(--six-color-web-rock-400);
+  --six-range-color-disabled: var(--six-color-web-rock-900);
+  --six-range-track-color-disabled: var(--six-color-web-rock-900);
+
+  --six-tile-background-color: var(--six-color-web-rock-900);
+  --six-tile-footer-color: var(--six-color-web-rock-100);
+
+  --six-timepicker-background-color: var(--six-color-web-rock-900);
+
+  --six-tooltip-background-color: var(--six-color-web-rock-100);
+  --six-tooltip-color: var(--six-color-black);
+
+  --six-avatar-color: var(--six-color-white);
+  --six-avatar-background-color: var(--six-color-web-rock-800);
+
+  --six-checkbox-color: var(--six-color-white);
+
+  --six-selection-control-color: var(--six-color-action-500);
+  --six-selection-control-color-disabled: var(--six-color-web-rock-400);
+
+  --six-details-color: var(--six-color-web-rock-300);
+  --six-details-body-background-color: var(--six-color-web-rock-800);
+
+  --six-drawer-color: var(--six-color-web-rock-200);
+  --six-drawer-background-color: var(--six-color-web-rock-900);
+
+  --six-footer-background-color: var(--six-color-web-rock-900);
+  --six-footer-color: var(--six-color-web-rock-400);
+
+  --six-header-background-color: var(--six-color-dark-background-color);
+  --six-header-border-color: var(--six-color-dark-background-color);
+  --six-header-border-color-open: var(--six-color-web-rock-800);
+  --six-header-selected-app-color-hover: var(--six-color-web-rock-500);
+
+  --six-menu-divider-color: var(--six-color-web-rock-600);
+  --six-menu-item-background-color: var(--six-color-web-rock-800);
+
+  --six-search-color: var(--six-color-action-600);
+
+  --six-sidebar-color: var(--six-color-web-rock-50);
+  --six-sidebar-background-color: var(--six-color-dark-background-color);
+  --six-sidebar-hover-background-color: var(--six-color-web-rock-900);
+  --six-sidebar-header-background-color: var(--six-color-web-rock-900);
+  --six-sidebar-border-color: var(--six-color-dark-background-color);
+  --six-sidebar-item-color-hover: var(--six-color-web-rock-400);
+
+  --six-tab-color: var(--six-color-web-rock-100);
+  --six-tab-color-active: var(--six-color-web-rock-100);
+  --six-tab-color-hover: var(--six-color-web-rock-300);
+  --six-tab-color-disabled: var(--six-color-web-rock-600);
+  --six-tab-border-color: var(--six-color-black);
+  --six-tab-border-color-active: var(--six-color-web-rock-100);
+
+  --six-rating-color: var(--six-color-web-rock-800);
+  --six-rating-color-active: var(--six-color-success-600);
+
+  --six-root-main-background-color: var(--six-color-web-rock-900);
+
+  --six-scrollbar-background-color: var(--six-color-web-rock-900);
+  --six-scrollbar-thumb-color: var(--six-color-web-rock-700);
+  --six-scrollbar-thumb-hover-color: var(--six-color-web-rock-600);
+
+  /* Firefox, Chrome, Safari, Edge, Opera */
+  scrollbar-color: var(--six-scrollbar-thumb-color) var(--six-scrollbar-background-color);
+
+  /* Safari */
+  &::-webkit-scrollbar-track {
+    background: var(--six-scrollbar-background-color);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--six-scrollbar-thumb-color);
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--six-scrollbar-thumb-hover-color);
+  }
+}