@dataforsyningen/designsystem
Advanced tools
Comparing version 7.13.3 to 7.14.0
@@ -158,10 +158,13 @@ // src/js/toast.js | ||
} | ||
goDarkHandler(event) { | ||
document.documentElement.dataset.theme = "dark"; | ||
localStorage.setItem(this.localstorageKey, "dark"); | ||
goDarkHandler() { | ||
this.changeTheme("dark"); | ||
} | ||
goLightHandler(event) { | ||
document.documentElement.dataset.theme = "light"; | ||
localStorage.setItem(this.localstorageKey, "light"); | ||
goLightHandler() { | ||
this.changeTheme("light"); | ||
} | ||
changeTheme(theme) { | ||
document.documentElement.dataset.theme = theme; | ||
localStorage.setItem(this.localstorageKey, theme); | ||
this.dispatchEvent(new CustomEvent("themechange", { detail: theme, bubbles: true, composed: true })); | ||
} | ||
checkPreference() { | ||
@@ -168,0 +171,0 @@ const preference = localStorage.getItem(this.localstorageKey); |
{ | ||
"name": "@dataforsyningen/designsystem", | ||
"version": "7.13.3", | ||
"version": "7.14.0", | ||
"description": "Common design system for Klimadatastyrelsen with CSS, icons, UI components, and logo images.", | ||
@@ -5,0 +5,0 @@ "type": "module", |
@@ -0,1 +1,5 @@ | ||
/** | ||
* Custom web component that enables user to switch between light and dark modes | ||
* @fires themechange - An event where event.detail contains a string "light" or "dark" for the respective mode chosen by the user. | ||
*/ | ||
export class ThemeToggle extends HTMLElement { | ||
@@ -65,12 +69,16 @@ | ||
goDarkHandler(event) { | ||
document.documentElement.dataset.theme = 'dark' | ||
localStorage.setItem(this.localstorageKey, 'dark') | ||
goDarkHandler() { | ||
this.changeTheme('dark') | ||
} | ||
goLightHandler(event) { | ||
document.documentElement.dataset.theme = 'light' | ||
localStorage.setItem(this.localstorageKey, 'light') | ||
goLightHandler() { | ||
this.changeTheme('light') | ||
} | ||
changeTheme(theme) { | ||
document.documentElement.dataset.theme = theme | ||
localStorage.setItem(this.localstorageKey, theme) | ||
this.dispatchEvent(new CustomEvent('themechange', {detail: theme, bubbles: true, composed: true})) | ||
} | ||
checkPreference() { | ||
@@ -77,0 +85,0 @@ const preference = localStorage.getItem(this.localstorageKey) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
4654393
3980