Adding automatic theme change
This commit is contained in:
parent
c3f9529feb
commit
ae5257b2b3
@ -1,6 +1,6 @@
|
|||||||
import { h } from "preact";
|
import { h } from "preact";
|
||||||
import { Page } from "../../../page";
|
import { Page } from "../../../page";
|
||||||
import Theme from "../../../theme";
|
import Theme, { ThemeStates } from "../../../theme";
|
||||||
import Navigation from "../../../navigation";
|
import Navigation from "../../../navigation";
|
||||||
import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg";
|
import ArrowLeft from "feather-icons/dist/icons/arrow-left.svg";
|
||||||
|
|
||||||
@ -10,6 +10,7 @@ export default class SettingsPage extends Page<{ state: any }, { vault: string }
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
let active = Theme.active();
|
||||||
return <div>
|
return <div>
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
|
<a class="header-icon-button" onClick={() => history.back()}><ArrowLeft height={undefined} width={undefined} /></a>
|
||||||
@ -17,7 +18,18 @@ export default class SettingsPage extends Page<{ state: any }, { vault: string }
|
|||||||
<span></span>
|
<span></span>
|
||||||
</header>
|
</header>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<button class="btn" onClick={() => Theme.toggle()}>Toggle Dark Mode</button>
|
<div className="input-group">
|
||||||
|
<label>Select Theme: </label>
|
||||||
|
<select class="inp" onChange={(ev) => Theme.change(Number((ev.target as HTMLSelectElement).value))}>
|
||||||
|
{Object.keys(ThemeStates)
|
||||||
|
.filter(e => Number.isNaN(Number(e)))
|
||||||
|
.map(e => <option selected={ThemeStates[e] === active} value={ThemeStates[e]}>{e.charAt(0).toUpperCase() + e.slice(1).toLowerCase()}</option>)}
|
||||||
|
{/* <option value={ThemeStates.AUTO}>Auto</option>
|
||||||
|
<option value={ThemeStates.LIGHT}>Light</option>
|
||||||
|
<option value={ThemeStates.DARK}>Dark</option> */}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
{/* <button class="btn" onClick={() => Theme.toggle()}>Toggle Dark Mode</button> */}
|
||||||
<button class="btn" onClick={() => window.navigator.serviceWorker.controller.postMessage("clear_cache")}>Clear cache</button>
|
<button class="btn" onClick={() => window.navigator.serviceWorker.controller.postMessage("clear_cache")}>Clear cache</button>
|
||||||
</div>
|
</div>
|
||||||
</div >;
|
</div >;
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
margin-top: 0 !important;
|
margin-top: 0 !important;
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
justify-content: end;
|
justify-content: start;
|
||||||
|
|
||||||
>span {
|
>span {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
|
@ -99,17 +99,25 @@ console.log("Dark mode:", Theme.active);
|
|||||||
let err = await Notes.getToken(code)
|
let err = await Notes.getToken(code)
|
||||||
if (err) {
|
if (err) {
|
||||||
Notifications.sendError("Login failed: " + err)
|
Notifications.sendError("Login failed: " + err)
|
||||||
Notes.login()
|
return Notes.login()
|
||||||
} else {
|
} else {
|
||||||
window.history.replaceState(null, document.title, "/" + window.location.hash);
|
window.history.replaceState(null, document.title, "/" + window.location.hash);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
Notes.login()
|
return Notes.login()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
await Notes.start();
|
await Notes.start();
|
||||||
|
|
||||||
|
if (window.navigator.storage && navigator.storage.persist) {
|
||||||
|
navigator.storage.persisted()
|
||||||
|
.then(has => has ? true : navigator.storage.persist())
|
||||||
|
.then(is => {
|
||||||
|
console.log("Persistant Storage:", is);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
Navigation.default = VaultsPage as typeof Page;
|
Navigation.default = VaultsPage as typeof Page;
|
||||||
Navigation.addPage("/vault", VaultPage as typeof Page)
|
Navigation.addPage("/vault", VaultPage as typeof Page)
|
||||||
Navigation.addPage("/demo", DemoPage as typeof Page)
|
Navigation.addPage("/demo", DemoPage as typeof Page)
|
||||||
|
45
src/theme.ts
45
src/theme.ts
@ -1,27 +1,52 @@
|
|||||||
const light = require("!!raw-loader!@hibas123/theme/out/light.css").default;
|
const light = require("!!raw-loader!@hibas123/theme/out/light.css").default;
|
||||||
const dark = require("!!raw-loader!@hibas123/theme/out/dark.css").default;
|
const dark = require("!!raw-loader!@hibas123/theme/out/dark.css").default;
|
||||||
|
|
||||||
let isDark = localStorage.getItem("theme") === "dark";
|
export enum ThemeStates {
|
||||||
|
AUTO,
|
||||||
|
LIGHT,
|
||||||
|
DARK
|
||||||
|
}
|
||||||
|
|
||||||
|
let themeConfig: ThemeStates = Number(localStorage.getItem("theme"));
|
||||||
|
if (Number.isNaN(themeConfig))
|
||||||
|
themeConfig = ThemeStates.AUTO;
|
||||||
|
|
||||||
|
let isDark = false;
|
||||||
|
let mediaIsDark = false;
|
||||||
|
|
||||||
|
if (window.matchMedia) {
|
||||||
|
const mediaq = matchMedia("(prefers-color-scheme: dark)");
|
||||||
|
mediaIsDark = mediaq.matches;
|
||||||
|
mediaq.onchange = ev => {
|
||||||
|
mediaIsDark = ev.matches;
|
||||||
|
apply();
|
||||||
|
}
|
||||||
|
console.log(mediaq);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
let styleElm: HTMLStyleElement;
|
let styleElm: HTMLStyleElement;
|
||||||
|
function apply(force?: boolean) {
|
||||||
function apply() {
|
let shouldDark = themeConfig === ThemeStates.AUTO ? mediaIsDark : themeConfig === ThemeStates.DARK;
|
||||||
|
if (force || shouldDark !== isDark) {
|
||||||
if (styleElm) styleElm.remove();
|
if (styleElm) styleElm.remove();
|
||||||
styleElm = document.createElement("style");
|
styleElm = document.createElement("style");
|
||||||
document.head.appendChild(styleElm);
|
document.head.appendChild(styleElm);
|
||||||
styleElm.innerHTML = isDark ? dark : light;
|
styleElm.innerHTML = shouldDark ? dark : light;
|
||||||
|
isDark = shouldDark;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
apply();
|
apply(true);
|
||||||
|
|
||||||
function toggle() {
|
|
||||||
isDark = !isDark;
|
function change(state: ThemeStates) {
|
||||||
localStorage.setItem("theme", isDark ? "dark" : "light");
|
themeConfig = state;
|
||||||
|
localStorage.setItem("theme", String(themeConfig));
|
||||||
apply();
|
apply();
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
active: () => isDark,
|
active: () => themeConfig,
|
||||||
toggle: () => toggle()
|
change: (state: ThemeStates) => change(state)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user