Implement dark mode

Author: kachkaev

app/[locale]/layout/locale-switcher-inner.tsx

@@ -34,7 +34,7 @@ function LocaleHighlighter() {
 
   return (
     <span className="pointer-events-none absolute inset-1/2 align-middle">
-      <span className="absolute -left-5 -top-5 h-10 w-10 rounded-full bg-blue-400 opacity-25 group-visited:bg-purple-400 group-hover:bg-red-400 group-active:bg-red-400" />
+      <span className="absolute -left-5 -top-5 h-10 w-10 rounded-full bg-blue-400 opacity-25 group-visited:bg-violet-400 group-hover:bg-red-400 group-active:bg-red-400 dark:group-visited:bg-violet-300" />
     </span>
   );
 }

app/[locale]/photos/page.tsx

@@ -16,7 +16,7 @@ function PhotoSample({ alt }: { alt: string }) {
         alt={alt}
         src="https://farm8.staticflickr.com/7247/7511763574_d528f4ce04_z_d.jpg"
       />
-      <span className="absolute right-[1.5rem] bottom-[.5rem] h-0 w-0 origin-bottom-left -rotate-90 overflow-visible whitespace-nowrap text-sm text-white opacity-80 shadow-md drop-shadow-md">
+      <span className="absolute right-[1.5rem] bottom-[.5rem] h-0 w-0 origin-bottom-left -rotate-90 overflow-visible whitespace-nowrap text-sm !text-white opacity-80 shadow-md drop-shadow-md">
         kachkaev.ru/photos
       </span>
       <span className="absolute inset-x-0 bottom-0 block group-hover:border-t-2 group-hover:border-t-red-500" />

app/[locale]/styles.css

@@ -4,7 +4,7 @@
 
 @layer base {
   html {
-    @apply h-full w-full;
+    @apply h-full w-full dark:bg-zinc-900 dark:text-gray-100;
     font: 14px Helvetica, Arial, "Lucida Grande", sans-serif;
     line-height: 1.4em;
   }
@@ -30,16 +30,15 @@
   }
 
   a {
-    @apply border-b-[1px] border-b-blue-600/20 text-blue-600 no-underline;
-  }
-  a:visited {
-    @apply border-b-violet-800/20 text-violet-800;
+    @apply border-b-[1px] border-b-blue-600/20 text-blue-600 no-underline dark:border-b-blue-400/20 dark:text-blue-400;
   }
+  a:visited,
   a:visited > * {
-    @apply border-b-violet-800/20 text-violet-800;
+    @apply border-b-violet-800/20 text-violet-800 dark:border-b-violet-400/20 dark:text-violet-400;
   }
-  a:hover {
-    @apply border-b-red-600/30 text-red-600;
+  a:hover,
+  a:hover > * {
+    @apply border-b-red-600/30 text-red-600 dark:border-b-red-500/30 dark:text-red-500;
   }
 
   p {