mirror of
https://github.com/khairul169/honey.git
synced 2025-04-28 14:59:32 +07:00
ui: Implement switchable dark theme
This commit is contained in:
Daniel
parent
635689e7fb
commit
1f41b73574
29
css/dark.css
Normal file
29
css/dark.css
Normal 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%);
|
||||
}
|
||||
32
css/main.css
32
css/main.css
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background: #DDD;
|
||||
background: #EEE;
|
||||
color: #222;
|
||||
margin: 0;
|
||||
font-family: Quicksand;
|
||||
@ -21,6 +21,9 @@ body {
|
||||
a {
|
||||
color: #44F;
|
||||
}
|
||||
body.init * {
|
||||
transition: none !important;
|
||||
}
|
||||
.icon {
|
||||
font-family: 'Material Symbols Rounded';
|
||||
font-weight: normal;
|
||||
@ -36,7 +39,7 @@ a {
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
.background, #background {
|
||||
#background img {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@ -44,13 +47,21 @@ a {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
object-fit: cover;
|
||||
transition: all .45s;
|
||||
transition: all .45s !important;
|
||||
}
|
||||
#background .scaled {
|
||||
transform: scale(1.14);
|
||||
}
|
||||
#background.dark > img:last-child {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
#background:not(.dark) > img:first-child {
|
||||
transform: scale(1);
|
||||
}
|
||||
.unloaded {
|
||||
opacity: 0;
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
|
||||
.main {
|
||||
@ -94,7 +105,7 @@ a {
|
||||
}
|
||||
.wrapper {
|
||||
box-shadow: 2px 2px 8px #0003;
|
||||
background: #FFF8;
|
||||
background: #EEE8;
|
||||
padding: 3px;
|
||||
backdrop-filter: blur(16px);
|
||||
border-radius: 24px;
|
||||
@ -105,7 +116,7 @@ a {
|
||||
}
|
||||
.home .wrapper {
|
||||
box-shadow: none;
|
||||
background: #FFF0;
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
}
|
||||
|
||||
@ -113,7 +124,7 @@ a {
|
||||
font-size: 48px;
|
||||
}
|
||||
.appdesc {
|
||||
opacity: .7;
|
||||
opacity: .6;
|
||||
margin: 2px 12px;
|
||||
}
|
||||
.appname.about {
|
||||
@ -126,16 +137,17 @@ a {
|
||||
backdrop-filter: blur(16px);
|
||||
border-radius: 24px;
|
||||
max-width: 480px;
|
||||
background: #FFF8;
|
||||
background: #EEE8;
|
||||
padding: 2px;
|
||||
justify-content: space-between;
|
||||
transition: background .4s;
|
||||
}
|
||||
.buttons > div {
|
||||
padding: 16px;
|
||||
margin: 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 20px;
|
||||
width: calc(100% / 2);
|
||||
width: 100%;
|
||||
transition: all .2s;
|
||||
}
|
||||
.buttons > div:hover {
|
||||
@ -151,7 +163,7 @@ a {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 24px;
|
||||
background: #FFF8;
|
||||
background: #EEE8;
|
||||
margin: 20px;
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
@ -224,7 +236,7 @@ a.box {
|
||||
font-size: 18px;
|
||||
}
|
||||
.box .desc {
|
||||
opacity: .65;
|
||||
opacity: .6;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
|
||||
BIN
img/background-dark.jpg
Normal file
BIN
img/background-dark.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 842 KiB |
12
index.html
12
index.html
@ -6,12 +6,14 @@
|
||||
<title>honey</title>
|
||||
<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/dark.css" id="css_dark" disabled>
|
||||
<script type="text/javascript" src="js/dom.js"></script>
|
||||
<script type="text/javascript" src="js/main.js"></script>
|
||||
</head>
|
||||
<body onload="onload()">
|
||||
<div class="background">
|
||||
<img src="img/background.jpg" id="background" class="unloaded" onload="load_img(this)">
|
||||
<body onload="onload()" class="init">
|
||||
<div id="background">
|
||||
<img class="unloaded" onload="load_img(this)">
|
||||
<img class="unloaded" onload="load_img(this)">
|
||||
</div>
|
||||
<div class="main">
|
||||
<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>
|
||||
<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 class="icon">apps</div>
|
||||
<div class="text">Services</div>
|
||||
|
||||
@ -10,3 +10,7 @@ function for_all(class_name, func) {
|
||||
function load_img(img) {
|
||||
img.classList.remove("unloaded");
|
||||
}
|
||||
function get_background() {
|
||||
let bg = get("background");
|
||||
return bg.children[1-bg.classList.contains("dark")];
|
||||
}
|
||||
26
js/main.js
26
js/main.js
@ -2,7 +2,11 @@ function onload() {
|
||||
for_all("back", (btn) => {
|
||||
btn.onclick = back;
|
||||
});
|
||||
switch_theme(true);
|
||||
setTimeout(() => {
|
||||
back();
|
||||
document.body.classList.remove("init");
|
||||
}, 50)
|
||||
}
|
||||
|
||||
function show(id) {
|
||||
@ -11,9 +15,27 @@ function show(id) {
|
||||
});
|
||||
get(id).classList.remove("hidden");
|
||||
get(id).scrollTop = 0;
|
||||
get("background").classList.remove("scaled");
|
||||
get_background().classList.remove("scaled");
|
||||
}
|
||||
function back() {
|
||||
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";
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user