diff --git a/css/dark.css b/css/dark.css new file mode 100644 index 0000000..5112739 --- /dev/null +++ b/css/dark.css @@ -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%); +} \ No newline at end of file diff --git a/css/main.css b/css/main.css index 9ee9155..ab87c78 100644 --- a/css/main.css +++ b/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 { +#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; diff --git a/img/background-dark.jpg b/img/background-dark.jpg new file mode 100644 index 0000000..ffe84d8 Binary files /dev/null and b/img/background-dark.jpg differ diff --git a/index.html b/index.html index e8d7af9..bd6850c 100644 --- a/index.html +++ b/index.html @@ -6,12 +6,14 @@ honey + - -
- + +
+ +
+
+
light_mode
+
Theme
+
apps
Services
diff --git a/js/dom.js b/js/dom.js index d7c66d6..0183d02 100644 --- a/js/dom.js +++ b/js/dom.js @@ -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")]; +} \ No newline at end of file diff --git a/js/main.js b/js/main.js index a4be2b4..385ba6e 100644 --- a/js/main.js +++ b/js/main.js @@ -2,7 +2,11 @@ function onload() { for_all("back", (btn) => { btn.onclick = back; }); - 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"; + } } \ No newline at end of file