From a9c029164f660f0d97a88703be9b0b5ccdbf0335 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Sun, 19 May 2024 19:12:48 +0500
Subject: [PATCH] feat: page dark mode
---
index.html | 21 ++++++++--------
public/js/cards.js | 2 +-
public/js/theme.js | 1 -
public/output.css | 60 ++++++++++++++++++++++++++++++++++++++++++++++
4 files changed, 72 insertions(+), 12 deletions(-)
diff --git a/index.html b/index.html
index f71584d..353936f 100644
--- a/index.html
+++ b/index.html
@@ -8,18 +8,19 @@
<link href="/public/output.css" rel="stylesheet" />
</head>
-<body class="light" id="body">
+<body class="light dark:bg-slate-900" id="body">
<header class="shadow-lg pt-4 pb-6 sticky top-0 left-0 bg-slate-50 dark:bg-slate-800">
<div class="flex flex-row gap-2 items-center container max-w-[1440px] justify-between px-4">
<div><img src="/public/images/logo-light.svg" alt="wah.su" id="logo" /></div>
<div>
<a href="https://status.wah.su" class="flex flex-row items-center gap-2" target="_blank">
- <div class="bg-green-500 w-4 h-4 rounded-full hidden" id="status-up-icon"></div>
- <div class="bg-yellow-400 w-4 h-4 rounded-full hidden" id="status-degraded-icon"></div>
- <div class="bg-red-600 w-4 h-4 rounded-full hidden" id="status-down-icon"></div>
- <p class="hidden" id="status-up-text">All Systems Operational.</p>
- <p class="hidden" id="status-degraded-text">Degraded Services.</p>
- <p class="hidden" id="status-down-text">All Systems Down.</p>
+ <div class="bg-green-500 dark:bg-green-400 w-4 h-4 rounded-full hidden" id="status-up-icon"></div>
+ <div class="bg-yellow-400 dark:bg-yellow-200 w-4 h-4 rounded-full hidden" id="status-degraded-icon">
+ </div>
+ <div class="bg-red-600 dark:bg-red-500 w-4 h-4 rounded-full hidden" id="status-down-icon"></div>
+ <p class="hidden dark:text-slate-50" id="status-up-text">All Systems Operational.</p>
+ <p class="hidden dark:text-slate-50" id="status-degraded-text">Degraded Services.</p>
+ <p class="hidden dark:text-slate-50" id="status-down-text">All Systems Down.</p>
</a>
</div>
<div class="flex flex-row items-center justify-center gap-6">
@@ -45,9 +46,9 @@
</header>
<div class="container max-w-[1440px] mt-14 text-center px-4">
- <h1 class="font-bold text-8xl text-gray-800">Welcome to wah.su!</h1>
+ <h1 class="font-bold text-8xl text-gray-800 dark:text-slate-200">Welcome to wah.su!</h1>
<!--noformat-->
- <p class="max-w-[840px] mx-auto mt-6 text-gray-700 text-left whitespace-pre">
+ <p class="max-w-[840px] mx-auto mt-6 text-gray-700 dark:text-slate-300 text-left whitespace-pre">
Looking for a cozy, reliable den away from tech companies? You've come to the right place!
wah.su is all about providing a safe and stable environment for your projects.
@@ -58,7 +59,7 @@
</div>
<div class="container max-w-[1440px] mt-14 px-4 py-4">
- <h1 class="font-bold text-4xl mb-4 text-gray-800">Currently hosting</h1>
+ <h1 class="font-bold text-4xl mb-4 text-gray-800 dark:text-slate-200">Currently hosting</h1>
<div class="flex flex-row gap-2 flex-wrap" id="services">
</div>
</div>
diff --git a/public/js/cards.js b/public/js/cards.js
index 00a6776..6e4489a 100644
--- a/public/js/cards.js
+++ b/public/js/cards.js
@@ -32,7 +32,7 @@ const cards = [
const services = document.getElementById("services");
function renderCards() {
- const theme = document.getElementById("body").classList[0];
+ const theme = localStorage.getItem("theme");
services.innerHTML = "";
for (let index = 0; index < cards.length; index++) {
const image_name = cards[index].image.split(".")[0];
diff --git a/public/js/theme.js b/public/js/theme.js
index d5d705f..9480cad 100644
--- a/public/js/theme.js
+++ b/public/js/theme.js
@@ -14,7 +14,6 @@ const setTheme = (theme) => {
function updateTheme() {
let theme = localStorage.getItem("theme");
- console.log("updatingTheme", theme);
if (theme) {
setTheme(theme);
} else {
diff --git a/public/output.css b/public/output.css
index 30d9a4d..7c82306 100644
--- a/public/output.css
+++ b/public/output.css
@@ -2014,6 +2014,36 @@ input:checked + .toggle-bg {
background-color: rgb(30 41 59 / var(--tw-bg-opacity));
}
+.dark\:bg-green-300:where(.dark, .dark *) {
+ --tw-bg-opacity: 1;
+ background-color: rgb(132 225 188 / var(--tw-bg-opacity));
+}
+
+.dark\:bg-green-400:where(.dark, .dark *) {
+ --tw-bg-opacity: 1;
+ background-color: rgb(49 196 141 / var(--tw-bg-opacity));
+}
+
+.dark\:bg-red-500:where(.dark, .dark *) {
+ --tw-bg-opacity: 1;
+ background-color: rgb(240 82 82 / var(--tw-bg-opacity));
+}
+
+.dark\:bg-yellow-200:where(.dark, .dark *) {
+ --tw-bg-opacity: 1;
+ background-color: rgb(252 233 106 / var(--tw-bg-opacity));
+}
+
+.dark\:bg-red-400:where(.dark, .dark *) {
+ --tw-bg-opacity: 1;
+ background-color: rgb(249 128 128 / var(--tw-bg-opacity));
+}
+
+.dark\:bg-slate-900:where(.dark, .dark *) {
+ --tw-bg-opacity: 1;
+ background-color: rgb(15 23 42 / var(--tw-bg-opacity));
+}
+
.dark\:text-blue-500:where(.dark, .dark *) {
--tw-text-opacity: 1;
color: rgb(63 131 248 / var(--tw-text-opacity));
@@ -2034,6 +2064,36 @@ input:checked + .toggle-bg {
color: rgb(209 213 219 / var(--tw-text-opacity));
}
+.dark\:text-slate-50:where(.dark, .dark *) {
+ --tw-text-opacity: 1;
+ color: rgb(248 250 252 / var(--tw-text-opacity));
+}
+
+.dark\:text-slate-100:where(.dark, .dark *) {
+ --tw-text-opacity: 1;
+ color: rgb(241 245 249 / var(--tw-text-opacity));
+}
+
+.dark\:text-slate-300:where(.dark, .dark *) {
+ --tw-text-opacity: 1;
+ color: rgb(203 213 225 / var(--tw-text-opacity));
+}
+
+.dark\:text-slate-200:where(.dark, .dark *) {
+ --tw-text-opacity: 1;
+ color: rgb(226 232 240 / var(--tw-text-opacity));
+}
+
+.dark\:text-slate-500:where(.dark, .dark *) {
+ --tw-text-opacity: 1;
+ color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
+.dark\:text-slate-400:where(.dark, .dark *) {
+ --tw-text-opacity: 1;
+ color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
.dark\:hover\:bg-blue-700:hover:where(.dark, .dark *) {
--tw-bg-opacity: 1;
background-color: rgb(26 86 219 / var(--tw-bg-opacity));