forked from Qortal/qortal-ui
AlphaX-Projects
3 years ago
committed by
GitHub
10 changed files with 262 additions and 56 deletions
@ -0,0 +1,4 @@
|
||||
import { html } from 'lit' |
||||
|
||||
export const svgSun = html`<svg height="64px" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;fill-rule:evenodd;clip-rule:evenodd;width: 32px;" version="1.1" viewBox="0 0 64 64" width="64px" xml:space="preserve"><defs><style type="text/css">.str0 {stroke:#FFC106;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:22.9256} .fil1 {fill:none} .fil0 {fill:#FFC106}</style></defs><g id="Layer_x0020_1"><g id="_866321920"><circle class="fil0" r="22.97" transform="matrix(0.543121 0.145529 -0.145529 0.543121 32.0002 31.9993)"/><path class="fil1 str0" d="M32 12.4c0,1.52 0,2 0,2m-9.8 0.63c0.76,1.32 1,1.73 1,1.73m-8.17 5.44c1.32,0.76 1.73,1 1.73,1m-4.36 8.8c1.53,0 2,0 2,0m0.63 9.8c1.32,-0.76 1.73,-1 1.73,-1m5.44 8.17c0.76,-1.32 1,-1.73 1,-1.73m8.8 4.36c0,-1.53 0,-2 0,-2m9.8 -0.63c-0.76,-1.32 -1,-1.73 -1,-1.73m8.17 -5.44c-1.32,-0.76 -1.73,-1 -1.73,-1m4.36 -8.8c-1.53,0 -2,0 -2,0m-0.63 -9.8c-1.32,0.76 -1.73,1 -1.73,1m-5.44 -8.17c-0.76,1.32 -1,1.73 -1,1.73"/></g></g></svg>`; |
||||
export const svgMoon = html `<svg height="32px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve"><g id="Layer_1"/><g id="moon_x5F_fill"><g><path d="M24.633,22.184c-8.188,0-14.82-6.637-14.82-14.82c0-2.695,0.773-5.188,2.031-7.363 C5.02,1.969,0,8.188,0,15.645C0,24.676,7.32,32,16.352,32c7.457,0,13.68-5.023,15.648-11.844 C29.82,21.41,27.328,22.184,24.633,22.184z" style="fill:#4E4E50;"/></g></g></svg>`; |
||||
@ -0,0 +1,39 @@
|
||||
html { |
||||
--white: #ffffff; |
||||
--black: #080808; |
||||
--gray: #c8c8c8; |
||||
--plugback: #ffffff; |
||||
--border: #d0d6de; |
||||
--border2: #dde2e8; |
||||
--copybutton: #707584; |
||||
--sectxt: #576374; |
||||
--vdicon: #707b8a; |
||||
--tradehead: #6a6c75; |
||||
--tradeborder: #666666; |
||||
--tradehave: #555555; |
||||
--txtfieldborder: #666666; |
||||
--txtfieldhoverborder: #00000; |
||||
--relaynodetxt: #646464; |
||||
--chatmenuhover: #eeeeee; |
||||
--chatmenuactive: #ebebeb; |
||||
} |
||||
|
||||
html[theme="dark"] { |
||||
--white: #36393f; |
||||
--black: #f8f8f8; |
||||
--gray: #d8d8d8; |
||||
--plugback: #36393f; |
||||
--border: #fcfcfc; |
||||
--border2: #fdfdfd; |
||||
--copybutton: #d0d6de; |
||||
--sectxt: #bbc3cd; |
||||
--vdicon: #d0d6de; |
||||
--tradehead: #e8ebf0; |
||||
--tradeborder: #cccccc; |
||||
--tradehave: #dddddd; |
||||
--txtfieldborder: #cccccc; |
||||
--txtfieldhoverborder: #ffffff; |
||||
--relaynodetxt: #d4d4d4; |
||||
--chatmenuhover: #666666; |
||||
--chatmenuactive: #6b6b6b; |
||||
} |
||||
@ -0,0 +1,134 @@
|
||||
import { LitElement, html, css } from 'lit' |
||||
import { svgSun, svgMoon } from '../../assets/js/svg.js' |
||||
|
||||
class QortThemeToggle 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` |
||||
:host { |
||||
display: inline-block; |
||||
position: relative; |
||||
width: 54px; |
||||
height: 32px; |
||||
transform: translateY(-2px); |
||||
} |
||||
|
||||
svg { |
||||
width: 32px; |
||||
height: 32px; |
||||
} |
||||
|
||||
input { |
||||
cursor: pointer; |
||||
position: absolute; |
||||
z-index: 1; |
||||
opacity: 0; |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.slider { |
||||
position: absolute; |
||||
cursor: pointer; |
||||
width: 100%; |
||||
height: 16px; |
||||
top: 50%; |
||||
transform: translateY(-50%); |
||||
border-radius: 1rem; |
||||
background-color: var(--graylight); |
||||
transition: all .4s ease; |
||||
} |
||||
|
||||
.icon { |
||||
width: 32px; |
||||
height: 32px; |
||||
display: inline-block; |
||||
position: absolute; |
||||
top: 50%; |
||||
background: var(--graylight); |
||||
border: 2px solid var(--gray); |
||||
border-radius: 50%; |
||||
transition: transform 300ms ease; |
||||
} |
||||
|
||||
:host([theme="light"]) .icon { |
||||
transform: translate(0, -50%); |
||||
} |
||||
|
||||
input:checked ~ .icon, |
||||
:host([theme="dark"]) .icon { |
||||
transform: translate(calc(100% - 18px), -50%); |
||||
} |
||||
|
||||
.moon { |
||||
display: none; |
||||
} |
||||
|
||||
.moon svg { |
||||
transform: scale(0.6); |
||||
} |
||||
|
||||
:host([theme="dark"]) .sun { |
||||
display: none; |
||||
} |
||||
|
||||
:host([theme="dark"]) .moon { |
||||
display: inline-block; |
||||
} |
||||
` |
||||
]; |
||||
|
||||
render() { |
||||
return html` |
||||
<input type="checkbox" @change=${() => this.toggleTheme()}/> |
||||
<div class="slider"></div> |
||||
<div class="icon"> |
||||
<span class="sun">${svgSun}</span> |
||||
<span class="moon">${svgMoon}</span> |
||||
</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('qort-theme-toggle', QortThemeToggle); |
||||
Loading…
Reference in new issue