From d1273e99e2b6d306e822db69378104d79b55cfce Mon Sep 17 00:00:00 2001 From: stefan-laux <173835974+stefan-laux@users.noreply.github.com> Date: Thu, 13 Nov 2025 12:24:07 +0100 Subject: [PATCH 01/46] implemented theme functionality in six-root. colors are not yet pretty --- docs/components/six-root.md | 151 ++++++++++- docs/examples/docs-demo-six-root-0.vue | 95 ++++++- .../src/lib/stencil-generated/components.ts | 5 +- .../src/lib/stencil-generated/components.ts | 3 +- libraries/ui-library/src/components.d.ts | 24 ++ .../src/components/six-root/index.html | 101 ++++++- .../src/components/six-root/readme.md | 52 +++- .../src/components/six-root/six-root.tsx | 159 ++++++++++- .../six-root/test/six-root.spec.tsx | 37 ++- .../ui-library/src/global/base/colors.css | 239 ++++++++++++++-- libraries/ui-library/src/global/base/dark.css | 102 +++++++ .../ui-library/src/global/base/light.css | 102 +++++++ package-lock.json | 256 ------------------ 13 files changed, 1018 insertions(+), 308 deletions(-) create mode 100644 libraries/ui-library/src/global/base/dark.css create mode 100644 libraries/ui-library/src/global/base/light.css diff --git a/docs/components/six-root.md b/docs/components/six-root.md index 759d504fe..067f33882 100644 --- a/docs/components/six-root.md +++ b/docs/components/six-root.md @@ -1,6 +1,6 @@ # Root -Six root gives you a [basic layout]() skeleton. +Six root gives you a [basic layout]() skeleton and manages the application theme. ## Basic Layout with all elements @@ -11,11 +11,15 @@ You can remove the content padding by adding `padded="false"` to `six-root`. You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well as provide version information by adding `version="DEV-1.1.2"`to `six-root`. Providing nothing or `PROD` will disable stage indication +## Theme Support + +`six-root` includes built-in theme management. Set the `theme` attribute to `light`, `dark`, or `auto` (follows system preference). + ```html
- + @@ -35,6 +39,11 @@ You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well + + + + + Cat Kittens
cat.kitty.kittens@themCatsBeCool.com Language
 + Theme: Light + Theme: Dark + Theme: Auto Change password Logout @@ -103,7 +115,28 @@ You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well
-

Content

+

Theme Demo

+

+ Current theme: light | Applied theme: + light +

+ +
+ Light Theme + Dark Theme + Auto Theme + Toggle Theme +
+ +

Component Examples

+ +
+ +
+ Primary Button + Secondary Button + +

Content

