br0kenpixel/ReZygisk
1
0
Fork 0
mirror of https://github.com/PerformanC/ReZygisk.git synced 2025-09-06 06:37:01 +00:00
Code Issues Packages Projects Releases 1 Wiki Activity

add: light theme with button based

Browse Source
This commit is contained in:
RainyXeon /
2024-06-25 10:08:01 +07:00
committed by ThePedroo
parent 79d9e4c531
commit 1f011eefc3
8 changed files with 57 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
module/build.gradle.kts
View File

@@ -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

1
webroot/assets/dark.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 445 B

1
webroot/assets/light.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 551 B

0
webroot/assets/warning.svg → webroot/assets/warn.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 537 B

After

Width:  |  Height:  |  Size: 537 B

4
webroot/css/index.css
View File

@@ -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;

7
webroot/index.html
View File

@@ -11,7 +11,12 @@
<script src="js/main.js" type="module"></script>
</head>
<body>
<div class="header">ReZygisk</div>
<div class="header">
<div>ReZygisk</div>
<div id="theme-switcher" style="color: black;">
<img src="assets/dark.svg">
</div>
</div>
<div style="padding: 40px 0px;"></div>
<div id="info_card" class="bright card">
<div class="brightc content" style="display: flex; align-items: center;">

80
webroot/js/init_theme.js
View File

@@ -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 = `
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#2c2c2c">
<path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/>
</svg>
`
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 = '<img src="assets/dark.svg">'
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')
}

2
webroot/js/main.js
View File

@@ -51,7 +51,7 @@ import { fullScreen, exec, toast } from './kernelsu.js';
rezygisk_settings.removeAttribute('style')
rootCss.style.setProperty('--bright', '#ffd000');
rezygisk_icon_state.innerHTML = '<img class="brightc" src="assets/warning.svg">'
rezygisk_icon_state.innerHTML = '<img class="brightc" src="assets/warn.svg">'
}
const modules_list = document.getElementById('modules_list')