light theme fixes

src/icons.css

@@ -119,4 +119,16 @@
     mask-repeat: no-repeat;
     -webkit-mask-size: 100% 100%;
     mask-size: 100% 100%;
+}
+
+.material-symbols--globe {
+    display: inline-block;
+    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12q0-.175-.012-.363t-.013-.312q-.125.725-.675 1.2T18 13h-2q-.825 0-1.412-.587T14 11v-1h-4V8q0-.825.588-1.412T12 6h1q0-.575.313-1.012t.762-.713q-.5-.125-1.012-.2T12 4Q8.65 4 6.325 6.325T4 12h5q1.65 0 2.825 1.175T13 16v1h-3v2.75q.5.125.988.188T12 20'/%3E%3C/svg%3E");
+    background-color: currentColor;
+    -webkit-mask-image: var(--svg);
+    mask-image: var(--svg);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-size: 100% 100%;
+    mask-size: 100% 100%;
 }

src/static/imagePageUtils.js

@@ -101,37 +101,37 @@ function getFit() {
   switch (fit) {
     case "contain": {
       FitContain.forEach((item) =>
-        item.classList.add("text-orange-500", "font-bold")
+        item.classList.add("text-orange-400", "font-bold")
       );
       FitCover.forEach((item) =>
-        item.classList.remove("text-orange-500", "font-bold")
+        item.classList.remove("text-orange-400", "font-bold")
       );
       FitFull.forEach((item) =>
-        item.classList.remove("text-orange-500", "font-bold")
+        item.classList.remove("text-orange-400", "font-bold")
       );
       break;
     }
     case "cover": {
       FitContain.forEach((item) =>
-        item.classList.remove("text-orange-500", "font-bold")
+        item.classList.remove("text-orange-400", "font-bold")
       );
       FitCover.forEach((item) =>
-        item.classList.add("text-orange-500", "font-bold")
+        item.classList.add("text-orange-400", "font-bold")
       );
       FitFull.forEach((item) =>
-        item.classList.remove("text-orange-500", "font-bold")
+        item.classList.remove("text-orange-400", "font-bold")
       );
       break;
     }
     case "full": {
       FitContain.forEach((item) =>
-        item.classList.remove("text-orange-500", "font-bold")
+        item.classList.remove("text-orange-400", "font-bold")
       );
       FitCover.forEach((item) =>
-        item.classList.remove("text-orange-500", "font-bold")
+        item.classList.remove("text-orange-400", "font-bold")
       );
       FitFull.forEach((item) =>
-        item.classList.add("text-orange-500", "font-bold")
+        item.classList.add("text-orange-400", "font-bold")
       );
       break;
     }

src/static/tailwind.css

@@ -527,9 +527,6 @@
   .invisible {
     visibility: hidden;
   }
-  .visible {
-    visibility: visible;
-  }
   .absolute {
     position: absolute;
   }
@@ -754,9 +751,6 @@
   .bg-orange-800 {
     background-color: var(--color-orange-800);
   }
-  .bg-orange-800\/50 {
-    background-color: color-mix(in oklab, var(--color-orange-800) 50%, transparent);
-  }
   .bg-orange-950 {
     background-color: var(--color-orange-950);
   }
@@ -806,8 +800,14 @@
   .text-gray-200 {
     color: var(--color-gray-200);
   }
-  .text-orange-500 {
-    color: var(--color-orange-500);
+  .text-gray-200\/75 {
+    color: color-mix(in oklab, var(--color-gray-200) 75%, transparent);
+  }
+  .text-orange-400 {
+    color: var(--color-orange-400);
+  }
+  .text-slate-700 {
+    color: var(--color-slate-700);
   }
   .text-white {
     color: var(--color-white);
@@ -837,6 +837,13 @@
       }
     }
   }
+  .hover\:text-orange-500 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-orange-500);
+      }
+    }
+  }
   .sm\:grid {
     @media (width >= 40rem) {
       display: grid;
@@ -939,16 +946,36 @@
       grid-template-columns: repeat(auto-fill,minmax(20%,1fr));
     }
   }