Show some tasks... Toggle some text... @@ -225,6 +258,7 @@ You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well ); const Select = getElements({ + root: '#app-root', header: 'six-header', leftSidebar: 'six-sidebar[slot="left-sidebar"]', tasksButton: '#show-tasks', @@ -235,8 +269,27 @@ You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well cards: ['six-sidebar[slot="right-sidebar"] six-card'], hamburger: '#menu-button', searchItem: '#search-header-item', + themeToggle: '#theme-toggle', + themeLightBtn: '#theme-light-btn', + themeDarkBtn: '#theme-dark-btn', + themeAutoBtn: '#theme-auto-btn', + themeToggleBtn: '#theme-toggle-btn', + currentThemeSpan: '#current-theme', + appliedThemeSpan: '#applied-theme', + menuThemeLight: '#menu-theme-light', + menuThemeDark: '#menu-theme-dark', + menuThemeAuto: '#menu-theme-auto', }); + const updateThemeDisplay = async () => { + if (window.SixTheme) { + const { theme, appliedTheme } = await window.SixTheme.getTheme(); + Select.currentThemeSpan.textContent = theme; + Select.appliedThemeSpan.textContent = appliedTheme; + Select.themeToggle.setAttribute('name', appliedTheme === 'dark' ? 'light_mode' : 'dark_mode'); + } + }; + Select.hamburger.addEventListener('click', () => Select.leftSidebar.toggleAttribute('open')); Select.leftSidebar.addEventListener('six-sidebar-hide', () => (Select.header.openHamburgerMenu = false)); @@ -257,6 +310,48 @@ You can provide a stage indicator by adding `stage="DEV"` to `six-root` as well Select.textButton.addEventListener('click', () => { Select.textSection.style.display = Select.textSection.style.display === 'none' ? 'block' : 'none'; }); + + Select.themeToggle.addEventListener('click', async () => { + await window.SixTheme.toggle(); + await updateThemeDisplay(); + }); + + Select.themeLightBtn.addEventListener('click', async () => { + await window.SixTheme.setTheme('light'); + await updateThemeDisplay(); + }); + + Select.themeDarkBtn.addEventListener('click', async () => { + await window.SixTheme.setTheme('dark'); + await updateThemeDisplay(); + }); + + Select.themeAutoBtn.addEventListener('click', async () => { + await window.SixTheme.setTheme('auto'); + await updateThemeDisplay(); + }); + + Select.themeToggleBtn.addEventListener('click', async () => { + await window.SixTheme.toggle(); + await updateThemeDisplay(); + }); + + Select.menuThemeLight.addEventListener('click', async () => { + await window.SixTheme.setTheme('light'); + await updateThemeDisplay(); + }); + + Select.menuThemeDark.addEventListener('click', async () => { + await window.SixTheme.setTheme('dark'); + await updateThemeDisplay(); + }); + + Select.menuThemeAuto.addEventListener('click', async () => { + await window.SixTheme.setTheme('auto'); + await updateThemeDisplay(); + }); + + updateThemeDisplay(); })(); + \ 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 @@ + + + \ 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 @@ + + + \ 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 @@ + + + \ 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 @@ + + + \ 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 @@ + + + \ No newline at end of file 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 77813ef64..1aaf5b8f7 100644 --- a/libraries/ui-library-angular/src/lib/stencil-generated/components.ts +++ b/libraries/ui-library-angular/src/lib/stencil-generated/components.ts @@ -1770,6 +1770,37 @@ export declare interface SixTextarea extends Components.SixTextarea { } +@ProxyCmp({ + inputs: ['disabled', 'label', 'size'] +}) +@Component({ + selector: 'six-theme-switcher', + changeDetection: ChangeDetectionStrategy.OnPush, + template: '', + // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property + inputs: ['disabled', 'label', 'size'], + standalone: false +}) +export class SixThemeSwitcher { + protected el: HTMLSixThemeSwitcherElement; + constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { + c.detach(); + this.el = r.nativeElement; + proxyOutputs(this, this.el, ['six-theme-switcher-change']); + } +} + + +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>; +} + + @ProxyCmp({ inputs: ['closeable', 'disableTooltip', 'disabled', 'elevated', 'iconName', 'label', '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 a943e4a3b..1b9f4287d 100644 --- a/libraries/ui-library-angular/src/lib/stencil-generated/index.ts +++ b/libraries/ui-library-angular/src/lib/stencil-generated/index.ts @@ -59,6 +59,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 4a7361191..da4278942 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 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 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 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 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"; @@ -65,6 +65,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"; @@ -889,6 +890,17 @@ export const SixTextarea: StencilReactComponent> }; + +export const SixThemeSwitcher: StencilReactComponent = /*@__PURE__*/ createComponent({ + 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>, onSixTileSelected: EventName> 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 8a44edbca..f169313d7 100644 --- a/libraries/ui-library-vue/src/lib/stencil-generated/components.ts +++ b/libraries/ui-library-vue/src/lib/stencil-generated/components.ts @@ -779,6 +779,16 @@ export const SixTextarea: StencilVueComponent = /*@__PURE__*/ defineContainer('six-theme-switcher', undefined, [ + 'size', + 'disabled', + 'label', + 'six-theme-switcher-change' +], [ + 'six-theme-switcher-change' +]); + + export const SixTile: StencilVueComponent = /*@__PURE__*/ defineContainer('six-tile', undefined, [ 'label', 'iconName', diff --git a/libraries/ui-library/src/components.d.ts b/libraries/ui-library/src/components.d.ts index 79c6b7ff5..135f447ae 100644 --- a/libraries/ui-library/src/components.d.ts +++ b/libraries/ui-library/src/components.d.ts @@ -2365,6 +2365,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 @@ -2700,6 +2721,10 @@ export interface SixTextareaCustomEvent extends CustomEvent { detail: T; target: HTMLSixTextareaElement; } +export interface SixThemeSwitcherCustomEvent extends CustomEvent { + detail: T; + target: HTMLSixThemeSwitcherElement; +} export interface SixTileCustomEvent extends CustomEvent { detail: T; target: HTMLSixTileElement; @@ -3636,6 +3661,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(type: K, listener: (this: HTMLSixThemeSwitcherElement, ev: SixThemeSwitcherCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLSixThemeSwitcherElement, ev: SixThemeSwitcherCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(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; @@ -3764,6 +3810,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; @@ -6190,6 +6237,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) => void; + /** + * The icon button's size. + * @default 'medium' + */ + "size"?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge'; + } /** * @since 1.0 * @status stable @@ -6494,6 +6566,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; @@ -6802,6 +6875,11 @@ declare module "@stencil/core" { * Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27. */ "six-textarea": LocalJSX.SixTextarea & JSXBase.HTMLAttributes; + /** + * @since 5.0 + * @status stable + */ + "six-theme-switcher": LocalJSX.SixThemeSwitcher & JSXBase.HTMLAttributes; /** * @since 1.0 * @status stable 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 ca588fd2e..e0a7cb0ae 100644 --- a/libraries/ui-library/src/components/six-icon-button/readme.md +++ b/libraries/ui-library/src/components/six-icon-button/readme.md @@ -40,6 +40,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 @@ -58,6 +59,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-root/index.html b/libraries/ui-library/src/components/six-root/index.html index 170a8d034..badcb3fba 100644 --- a/libraries/ui-library/src/components/six-root/index.html +++ b/libraries/ui-library/src/components/six-root/index.html @@ -25,7 +25,8 @@

Basic Layout with all elements

Theme Support

six-root includes built-in theme management. Set the theme attribute to - light, dark, or auto (follows system preference). + light, dark, or auto (follows system preference). Use + six-theme-switcher to toggle themes.

@@ -49,9 +50,9 @@

Theme Support

- + - + @@ -65,9 +66,6 @@

Theme Support

Cat Kittens
cat.kitty.kittens@themCatsBeCool.com Language
 - Theme: Light - Theme: Dark - Theme: Auto Change password Logout @@ -127,33 +125,6 @@

Theme Support

-

Compoments Testing:

- - - General - Custom - Advanced - Disabled - - This is the general tab panel. - This is the custom tab panel. - This is the advanced tab panel. - This is a disabled tab panel. - - -

Theme Demo

-

- Current theme: light | Applied theme: - light -

- -
- Light Theme - Dark Theme - Auto Theme - Toggle Theme -
-

Component Examples


@@ -161,6 +132,11 @@

Component Examples


Primary Button Secondary Button +

+ + info + This is an info alert. Toggle the theme using the switcher in the header to see how components adapt. +

Content

@@ -295,27 +271,8 @@

Task

cards: ['six-sidebar[slot="right-sidebar"] six-card'], hamburger: '#menu-button', searchItem: '#search-header-item', - themeToggle: '#theme-toggle', - themeLightBtn: '#theme-light-btn', - themeDarkBtn: '#theme-dark-btn', - themeAutoBtn: '#theme-auto-btn', - themeToggleBtn: '#theme-toggle-btn', - currentThemeSpan: '#current-theme', - appliedThemeSpan: '#applied-theme', - menuThemeLight: '#menu-theme-light', - menuThemeDark: '#menu-theme-dark', - menuThemeAuto: '#menu-theme-auto', }); - const updateThemeDisplay = async () => { - if (window.SixTheme) { - const { theme, appliedTheme } = await window.SixTheme.getTheme(); - Select.currentThemeSpan.textContent = theme; - Select.appliedThemeSpan.textContent = appliedTheme; - Select.themeToggle.setAttribute('name', appliedTheme === 'dark' ? 'light_mode' : 'dark_mode'); - } - }; - Select.hamburger.addEventListener('click', () => Select.leftSidebar.toggleAttribute('open')); Select.leftSidebar.addEventListener('six-sidebar-hide', () => (Select.header.openHamburgerMenu = false)); @@ -336,48 +293,6 @@

