khairul169/honey
1
0
Fork 0
mirror of https://github.com/khairul169/honey.git synced 2025-04-28 14:59:32 +07:00
Code Issues Actions Packages Projects Releases Wiki Activity

ui: Implement switchable dark theme

Browse Source
This commit is contained in:
Daniel 2023-01-14 12:21:09 +01:00
parent 635689e7fb
commit 1f41b73574
6 changed files with 90 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
css/dark.css Normal file
View File

@ -0,0 +1,29 @@
body {
background: #111;
color: #EEE;
}
a {
color: #BBF;
}
.wrapper {
background: #1118;
}
.buttons {
background: #1118;
}
.buttons > div:hover {
background: #FFF1;
}
.back {
background: #1118;
}
.back .icon:hover {
background: #FFF1;
}
.box:hover {
background: #FFF1;
}
.box .icon {
background: hsl(var(--color), 100%, 22%);
color: hsl(var(--color), 100%, 85%);
}

34
css/main.css
View File

@ -6,7 +6,7 @@
} }
body { body {
background: #DDD; background: #EEE;
color: #222; color: #222;
margin: 0; margin: 0;
font-family: Quicksand; font-family: Quicksand;
@ -21,6 +21,9 @@ body {
a { a {
color: #44F; color: #44F;
} }
body.init * {
transition: none !important;
}
.icon { .icon {
font-family: 'Material Symbols Rounded'; font-family: 'Material Symbols Rounded';
font-weight: normal; font-weight: normal;
@ -36,7 +39,7 @@ a {
-webkit-font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
.background, #background { #background img {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -44,13 +47,21 @@ a {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
object-fit: cover; object-fit: cover;
transition: all .45s; transition: all .45s !important;
} }
#background.scaled { #background .scaled {
transform: scale(1.14); transform: scale(1.14);
} }
#background.dark > img:last-child {
opacity: 0;
transform: scale(1);
}
#background:not(.dark) > img:first-child {
transform: scale(1);
}
.unloaded { .unloaded {
opacity: 0; opacity: 0;
transform: scale(1) !important;
} }
.main { .main {
@ -94,7 +105,7 @@ a {
} }
.wrapper { .wrapper {
box-shadow: 2px 2px 8px #0003; box-shadow: 2px 2px 8px #0003;
background: #FFF8; background: #EEE8;
padding: 3px; padding: 3px;
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-radius: 24px; border-radius: 24px;
@ -105,7 +116,7 @@ a {
} }
.home .wrapper { .home .wrapper {
box-shadow: none; box-shadow: none;
background: #FFF0; background: transparent;
backdrop-filter: none; backdrop-filter: none;
} }
@ -113,7 +124,7 @@ a {
font-size: 48px; font-size: 48px;
} }
.appdesc { .appdesc {
opacity: .7; opacity: .6;
margin: 2px 12px; margin: 2px 12px;
} }
.appname.about { .appname.about {
@ -126,16 +137,17 @@ a {
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
border-radius: 24px; border-radius: 24px;
max-width: 480px; max-width: 480px;
background: #FFF8; background: #EEE8;
padding: 2px; padding: 2px;
justify-content: space-between; justify-content: space-between;
transition: background .4s;
} }
.buttons > div { .buttons > div {
padding: 16px; padding: 16px;
margin: 2px; margin: 2px;
cursor: pointer; cursor: pointer;
border-radius: 20px; border-radius: 20px;
width: calc(100% / 2); width: 100%;
transition: all .2s; transition: all .2s;
} }
.buttons > div:hover { .buttons > div:hover {
@ -151,7 +163,7 @@ a {
width: 64px; width: 64px;
height: 64px; height: 64px;
border-radius: 24px; border-radius: 24px;
background: #FFF8; background: #EEE8;
margin: 20px; margin: 20px;
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
} }
@ -224,7 +236,7 @@ a.box {
font-size: 18px; font-size: 18px;
} }
.box .desc { .box .desc {
opacity: .65; opacity: .6;
} }
.header { .header {
display: flex; display: flex;

BIN
img/background-dark.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 842 KiB

12
index.html
View File

@ -6,12 +6,14 @@
<title>honey</title> <title>honey</title>
<link rel="icon" href="img/icon.png"> <link rel="icon" href="img/icon.png">
<link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/dark.css" id="css_dark" disabled>
<script type="text/javascript" src="js/dom.js"></script> <script type="text/javascript" src="js/dom.js"></script>
<script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/main.js"></script>
</head> </head>
<body onload="onload()"> <body onload="onload()" class="init">
<div class="background"> <div id="background">
<img src="img/background.jpg" id="background" class="unloaded" onload="load_img(this)"> <img class="unloaded" onload="load_img(this)">
<img class="unloaded" onload="load_img(this)">
</div> </div>
<div class="main"> <div class="main">
<div class="page home hidden" id="page-home"> <div class="page home hidden" id="page-home">
@ -22,6 +24,10 @@
<div class="appdesc">Nice and sweet place for all your self-hosted services.</div> <div class="appdesc">Nice and sweet place for all your self-hosted services.</div>
</div> </div>
<div class="buttons"> <div class="buttons">
<div onclick="switch_theme()">
<div class="icon" id="theme-indicator">light_mode</div>
<div class="text">Theme</div>
</div>
<div onclick="show('page-services')"> <div onclick="show('page-services')">
<div class="icon">apps</div> <div class="icon">apps</div>
<div class="text">Services</div> <div class="text">Services</div>

4
js/dom.js
View File

@ -10,3 +10,7 @@ function for_all(class_name, func) {
function load_img(img) { function load_img(img) {
img.classList.remove("unloaded"); img.classList.remove("unloaded");
} }
function get_background() {
let bg = get("background");
return bg.children[1-bg.classList.contains("dark")];
}

26
js/main.js
View File

@ -2,7 +2,11 @@ function onload() {
for_all("back", (btn) => { for_all("back", (btn) => {
btn.onclick = back; btn.onclick = back;
}); });
switch_theme(true);
setTimeout(() => {
back(); back();
document.body.classList.remove("init");
}, 50)
} }
function show(id) { function show(id) {
@ -11,9 +15,27 @@ function show(id) {
}); });
get(id).classList.remove("hidden"); get(id).classList.remove("hidden");
get(id).scrollTop = 0; get(id).scrollTop = 0;
get("background").classList.remove("scaled"); get_background().classList.remove("scaled");
} }
function back() { function back() {
show("page-home"); show("page-home");
get("background").classList.add("scaled"); get_background().classList.add("scaled");
}
var is_dark = false;
function switch_theme(value) {
if (value === undefined) value = !is_dark;
is_dark = value;
get("css_dark").disabled = !is_dark;
let bg_box = get("background").classList;
if (is_dark) {
get("theme-indicator").innerText = "dark_mode";
bg_box.add("dark");
get_background().src = "img/background-dark.jpg";
}
else {
get("theme-indicator").innerText = "light_mode";
bg_box.remove("dark");
get_background().src = "img/background.jpg";
}
} }