diff --git a/module/build.gradle.kts b/module/build.gradle.kts index 877d65f..acc1ad9 100644 --- a/module/build.gradle.kts +++ b/module/build.gradle.kts @@ -172,7 +172,9 @@ androidComponents.onVariants { variant -> set.add(Pair(root.file("webroot/css/fonts.css").asFile, null)) set.add(Pair(root.file("webroot/assets/mark.svg").asFile, null)) set.add(Pair(root.file("webroot/assets/tick.svg").asFile, null)) - set.add(Pair(root.file("webroot/assets/warning.svg").asFile, null)) + set.add(Pair(root.file("webroot/assets/warn.svg").asFile, null)) + set.add(Pair(root.file("webroot/assets/light.svg").asFile, null)) + set.add(Pair(root.file("webroot/assets/dark.svg").asFile, null)) sig.initSign(privKey) set.forEach { it.first.sha(it.second) } val signFile = root.file(name).asFile diff --git a/webroot/assets/dark.svg b/webroot/assets/dark.svg new file mode 100644 index 0000000..fd03116 --- /dev/null +++ b/webroot/assets/dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/webroot/assets/light.svg b/webroot/assets/light.svg new file mode 100644 index 0000000..4210bd0 --- /dev/null +++ b/webroot/assets/light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/webroot/assets/warning.svg b/webroot/assets/warn.svg similarity index 100% rename from webroot/assets/warning.svg rename to webroot/assets/warn.svg diff --git a/webroot/css/index.css b/webroot/css/index.css index 2d78617..84222f5 100644 --- a/webroot/css/index.css +++ b/webroot/css/index.css @@ -6,6 +6,7 @@ --bright: #8d1d19; --dim: #1d2327; --error: #8d1d19; + --icon: #283136; /* Locked Color */ --lock-desc: #c9c9c9; --lock: #fff; @@ -27,7 +28,10 @@ a { /* Components */ .header { + display: flex; position: fixed; + align-items: center; + justify-content: space-between; left: 0; right: 0; padding: 25px 15px; diff --git a/webroot/index.html b/webroot/index.html index 5dab309..eb87125 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -11,7 +11,12 @@ -
ReZygisk
+
+
ReZygisk
+
+ +
+
diff --git a/webroot/js/init_theme.js b/webroot/js/init_theme.js index 6862ce1..2008d9b 100644 --- a/webroot/js/init_theme.js +++ b/webroot/js/init_theme.js @@ -1,41 +1,43 @@ -(() => { - let sys_theme = localStorage.getItem("system-theme"); - const rootCss = document.querySelector(':root') - window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { - const newColorScheme = event.matches ? "dark" : "light"; - if (sys_theme.lock) return - switch (newColorScheme) { - case "dark": { - rootCss.style.setProperty('--background', '#181c20'); - rootCss.style.setProperty('--font', '#ffffff'); - rootCss.style.setProperty('--desc', '#c9c9c9'); - rootCss.style.setProperty('--spliter', '#283136'); - sys_theme = setData(false, "dark") - return - } - case "light": { - rootCss.style.setProperty('--background', '#eff1f6'); - rootCss.style.setProperty('--font', '#2c2c2c'); - rootCss.style.setProperty('--desc', '#444444'); - rootCss.style.setProperty('--spliter', '#4f6069'); - sys_theme = setData(false, "light") - return - } - } - }); - if (!sys_theme) sys_theme = setData(false, "dark") - if (sys_theme.lock) return - if (sys_theme.mode === "dark") return - if (window.matchMedia && !window.matchMedia('(prefers-color-scheme: dark)').matches) { - rootCss.style.setProperty('--background', '#eff1f6'); - rootCss.style.setProperty('--font', '#2c2c2c'); - rootCss.style.setProperty('--desc', '#444444'); - rootCss.style.setProperty('--spliter', '#4f6069'); - sys_theme = setData(false, "light") - } -})() +const light_icon = ` + + + +` +const rootCss = document.querySelector(':root') +const button = document.getElementById('theme-switcher') +let sys_theme = localStorage.getItem('system-theme') +if (!sys_theme) sys_theme = setData('dark') -function setData(lock, mode) { - localStorage.setItem("system-theme", { lock, mode }); - return localStorage.getItem("system-theme") +if (sys_theme === 'light') setLight() + +button.addEventListener('click', (event) => { + switch (sys_theme) { + case 'dark': setLight(); break; + case 'light': setDark(); break; + } +}); + +function setDark() { + rootCss.style.setProperty('--background', '#181c20') + rootCss.style.setProperty('--font', '#ffffff') + rootCss.style.setProperty('--desc', '#c9c9c9') + rootCss.style.setProperty('--spliter', '#283136') + sys_theme = setData('dark') + button.innerHTML = '' + return +} + +function setLight() { + rootCss.style.setProperty('--background', '#eff1f6') + rootCss.style.setProperty('--font', '#2c2c2c') + rootCss.style.setProperty('--desc', '#444444') + rootCss.style.setProperty('--spliter', '#4f6069') + sys_theme = setData('light') + button.innerHTML = light_icon + return +} + +function setData(mode) { + localStorage.setItem('system-theme', mode) + return localStorage.getItem('system-theme') } \ No newline at end of file diff --git a/webroot/js/main.js b/webroot/js/main.js index ae7667c..23c9cd0 100644 --- a/webroot/js/main.js +++ b/webroot/js/main.js @@ -51,7 +51,7 @@ import { fullScreen, exec, toast } from './kernelsu.js'; rezygisk_settings.removeAttribute('style') rootCss.style.setProperty('--bright', '#ffd000'); - rezygisk_icon_state.innerHTML = '' + rezygisk_icon_state.innerHTML = '' } const modules_list = document.getElementById('modules_list')