Task

Select.textButton.addEventListener('click', () => { Select.textSection.style.display = Select.textSection.style.display === 'none' ? 'block' : 'none'; }); - - Select.themeToggle.addEventListener('click', async () => { - await window.SixTheme.toggle(); - await updateThemeDisplay(); - }); - - Select.themeLightBtn.addEventListener('click', async () => { - await window.SixTheme.setTheme('light'); - await updateThemeDisplay(); - }); - - Select.themeDarkBtn.addEventListener('click', async () => { - await window.SixTheme.setTheme('dark'); - await updateThemeDisplay(); - }); - - Select.themeAutoBtn.addEventListener('click', async () => { - await window.SixTheme.setTheme('auto'); - await updateThemeDisplay(); - }); - - Select.themeToggleBtn.addEventListener('click', async () => { - await window.SixTheme.toggle(); - await updateThemeDisplay(); - }); - - Select.menuThemeLight.addEventListener('click', async () => { - await window.SixTheme.setTheme('light'); - await updateThemeDisplay(); - }); - - Select.menuThemeDark.addEventListener('click', async () => { - await window.SixTheme.setTheme('dark'); - await updateThemeDisplay(); - }); - - Select.menuThemeAuto.addEventListener('click', async () => { - await window.SixTheme.setTheme('auto'); - await updateThemeDisplay(); - }); - - updateThemeDisplay(); })();