feat: dark mode

stanislavovsky · Oct 21, 2024 · eda9ba5 · eda9ba5
1 parent b8d1c37
commit eda9ba5
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 6 deletions.
diff --git a/public/bg-dark.png b/public/bg-dark.png
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -46,4 +46,14 @@
 
 #generate-btn:hover {
   background: rgb(255 255 255 / 85%);
+}
+
+@media (prefers-color-scheme: dark) {
+  #generate-btn {
+    background: rgb(0 0 0 / 60%);
+  }
+
+  #generate-btn:hover {
+    background: rgb(0 0 0 / 70%);
+  }
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,12 +4,12 @@ export default function Home() {
   return (
     <div className="tf-bg-blur font-mono">
       <div className="flex h-screen tf-bg-grid">
-        <Image src="/sparkle.png" alt="" className="absolute left-1/10 top-1/6" width={64} height={72} />
-        <Image src="/sparkle1.png" alt="" className="absolute top-1/4 right-1/10" width={67} height={143} />
-        <Image src="/sparkle.png" alt="" className="absolute bottom-1/4 left-1/3" width={64} height={72} />
+        <Image src="/sparkle.png" alt="" className="absolute dark:invert left-1/10 top-1/6" width={64} height={72} />
+        <Image src="/sparkle1.png" alt="" className="absolute dark:invert top-1/4 right-1/10" width={67} height={143} />
+        <Image src="/sparkle.png" alt="" className="absolute dark:invert bottom-1/4 left-1/3" width={64} height={72} />
         <div className="m-auto p-2">
-          <h1 className="tf-logo font-bold text-center text-3xl md:text-5xl lg:text-6xl">TrollFactory</h1>
-          <div className="card bg-wt-50 mt-7 mb-10 md:mb-20">
+          <h1 className="tf-logo text-wt-90 dark-text-bt-70 font-bold text-center text-3xl md:text-5xl lg:text-6xl">TrollFactory</h1>
+          <div className="card bg-wt-50 dark-bg-bt-50 mt-7 mb-10 md:mb-20">
             <div className="card-body p-3 md:p-8">
               <select className="input tf-input tf-input-top text-tf-0 select font-medium text-sm md:text-base text-last-center w-full">
                 <option disabled selected>Dataset</option>

diff --git a/src/app/trollfactory.css b/src/app/trollfactory.css
@@ -12,15 +12,27 @@
   color: var(--color-lavender-amethyst);
 }
 
+.text-wt-90 {
+  color: rgb(255 255 255 / 90%);
+}
+
 .bg-wt-50 {
   background: rgb(255 255 255 / 50%);
 }
 
+@media (prefers-color-scheme: dark) {
+  .dark-bg-bt-50 {
+    background: rgb(0 0 0 / 50%);
+  }
+
+  .dark-text-bt-70 {
+    color: rgb(0 0 0 / 70%);
+  }
+}
 
 /* TrollFactory logo */
 
 .tf-logo {
-  color: rgb(255 255 255 / 90%);
   font-family: 'Lexend Zetta', sans-serif;
   font-optical-sizing: auto;
 }
@@ -40,6 +52,20 @@
   background: rgb(255 255 255 / 80%);
 }
 
+@media (prefers-color-scheme: dark) {
+  .tf-input {
+    background: rgb(255 255 255 / 5%) !important;  /* TODO: don't use !important */
+    transition: all 0.2s;
+  }
+
+  .tf-input:active,
+  .tf-input:focus,
+  .tf-input:focus-within,
+  .tf-input:hover {
+    background: rgb(255 255 255 / 10%) !important;
+  }
+}
+
 .tf-input-top {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
@@ -77,4 +103,15 @@
 
 @keyframes bg-grid-scroll {
   100% { background-position: 150px 150px }
+}
+
+@media (prefers-color-scheme: dark) {
+  .tf-bg-blur {
+    background-image: url('/bg-dark.png');
+  }
+
+  .tf-bg-grid {
+    background-image: linear-gradient(rgb(0 0 0 / 20%) 1px, transparent 1px),
+                      linear-gradient(to right, rgb(0 0 0 / 20%) 1px, transparent 1px);
+  }
 }