forked from Qortal/qortal-ui
AlphaX-Projects
1 year ago
committed by
GitHub
1 changed files with 102 additions and 0 deletions
@ -0,0 +1,102 @@
|
||||
import { LitElement, html, css } from 'lit' |
||||
import { get, translate, translateUnsafeHTML } from 'lit-translate' |
||||
import '@polymer/paper-icon-button/paper-icon-button.js' |
||||
import '@polymer/iron-icons/image-icons.js' |
||||
import '@polymer/iron-icons/iron-icons.js' |
||||
|
||||
class ThemeToggle extends LitElement { |
||||
static get properties() { |
||||
return { |
||||
theme: { type: String, reflect: true} |
||||
} |
||||
} |
||||
|
||||
constructor() { |
||||
super() |
||||
this.theme = localStorage.getItem('qortalTheme') ? localStorage.getItem('qortalTheme') : 'light' |
||||
} |
||||
|
||||
static styles = [ |
||||
css` |
||||
* { |
||||
--mdc-theme-primary: rgb(3, 169, 244); |
||||
--mdc-theme-secondary: var(--mdc-theme-primary); |
||||
--mdc-theme-error: rgb(255, 89, 89); |
||||
--lumo-primary-text-color: rgb(0, 167, 245); |
||||
--lumo-primary-color-50pct: rgba(0, 167, 245, 0.5); |
||||
--lumo-primary-color-10pct: rgba(0, 167, 245, 0.1); |
||||
--lumo-primary-color: hsl(199, 100%, 48%); |
||||
--lumo-base-color: var(--white); |
||||
--lumo-body-text-color: var(--black); |
||||
--lumo-secondary-text-color: var(--sectxt); |
||||
--lumo-contrast-60pct: var(--vdicon); |
||||
--item-selected-color: var(--nav-selected-color); |
||||
--item-selected-color-text: var(--nav-selected-color-text); |
||||
--item-color-active: var(--nav-color-active); |
||||
--item-color-hover: var(--nav-color-hover); |
||||
--item-text-color: var(--nav-text-color); |
||||
--item-icon-color: var(--nav-icon-color); |
||||
--item-border-color: var(--nav-border-color); |
||||
--item-border-selected-color: var(--nav-border-selected-color); |
||||
} |
||||
|
||||
paper-icon-button { |
||||
-ms-transform: rotate(120deg); |
||||
transform: rotate(120deg); |
||||
} |
||||
|
||||
:host([theme="light"]) .light-mode { |
||||
display: inline-block; |
||||
} |
||||
|
||||
:host([theme="light"]) .dark-mode { |
||||
display: none; |
||||
} |
||||
|
||||
:host([theme="dark"]) .light-mode { |
||||
display: none; |
||||
} |
||||
|
||||
:host([theme="dark"]) .dark-mode { |
||||
display: inline-block; |
||||
} |
||||
` |
||||
] |
||||
|
||||
render() { |
||||
return html` |
||||
<div style="display: inline;"> |
||||
<paper-icon-button class="light-mode" icon="image:brightness-3" @click=${() => this.toggleTheme()} title="${translate("info.inf18")}"></paper-icon-button> |
||||
<paper-icon-button class="dark-mode" icon="image:wb-sunny" @click=${() => this.toggleTheme()} title="${translate("info.inf17")}"></paper-icon-button> |
||||
</div> |
||||
` |
||||
} |
||||
|
||||
firstUpdated() { |
||||
this.initTheme() |
||||
} |
||||
|
||||
|
||||
toggleTheme() { |
||||
if (this.theme === 'light') { |
||||
this.theme = 'dark' |
||||
} else { |
||||
this.theme = 'light' |
||||
} |
||||
|
||||
this.dispatchEvent(new CustomEvent('qort-theme-change', { |
||||
bubbles: true, |
||||
composed: true, |
||||
detail: this.theme, |
||||
})) |
||||
|
||||
window.localStorage.setItem('qortalTheme', this.theme) |
||||
this.initTheme() |
||||
} |
||||
|
||||
initTheme() { |
||||
document.querySelector('html').setAttribute('theme', this.theme); |
||||
} |
||||
} |
||||
|
||||
window.customElements.define('theme-toggle', ThemeToggle); |
Loading…
Reference in new issue