From d7f49a55e8c2fe9413007959af1c6507b0ee1aa0 Mon Sep 17 00:00:00 2001 From: ChaotiCryptidz Date: Tue, 11 Jan 2022 10:57:30 +0000 Subject: [PATCH] add light theme and theme toggle --- src/ThemeLoader.tsx | 33 +++++++++++++++++++ src/main.tsx | 5 ++- src/playground.tsx | 12 +++++++ src/scss/code.scss | 23 ++++++------- src/scss/{main.scss => main-dark.scss} | 2 +- src/scss/main-light.scss | 4 +++ .../{uikit.scss => uikit/uikit-base.scss} | 25 -------------- src/scss/uikit/uikit-dark.scss | 27 +++++++++++++++ src/scss/uikit/uikit-light.scss | 24 ++++++++++++++ src/settings/Settings.ts | 28 ++++++++++++++++ src/ui/pages/Me.tsx | 13 ++++++++ webpack-dev.config.js | 10 ++++-- webpack.config.js | 2 +- 13 files changed, 164 insertions(+), 44 deletions(-) create mode 100644 src/ThemeLoader.tsx rename src/scss/{main.scss => main-dark.scss} (72%) create mode 100644 src/scss/main-light.scss rename src/scss/{uikit.scss => uikit/uikit-base.scss} (77%) create mode 100644 src/scss/uikit/uikit-dark.scss create mode 100644 src/scss/uikit/uikit-light.scss diff --git a/src/ThemeLoader.tsx b/src/ThemeLoader.tsx new file mode 100644 index 0000000..55ed51c --- /dev/null +++ b/src/ThemeLoader.tsx @@ -0,0 +1,33 @@ +import { Component } from "preact"; +import { settings } from "./globalSettings"; + +// @ts-ignore +import style_dark from "./scss/main-dark.scss" assert {type: "css"}; +// @ts-ignore +import style_light from "./scss/main-light.scss" assert {type: "css"}; + +export const default_theme = "dark"; + +const themes: { [key: string]: string } = { + "dark": style_dark, + "light": style_light, +} + +export class ThemeLoader extends Component<{}, { sheet: string }> { + componentDidMount() { + this.setCorrectStyle(settings.theme); + settings.registerListener((key: string) => { + if (key != "theme") return; + this.setCorrectStyle(settings.theme); + }) + } + + setCorrectStyle(theme: string) { + this.setState({ sheet: themes[theme] }) + } + + render() { + if (!this.state.sheet) return; + return + } +} \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 875fd18..76360d4 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,7 +3,6 @@ // JS & CSS /* eslint-disable */ -import "./scss/main.scss"; import UIkit from "uikit"; // Don't Sort These! import Icons from "uikit/dist/js/uikit-icons"; @@ -32,12 +31,14 @@ import { playground } from "./playground"; import { render } from "preact"; import { settings } from "./globalSettings"; import i18next from "i18next"; +import { ThemeLoader } from "./ThemeLoader"; async function onLoad(): Promise { document.documentElement.dir = settings.pageDirection; render( <> +
@@ -52,8 +53,6 @@ async function onLoad(): Promise { await playground(); } - //await pageRouter.changePage(pageState.currentPage); - setInterval(async () => { console.log(getCurrentUrl()); if (getCurrentUrl() != "/unseal") { diff --git a/src/playground.tsx b/src/playground.tsx index b7371be..7164910 100644 --- a/src/playground.tsx +++ b/src/playground.tsx @@ -1,9 +1,21 @@ +import { settings } from "./globalSettings"; +import { Settings } from "./settings/Settings"; + // Playground is a way to debug and test things. // Anything you put in here is gonna be run on page initial load // before rendering. // Also it only runs when process.env.NODE_ENV == "development" +declare global { + interface Window { + settings: Settings; + } +} + + // Please empty this function before committing. export async function playground(): Promise { console.log("Welcome to Playground!"); + + window.settings = settings; } diff --git a/src/scss/code.scss b/src/scss/code.scss index 67ec692..aff7d95 100644 --- a/src/scss/code.scss +++ b/src/scss/code.scss @@ -1,12 +1,13 @@ .editor { - background-color: #3b4252; - padding: 1em; - margin: 0.5em 0; - overflow: auto; - } - .code-block { - padding-top: 10px !important; - padding-right: 10px !important; - padding-bottom: 10px !important; - padding-left: 10px !important; - } \ No newline at end of file + color: #f8f8f2; + background-color: #3b4252; + padding: 1em; + margin: 0.5em 0; + overflow: auto; +} +.code-block { + padding-top: 10px !important; + padding-right: 10px !important; + padding-bottom: 10px !important; + padding-left: 10px !important; +} \ No newline at end of file diff --git a/src/scss/main.scss b/src/scss/main-dark.scss similarity index 72% rename from src/scss/main.scss rename to src/scss/main-dark.scss index d7be157..8d79c59 100644 --- a/src/scss/main.scss +++ b/src/scss/main-dark.scss @@ -1,4 +1,4 @@ @import "normalize.css/normalize.css"; @import "./code.scss"; @import "./prism-nord.scss"; -@import "./uikit.scss"; +@import "./uikit/uikit-dark.scss"; diff --git a/src/scss/main-light.scss b/src/scss/main-light.scss new file mode 100644 index 0000000..87b91e6 --- /dev/null +++ b/src/scss/main-light.scss @@ -0,0 +1,4 @@ +@import "normalize.css/normalize.css"; +@import "./code.scss"; +@import "./prism-nord.scss"; +@import "./uikit/uikit-light.scss"; diff --git a/src/scss/uikit.scss b/src/scss/uikit/uikit-base.scss similarity index 77% rename from src/scss/uikit.scss rename to src/scss/uikit/uikit-base.scss index 6f31183..d7d1ddc 100644 --- a/src/scss/uikit.scss +++ b/src/scss/uikit/uikit-base.scss @@ -1,28 +1,3 @@ -$global-color: #d8dee9; -$global-emphasis-color: #e5e9f0; -$global-muted-color: #e5e9f0; - -$global-link-color: #5e81ac; -$global-link-hover-color: #88c0d0; - -$global-background: #2e3440; -$global-muted-background: #3b4252; -$global-primary-background: #5e81ac; -$global-secondary-background: #4c566a; - -$global-success-background: #a3be8c; -$global-warning-background: #d08770; -$global-danger-background: #bf616a; - -$button-primary-background: #5e81ac; -$progress-bar-background: #5e81ac; - -$form-radio-background: $global-secondary-background; - -$form-select-option-color: $global-muted-color; - -$form-range-track-background: $global-link-color; -$form-range-track-focus-background: $global-link-hover-color; // Keep these in same order as https://github.com/uikit/uikit/blob/develop/src/scss/components/_import.scss @import "uikit/src/scss/variables.scss"; diff --git a/src/scss/uikit/uikit-dark.scss b/src/scss/uikit/uikit-dark.scss new file mode 100644 index 0000000..968ca05 --- /dev/null +++ b/src/scss/uikit/uikit-dark.scss @@ -0,0 +1,27 @@ +$global-color: #d8dee9; +$global-emphasis-color: #e5e9f0; +$global-muted-color: #e5e9f0; + +$global-link-color: #5e81ac; +$global-link-hover-color: #88c0d0; + +$global-background: #2e3440; +$global-muted-background: #3b4252; +$global-primary-background: #5e81ac; +$global-secondary-background: #4c566a; + +$global-success-background: #a3be8c; +$global-warning-background: #d08770; +$global-danger-background: #bf616a; + +$button-primary-background: #5e81ac; +$progress-bar-background: #5e81ac; + +$form-radio-background: $global-secondary-background; + +$form-select-option-color: $global-muted-color; + +$form-range-track-background: $global-link-color; +$form-range-track-focus-background: $global-link-hover-color; + +@import "./uikit-base.scss"; diff --git a/src/scss/uikit/uikit-light.scss b/src/scss/uikit/uikit-light.scss new file mode 100644 index 0000000..b043656 --- /dev/null +++ b/src/scss/uikit/uikit-light.scss @@ -0,0 +1,24 @@ +$global-color: #4C566A; +$global-emphasis-color: #434C5E; +$global-muted-color: #434C5E; + +$global-link-color: #5e81ac; +$global-link-hover-color: #88c0d0; + +$global-background: #f7f8f9; +$global-muted-background: #D8DEE9; +$global-primary-background: #88C0D0; +$global-secondary-background: #D8DEE9; + +$global-success-background: #a3be8c; +$global-warning-background: #d08770; +$global-danger-background: #bf616a; + +$button-primary-background: #5e81ac; +$progress-bar-background: #5e81ac; + +$form-select-option-color: $global-muted-color; +$form-range-track-background: $global-link-color; +$form-range-track-focus-background: $global-link-hover-color; + +@import "./uikit-base.scss"; \ No newline at end of file diff --git a/src/settings/Settings.ts b/src/settings/Settings.ts index 8256b39..02292eb 100644 --- a/src/settings/Settings.ts +++ b/src/settings/Settings.ts @@ -1,11 +1,26 @@ +import { default_theme } from "../ThemeLoader"; import { StorageType } from "./storage/StorageType"; +type OnChangeListener = (key: string) => void; + export class Settings { constructor() { this.storage = localStorage; + this.listeners = []; } private storage: StorageType; + private listeners: OnChangeListener[]; + + registerListener(listener: OnChangeListener) { + this.listeners.push(listener); + } + + alertChange(key: string) { + for (let listener of this.listeners) { + listener(key); + } + } get apiURL(): string | null { const apiurl = this.storage.getItem("apiURL") || ""; @@ -13,6 +28,7 @@ export class Settings { } set apiURL(value: string) { this.storage.setItem("apiURL", value); + this.alertChange("apiURL"); } get token(): string | null { @@ -21,6 +37,7 @@ export class Settings { } set token(value: string) { this.storage.setItem("token", value); + this.alertChange("token"); } get pageDirection(): string { @@ -28,6 +45,7 @@ export class Settings { } set pageDirection(value: string) { this.storage.setItem("pageDirection", value); + this.alertChange("pageDirection"); } get language(): string { @@ -35,5 +53,15 @@ export class Settings { } set language(value: string) { this.storage.setItem("language", value); + this.alertChange("language"); + } + + get theme(): string { + return this.storage.getItem("theme") || default_theme; + } + + set theme(value: string) { + this.storage.setItem("theme", value); + this.alertChange("theme"); } } diff --git a/src/ui/pages/Me.tsx b/src/ui/pages/Me.tsx index 1f427b3..f45262b 100644 --- a/src/ui/pages/Me.tsx +++ b/src/ui/pages/Me.tsx @@ -5,6 +5,7 @@ import { addClipboardNotifications, setErrorText } from "../../pageUtils"; import { route } from "preact-router"; import ClipboardJS from "clipboard"; import i18next from "i18next"; +import { InputWithTitle } from "../elements/InputWithTitle"; export class CopyLink extends Component<{ text: string; data: string }, unknown> { linkRef = createRef(); @@ -54,6 +55,8 @@ export class Me extends Component { }); } + themeSelectRef = createRef() + render(): JSX.Element { return ( this.state.loaded && ( @@ -106,6 +109,16 @@ export class Me extends Component {
  • {i18next.t("me_set_vault_url_btn")}
    • + + + + ) diff --git a/webpack-dev.config.js b/webpack-dev.config.js index f5b9c0d..93a14de 100644 --- a/webpack-dev.config.js +++ b/webpack-dev.config.js @@ -8,7 +8,6 @@ const { GitRevisionPlugin } = require('git-revision-webpack-plugin'); const gitRevisionPlugin = new GitRevisionPlugin(); let commitHash = gitRevisionPlugin.commithash(); - module.exports = { mode: "development", cache: true, @@ -41,11 +40,16 @@ module.exports = { module: { rules: [ + { + assert: { type: "css" }, + loader: "css-loader", + options: { + exportType: "string", + }, + }, { test: /\.(sa|sc|c)ss$/, use: [ - MiniCssExtractPlugin.loader, - "css-loader", "sass-loader" ], }, diff --git a/webpack.config.js b/webpack.config.js index 2c78c97..7d24b8c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -70,7 +70,7 @@ module.exports = { test: /\.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, - "css-loader", + {loader: "css-loader", options: {exportType: "string"}}, "sass-loader" ], },