+  .dark\:block {
+    @media (prefers-color-scheme: dark) {
+      display: block;
+    }
+  }
+  .dark\:hidden {
+    @media (prefers-color-scheme: dark) {
+      display: none;
+    }
+  }
   .dark\:bg-\[\#160606\] {
     @media (prefers-color-scheme: dark) {
       background-color: #160606;
     }
   }
+  .dark\:bg-orange-800\/50 {
+    @media (prefers-color-scheme: dark) {
+      background-color: color-mix(in oklab, var(--color-orange-800) 50%, transparent);
+    }
+  }
   .dark\:text-\[\#f9ebeb\] {
     @media (prefers-color-scheme: dark) {
       color: #f9ebeb;
     }
   }
+  .dark\:text-white {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-white);
+    }
+  }
   .\[\&\:not\(\:fullscreen\)\]\:object-cover {
     &:not(:fullscreen) {
       object-fit: cover;
@@ -1070,6 +1097,17 @@
   -webkit-mask-size: 100% 100%;
   mask-size: 100% 100%;
 }
+.material-symbols--globe {
+  display: inline-block;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12q0-.175-.012-.363t-.013-.312q-.125.725-.675 1.2T18 13h-2q-.825 0-1.412-.587T14 11v-1h-4V8q0-.825.588-1.412T12 6h1q0-.575.313-1.012t.762-.713q-.5-.125-1.012-.2T12 4Q8.65 4 6.325 6.325T4 12h5q1.65 0 2.825 1.175T13 16v1h-3v2.75q.5.125.988.188T12 20'/%3E%3C/svg%3E");
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);

src/static/utils.js

@@ -146,7 +146,7 @@ function getView() {
   const active = document.querySelectorAll(`[data-view="${view}"]`);
   if (active.length > 0) {
     active.forEach((item) => {
-      item.classList.add("text-orange-500");
+      item.classList.add("text-orange-400");
     });
   }
   return view;
@@ -182,7 +182,7 @@ function getImagesPerPage() {
   if (active.length > 0) {
     active.forEach((item) => {
       item.classList.add("underline");
-      item.classList.add("text-orange-500");
+      item.classList.add("text-orange-400");
       item.classList.add("font-bold");
     });
   }
@@ -219,7 +219,7 @@ function getVideosPerPage() {
   if (active.length > 0) {
     active.forEach((item) => {
       item.classList.add("underline");
-      item.classList.add("text-orange-500");
+      item.classList.add("text-orange-400");
       item.classList.add("font-bold");
     });
   }

src/templates/Components/Footer.tsx

@@ -17,17 +17,18 @@ export default function Footer() {
             <p className="text-lg">Find us on:</p>
             <a href="https://github.com/wah-su">
               <img
-                className="object-contain w-8 rounded-full aspect-square"
+                className="object-contain w-8 rounded-full aspect-square block dark:hidden"
+                src="/static/github-mark.png"
+                alt="github"
+              />
+              <img
+                className="object-contain w-8 rounded-full aspect-square hidden dark:block"
                 src="/static/github-mark-white.png"
                 alt="github"
               />
             </a>
-            <a href="https://wah.su">
-              <img
-                className="object-contain w-8 rounded-full aspect-square"
-                src="/static/captive_portal_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.png"
-                alt="website"
-              />
+            <a href="https://wah.su" className="flex items-center justify-center">
+              <div className="material-symbols--globe w-8 h-8 dark:text-white text-slate-700"></div>
             </a>
           </div>
         </div>

src/templates/Components/ImagePageNavigation.tsx

@@ -1,9 +1,9 @@
 export default function ImagePageNav() {
   return (
-    <div className="bg-orange-800/50 rounded-sm p-2 text-white">
+    <div className="text-white dark:text-white bg-orange-800 dark:bg-orange-800/50 rounded-sm p-2">
       <div className="flex gap-4 justify-between items-center">
         <button
-          className="flex justify-center items-center cursor-pointer"
+          className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
           id="nav_prev"
         >
           <div className="material-symbols--navigate-before w-16 h-16"></div>
@@ -12,19 +12,19 @@ export default function ImagePageNav() {
         <div className="flex gap-4 md:gap-8 flex-col md:flex-row">
             <div className="flex gap-4">
               <button
-                className="flex justify-center items-center cursor-pointer"
+                className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
                 id="fit_cover"
               >
                 <div className="material-symbols--crop w-8 h-8"></div>
               </button>
               <button
-                className="flex justify-center items-center cursor-pointer"
+                className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
                 id="fit_contain"
               >
                 <div className="material-symbols--fullscreen-exit w-8 h-8"></div>
               </button>
               <button
-                className="flex justify-center items-center cursor-pointer"
+                className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
                 id="fit_full"
               >
                 <div className="material-symbols--open-in-full w-8 h-8"></div>
@@ -33,13 +33,13 @@ export default function ImagePageNav() {
     
             <div className="flex gap-4">
               <button
-                className="flex justify-center items-center cursor-pointer"
+                className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
                 id="act_download"
               >
                 <div className="material-symbols--download w-8 h-8"></div>
               </button>
               <button
-                className="flex justify-center items-center cursor-pointer"
+                className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
                 id="act_newtab"
               >
                 <div className="material-symbols--open-in-new w-8 h-8"></div>
@@ -48,7 +48,7 @@ export default function ImagePageNav() {
         </div>
         
         <button
-          className="flex justify-center items-center cursor-pointer"
+          className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
           id="nav_next"
         >
           <div className="material-symbols--navigate-next w-16 h-16"></div>

src/templates/Components/PageNavigation.tsx

@@ -7,9 +7,9 @@ export default function PageNav(props: { path: string }) {
   }
 
   return (
-    <div className="bg-orange-800/50 rounded-sm p-2 text-white flex justify-between gap-4 items-center">
+    <div className="text-white dark:text-white bg-orange-800 dark:bg-orange-800/50 rounded-sm p-2 flex justify-between gap-4 items-center">
       <button
-        className="flex justify-center items-center cursor-pointer"
+        className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
         id="nav_prev"
       >
         <div className="material-symbols--navigate-before w-16 h-16"></div>
@@ -21,7 +21,7 @@ export default function PageNav(props: { path: string }) {
               key={`ipp_${item}`}
               className={`${
                 idx > 4 ? "hidden md:block" : ""
-              } cursor-pointer md:text-lg lg:text-xl text-gray-200`}
+              } cursor-pointer md:text-lg lg:text-xl text-gray-200/75 hover:text-orange-500 transition-colors`}
               id="nav_ipp"
               data-ipp={item}
             >
@@ -33,14 +33,14 @@ export default function PageNav(props: { path: string }) {
       <div className="flex">
         <div className="gap-1 hidden xl:flex">
           <button
-            className="flex justify-center items-center cursor-pointer text-gray-200"
+            className="flex justify-center items-center cursor-pointer text-gray-200/75 hover:text-orange-500 transition-colors"
             id="nav_view"
             data-view="grid"
           >
             <div className="material-symbols--grid-on w-8 h-8"></div>
           </button>
           <button
-            className="flex justify-center items-center cursor-pointer text-gray-200"
+            className="flex justify-center items-center cursor-pointer text-gray-200/75 hover:text-orange-500 transition-colors"
             id="nav_view"
             data-view="masonry"
           >
@@ -48,7 +48,7 @@ export default function PageNav(props: { path: string }) {
           </button>
         </div>
         <button
-          className="flex justify-center items-center cursor-pointer"
+          className="flex justify-center items-center cursor-pointer hover:text-orange-500 transition-colors"
           id="nav_next"
         >
           <div className="material-symbols--navigate-next w-16 h-16"></div>

src/templates/index.tsx

@@ -5,7 +5,7 @@ import PlaceholderVid from "./Components/PlaceHolderVid";
 export default function IndexPage() {
   return (
     <div>
-      <p className="text-4xl bg-orange-800/50 rounded-sm p-4">Images</p>
+      <p className="text-4xl text-white dark:text-white bg-orange-800 dark:bg-orange-800/50 rounded-sm p-4">Images</p>
       <div
         id="index_images"
         className="mt-2 mb-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
@@ -20,7 +20,7 @@ export default function IndexPage() {
         })}
         <AllLink location="/images/" text="View All Images" />
       </div>
-      <p className="text-4xl bg-orange-800/50 rounded-sm p-4">Videos</p>
+      <p className="text-4xl text-white dark:text-white bg-orange-800 dark:bg-orange-800/50 rounded-sm p-4">Videos</p>
       <div
         id="index_videos"
         className="mt-2 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"