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