Added foundation for dark theme support

public/js/toggleTheme.js

@@ -0,0 +1,29 @@
+function applyTheme() {
+  if (!("theme" in localStorage)) {
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      localStorage.theme = "dark";
+    } else {
+      localStorage.theme = "light";
+    }
+  }
+
+  if (localStorage.theme === "dark") {
+    document.documentElement.classList.add("dark");
+    document.querySelector("#themeButtonIcon").innerHTML = "light_mode";
+  } else {
+    document.documentElement.classList.remove("dark");
+    document.querySelector("#themeButtonIcon").innerHTML = "dark_mode";
+  }
+}
+
+function toggleTheme() {
+  if (localStorage.theme === "dark") {
+    localStorage.theme = "light";
+  } else {
+    localStorage.theme = "dark";
+  }
+  applyTheme();
+}
+
+applyTheme();
+document.querySelector("#themeButton").onclick = () => toggleTheme();

src/components/AppLayout.tsx

@@ -16,6 +16,7 @@ import {
 } from "redux/appLayoutSlice";
 import { RootState } from "redux/store";
 import ReactTooltip from "react-tooltip";
+import Script from "next/script";
 
 type AppLayoutProps = {
   subPanel?: React.ReactNode;
@@ -44,7 +45,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
   const subPanelOpen = useSelector(
     (state: RootState) => state.appLayout.subPanelOpen
   );
-  
+
   const sensibilitySwipe = 1.1;
 
   const handlers = useSwipeable({
@@ -135,7 +136,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
 
       {/* Background when navbar is opened */}
       <div
-        className={`fixed bg-dark inset-0 transition-opacity duration-500 
+        className={`fixed bg-shade inset-0 transition-opacity duration-500 
         ${turnSubIntoContent ? "z-10" : ""}
         ${
           (mainPanelOpen || subPanelOpen) && isMobile
@@ -188,7 +189,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
 
       {/* Language selection background */}
       <div
-        className={`fixed bg-dark inset-0 transition-all duration-500 z-20 grid place-content-center ${
+        className={`fixed bg-shade inset-0 transition-all duration-500 z-20 grid place-content-center ${
           languagePanelOpen
             ? "bg-opacity-50"
             : "bg-opacity-0 pointer-events-none touch-none"
@@ -198,7 +199,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
         }}
       >
         <div
-          className={`p-10 bg-light rounded-lg shadow-2xl shadow-dark grid gap-4 place-items-center transition-transform ${
+          className={`p-10 bg-light rounded-lg shadow-2xl shadow-shade grid gap-4 place-items-center transition-transform ${
             languagePanelOpen ? "scale-100" : "scale-0"
           }`}
         >
@@ -226,8 +227,10 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
         delayShow={300}
         delayHide={100}
         disable={!mainPanelReduced || isMobile || isCoarse}
-        className="drop-shadow-dark-xl !opacity-100 !bg-light !rounded-lg after:!border-r-light text-left"
+        className="drop-shadow-shade-xl !opacity-100 !bg-light !rounded-lg after:!border-r-light text-left !text-black"
       />
+
+      <Script src="/js/toggleTheme.js" defer />
     </div>
   );
 }

src/components/Button.tsx

@@ -2,6 +2,7 @@ import Link from "next/link";
 import { MouseEventHandler } from "react";
 
 type ButtonProps = {
+  id?: string;
   className?: string;
   href?: string;
   children: React.ReactChild | React.ReactChild[];
@@ -13,13 +14,14 @@ type ButtonProps = {
 export default function Button(props: ButtonProps): JSX.Element {
   const button = (
     <div
+      id={props.id}
       onClick={props.onClick}
       className={`grid place-content-center place-items-center border-[1px] border-dark text-dark rounded-full px-4 pt-[0.4rem] pb-[0.5rem] transition-all  ${
         props.className
       } ${
         props.active
           ? "text-light bg-black drop-shadow-black-lg !border-black cursor-not-allowed"
-          : "cursor-pointer hover:text-light hover:bg-dark hover:drop-shadow-dark-lg active:bg-black active:drop-shadow-black-lg active:border-black"
+          : "cursor-pointer hover:text-light hover:bg-dark hover:drop-shadow-shade-lg active:bg-black active:drop-shadow-black-lg active:border-black"
       }`}
     >
       {props.children}

src/components/Content/ThumbnailHeader.tsx

@@ -26,7 +26,7 @@ export default function ThumbnailHeader(
   return (
     <>
       <div className="grid place-items-center gap-12  mb-12">
-        <div className="drop-shadow-dark-lg">
+        <div className="drop-shadow-shade-lg">
           {content.thumbnail.data ? (
             <Img
               className=" rounded-xl"

src/components/InsetBox.tsx

@@ -8,7 +8,7 @@ export default function InsetBox(props: InsetBoxProps): JSX.Element {
   return (
     <div
       id={props.id}
-      className={`w-full shadow-inner-sm shadow-dark bg-mid rounded-xl p-8 ${props.className}`}
+      className={`w-full shadow-inner-sm shadow-shade bg-mid rounded-xl p-8 ${props.className}`}
     >
       {props.children}
     </div>

src/components/Library/LibraryContentPreview.tsx

@@ -21,7 +21,7 @@ export default function LibraryContentPreview(
 
   return (
     <Link href={"/contents/" + item.slug} passHref>
-      <div className="drop-shadow-dark-xl cursor-pointer grid items-end fine:[--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
+      <div className="drop-shadow-shade-xl cursor-pointer grid items-end fine:[--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform">
         {item.thumbnail.data ? (
           <Img
             className="rounded-md coarse:rounded-b-none"
@@ -31,7 +31,7 @@ export default function LibraryContentPreview(
         ) : (
           <div className="w-full aspect-[3/2] bg-light rounded-lg"></div>
         )}
-        <div className="linearbg-1 fine:drop-shadow-dark-lg fine:absolute coarse:rounded-b-md bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
+        <div className="linearbg-obi fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
           <div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
             {item.type ? (
               <Chip>

src/components/Library/LibraryItemsPreview.tsx

@@ -25,7 +25,7 @@ export default function LibraryItemsPreview(
   return (
     <Link href={"/library/" + item.slug} passHref>
       <div
-        className={`drop-shadow-dark-xl cursor-pointer grid items-end hover:rounded-3xl fine:[--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform ${props.className}`}
+        className={`drop-shadow-shade-xl cursor-pointer grid items-end hover:rounded-3xl fine:[--cover-opacity:0] hover:[--cover-opacity:1] hover:scale-[1.02] transition-transform ${props.className}`}
       >
         {item.thumbnail.data ? (
           <Img
@@ -36,7 +36,7 @@ export default function LibraryItemsPreview(
           <div className="w-full aspect-[21/29.7] bg-light rounded-lg"></div>
         )}
 
-        <div className="linearbg-1 fine:drop-shadow-dark-lg fine:absolute place-items-start bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
+        <div className="linearbg-obi fine:drop-shadow-shade-lg fine:absolute place-items-start bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
           {item.metadata && item.metadata.length > 0 ? (
             <div className="flex flex-row gap-1">
               <Chip>{prettyItemSubType(item.metadata[0])}</Chip>

src/components/PanelComponents/NavOption.tsx

@@ -16,10 +16,10 @@ type NavOptionProps = {
 export default function NavOption(props: NavOptionProps): JSX.Element {
   const router = useRouter();
   const isActive = router.asPath.startsWith(props.url);
-  const divActive = "bg-mid shadow-inner-sm shadow-dark";
+  const divActive = "bg-mid shadow-inner-sm shadow-shade";
   const border =
     "outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent]";
-  const divCommon = `gap-x-5 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid hover:shadow-inner-sm hover:shadow-dark hover:active:shadow-inner hover:active:shadow-dark transition-all ${
+  const divCommon = `gap-x-5 w-full rounded-2xl cursor-pointer p-4 hover:bg-mid hover:shadow-inner-sm hover:shadow-shade hover:active:shadow-inner hover:active:shadow-shade transition-all ${
     props.border ? border : ""
   } ${isActive ? divActive : ""}`;
 

src/components/Panels/MainPanel.tsx

@@ -36,7 +36,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
       {mainPanelReduced && isDesktop ? (
         <div className="grid place-items-center gap-4">
           <Link href="/" passHref>
-            <div className="w-12 cursor-pointer transition-[filter] hover:colorize-dark">
+            <div className="w-12 cursor-pointer transition-[filter] colorize-black hover:colorize-dark">
               <SVG
                 src={"/icons/accords.svg"}
                 alt={"Logo of Accord's Library"}
@@ -55,25 +55,34 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         <div>
           <div className="grid place-items-center">
             <Link href="/" passHref>
-              <div className="w-1/2 cursor-pointer transition-[filter] hover:colorize-dark">
+              <div className="w-1/2 cursor-pointer transition-[filter] colorize-black hover:colorize-dark">
                 <SVG
                   src={"/icons/accords.svg"}
                   alt={"Logo of Accord's Library"}
                 />
               </div>
             </Link>
-            <div
+
-              className="relative mt-5"
+            <h2 className="text-3xl">Accord&rsquo;s Library</h2>
-              onClick={() => dispatch(setLanguagePanelOpen(true))}
+
-            >
+            <div className="flex flex-row flex-wrap gap-2">
-              {router.locale ? (
+              <Button
-                <Button className="absolute right-0 top-[-1.3em] text-xs !py-0.5 !px-2.5">
+                id="themeButton"
+                className="right-0 top-[-1.3em] !py-0.5 !px-2.5"
+              >
+                <span id="themeButtonIcon" className="material-icons !text-sm">
+                  dark_mode
+                </span>
+              </Button>
+
+              {router.locale && (
+                <Button
+                  onClick={() => dispatch(setLanguagePanelOpen(true))}
+                  className="right-0 top-[-1.3em] text-sm !py-0.5 !px-2.5"
+                >
                   {router.locale.toUpperCase()}
                 </Button>
-              ) : (
-                ""
               )}
-              <h2 className="text-3xl">Accord&rsquo;s Library</h2>
             </div>
           </div>
         </div>
@@ -183,7 +192,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
           )}
         </p>
         <a
-          className="transition-[filter] hover:colorize-dark"
+          className="transition-[filter] colorize-black hover:colorize-dark"
           href="https://creativecommons.org/licenses/by-sa/4.0/"
         >
           <div className="mt-4 mb-8 grid grid-flow-col place-content-center gap-1">
@@ -213,7 +222,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
         </p>
         <div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
           <a
-            className="transition-[filter] hover:colorize-dark"
+            className="transition-[filter] colorize-black hover:colorize-dark"
             href="https://github.com/Accords-Library"
             target="_blank"
             rel="noopener noreferrer"
@@ -221,7 +230,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
             <SVG className="w-10" src={"/icons/github-brands.svg"} alt={""} />
           </a>
           <a
-            className="transition-[filter] hover:colorize-dark"
+            className="transition-[filter] colorize-black hover:colorize-dark"
             href="/discord"
             target="_blank"
             rel="noopener noreferrer"

src/pages/_document.tsx

@@ -43,7 +43,7 @@ class MyDocument extends Document {
           <link rel="manifest" href="manifest.json" />
           <meta name="theme-color" content="#FFEDD8" />
         </Head>
-        <body className="bg-light text-black">
+        <body>
           <Main />
           <NextScript />
         </body>

src/pages/contents/[slug]/index.tsx

@@ -28,7 +28,7 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
     <SubPanel>
       <ReturnButton
         href="/contents"
-        title={langui.library_content}
+        title={"Contents"}
         langui={langui}
       />
       <HorizontalLine />

src/pages/library/[slug].tsx

@@ -54,7 +54,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
     <SubPanel>
       <ReturnButton
         href="/library/"
-        title={langui.library_items}
+        title={langui.main_library}
         langui={langui}
       />
       <HorizontalLine />
@@ -116,7 +116,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
   const contentPanel = (
     <ContentPanel width={ContentPanelWidthSizes.large}>
       <div className="grid place-items-center gap-12">
-        <div className="drop-shadow-dark-xl w-full h-[50vh] mobile:h-[80vh] mb-16 relative">
+        <div className="drop-shadow-shade-xl w-full h-[50vh] mobile:h-[80vh] mb-16 relative cursor-pointer">
           {item.thumbnail.data ? (
             <Img
               image={item.thumbnail.data.attributes}
@@ -173,7 +173,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                   key={galleryItem.id}
                   className="relative aspect-square hover:scale-[1.02] transition-transform cursor-pointer"
                 >
-                  <div className="bg-light absolute inset-0 rounded-lg shadow-md"></div>
+                  <div className="bg-light absolute inset-0 rounded-lg drop-shadow-shade-md"></div>
                   <Img
                     className="rounded-lg"
                     image={galleryItem.attributes}
@@ -375,7 +375,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
                 <div
                   id={content.attributes.slug}
                   key={content.id}
-                  className="grid gap-2 px-4 rounded-lg target:bg-mid target:shadow-inner-sm target:shadow-dark target:h-auto target:py-3 target:my-2 target:[--displaySubContentMenu:grid] [--displaySubContentMenu:none]"
+                  className="grid gap-2 px-4 rounded-lg target:bg-mid target:shadow-inner-sm target:shadow-shade target:h-auto target:py-3 target:my-2 target:[--displaySubContentMenu:grid] [--displaySubContentMenu:none]"
                 >
                   <div className="grid gap-4 place-items-center grid-cols-[auto_auto_1fr_auto_12ch] thin:grid-cols-[auto_auto_1fr_auto]">
                     <a href={`#${content.attributes.slug}`}>

src/tailwind.css

@@ -68,6 +68,6 @@
   }
 
   .prose footer > div:target {
-    @apply bg-mid shadow-inner-sm shadow-dark;
+    @apply bg-mid shadow-inner-sm shadow-shade;
   }
 }

tailwind.config.js

@@ -1,13 +1,43 @@
 const plugin = require("tailwindcss/plugin");
 
+/* CONFIG */
+
+const light = { r: 255, g: 237, b: 216 };
+const mid = { r: 240, g: 209, b: 179 };
+const dark = { r: 156, g: 102, b: 68 };
+const shade = { r: 156, g: 102, b: 68 };
+const black = { r: 27, g: 24, b: 17 };
+
+const dark_light = { r: 38, g: 34, b: 30 };
+const dark_mid = { r: 57, g: 45, b: 34 };
+const dark_dark = { r: 192, g: 132, b: 94 };
+const dark_shade = { r: 12, g: 6, b: 4 };
+const dark_black = { r: 235, g: 234, b: 231 };
+
+const breakDektop = { min: "60rem" };
+const breakMobile = { max: "60rem" };
+const breakThin = { max: "25rem" };
+
+/* END CONFIG */
+
 module.exports = {
+  darkMode: "class",
   content: ["./src/**/*.{tsx,ts}"],
   theme: {
     colors: {
-      light: "rgb(255, 237, 216)",
+      light: `rgb(${light.r}, ${light.g}, ${light.b})`,
-      mid: "rgb(240, 209, 179)",
+      mid: `rgb(${mid.r}, ${mid.g}, ${mid.b})`,
-      dark: "rgb(156, 102, 68)",
+      dark: `rgb(${dark.r}, ${dark.g}, ${dark.b})`,
-      black: "rgb(27, 24, 17)",
+      shade: `rgb(${shade.r}, ${shade.g}, ${shade.b})`,
+      black: `rgb(${black.r}, ${black.g}, ${black.b})`,
+
+      // Dark mode
+
+      "dark-light": `rgb(${dark_light.r}, ${dark_light.g}, ${dark_light.b})`,
+      "dark-mid": `rgb(${dark_mid.r}, ${dark_mid.g}, ${dark_mid.b})`,
+      "dark-dark": `rgb(${dark_dark.r}, ${dark_dark.g}, ${dark_dark.b})`,
+      "dark-shade": `rgb(${dark_shade.r}, ${dark_shade.g}, ${dark_shade.b})`,
+      "dark-black": `rgb(${dark_black.r}, ${dark_black.g}, ${dark_black.b})`,
     },
     fontFamily: {
       body: ["Zen Maru Gothic"],
@@ -15,14 +45,15 @@ module.exports = {
       monospace: ["monospace"],
     },
     screens: {
-      desktop: { min: "60rem" },
+      desktop: breakDektop,
-      mobile: { max: "60rem" },
+      mobile: breakMobile,
-      thin: { max: "25rem" },
+      thin: breakThin,
       coarse: { raw: "(pointer: coarse)" },
       fine: { raw: "(pointer: fine)" },
     },
     backgroundImage: {
       paper: "url('/paper.webp')",
+      "dark-paper": "url('/paper.webp')",
     },
     extend: {
       boxShadow: {
@@ -47,20 +78,31 @@ module.exports = {
     plugin(function ({ addUtilities }) {
       addUtilities({
         ".colorize-light": {
-          filter:
+          filter: getFilterRecipe(light),
-            "brightness(0) saturate(100%) invert(98%) sepia(3%) saturate(5426%) hue-rotate(303deg) brightness(108%) contrast(100%)",
         },
         ".colorize-mid": {
-          filter:
+          filter: getFilterRecipe(mid),
-            "brightness(0) saturate(100%) invert(89%) sepia(16%) saturate(829%) hue-rotate(322deg) brightness(103%) contrast(88%)",
         },
         ".colorize-dark": {
-          filter:
+          filter: getFilterRecipe(dark),
-            "brightness(0) saturate(100%) invert(43%) sepia(5%) saturate(4120%) hue-rotate(339deg) brightness(98%) contrast(90%)",
         },
         ".colorize-black": {
-          filter:
+          filter: getFilterRecipe(black),
-            "brightness(0) saturate(100%) invert(7%) sepia(13%) saturate(1156%) hue-rotate(4deg) brightness(103%) contrast(95%)",
+        },
+
+        // Dark mode
+
+        ".colorize-dark-light": {
+          filter: getFilterRecipe(dark_light),
+        },
+        ".colorize-dark-mid": {
+          filter: getFilterRecipe(dark_mid),
+        },
+        ".colorize-dark-dark": {
+          filter: getFilterRecipe(dark_dark),
+        },
+        ".colorize-dark-black": {
+          filter: getFilterRecipe(dark_black),
         },
       });
     }),
@@ -68,39 +110,371 @@ module.exports = {
     // Colored Dropshadow
     plugin(function ({ addUtilities }) {
       addUtilities({
-        ".drop-shadow-dark-lg": {
+        ".drop-shadow-shade-md": {
-          filter:
+          filter: `drop-shadow(0 4px 3px rgb(${shade.r} ${shade.g} ${shade.b} / 0.15)) drop-shadow(0 2px 2px rgb(${shade.r} ${shade.g} ${shade.b} / 0.2))`,
-            "drop-shadow(0 10px 8px rgb(156 102 68 / 0.2)) drop-shadow(0 4px 3px rgb(156 102 68 / 0.4))",
         },
-        ".drop-shadow-dark-xl": {
+        ".drop-shadow-shade-lg": {
-          filter:
+          filter: `drop-shadow(0 10px 8px rgb(${shade.r} ${shade.g} ${shade.b} / 0.2)) drop-shadow(0 4px 3px rgb(${shade.r} ${shade.g} ${shade.b} / 0.4))`,
-            "drop-shadow(0 20px 13px rgb(156 102 68 / 0.25)) drop-shadow(0 8px 5px rgb(156 102 68 / 0.7))",
         },
-        ".drop-shadow-dark-2xl": {
+        ".drop-shadow-shade-xl": {
-          filter: "drop-shadow(0 25px 25px rgb(156 102 68 / 0.8))",
+          filter: `drop-shadow(0 20px 13px rgb(${shade.r} ${shade.g} ${shade.b} / 0.25)) drop-shadow(0 8px 5px rgb(${shade.r} ${shade.g} ${shade.b} / 0.7))`,
+        },
+        ".drop-shadow-shade-2xl": {
+          filter: `drop-shadow(0 25px 25px rgb(${shade.r} ${shade.g} ${shade.b} / 0.8))`,
         },
 
+        ".drop-shadow-black-md": {
+          filter: `drop-shadow(0 4px 3px rgb(${black.r} ${black.g} ${black.b} / 0.15)) drop-shadow(0 2px 2px rgb(${black.r} ${black.g} ${black.b} / 0.2))`,
+        },
         ".drop-shadow-black-lg": {
-          filter:
+          filter: `drop-shadow(0 10px 8px rgb(${black.r} ${black.g} ${black.b} / 0.2)) drop-shadow(0 4px 3px rgb(${black.r} ${black.g} ${black.b} / 0.4))`,
-            "drop-shadow(0 10px 8px rgb(27 24 17 / 0.2)) drop-shadow(0 4px 3px rgb(27 24 17 / 0.4))",
         },
         ".drop-shadow-black-xl": {
-          filter:
+          filter: `drop-shadow(0 20px 13px rgb(${black.r} ${black.g} ${black.b} / 0.25)) drop-shadow(0 8px 5px rgb(${black.r} ${black.g} ${black.b} / 0.7))`,
-            "drop-shadow(0 20px 13px rgb(27 24 17 / 0.25)) drop-shadow(0 8px 5px rgb(27 24 17 / 0.7))",
         },
         ".drop-shadow-black-2xl": {
-          filter: "drop-shadow(0 25px 25px rgb(27 24 17 / 0.8))",
+          filter: `drop-shadow(0 25px 25px rgb(${black.r} ${black.g} ${black.b} / 0.8))`,
+        },
+
+        // Dark mode
+
+        ".drop-shadow-dark-shade-md": {
+          filter: `drop-shadow(0 4px 3px rgb(${dark_shade.r} ${dark_shade.g} ${dark_shade.b} / 0.15)) drop-shadow(0 2px 2px rgb(${dark_shade.r} ${dark_shade.g} ${dark_shade.b} / 0.2))`,
+        },
+        ".drop-shadow-dark-shade-lg": {
+          filter: `drop-shadow(0 10px 8px rgb(${dark_shade.r} ${dark_shade.g} ${dark_shade.b} / 0.2)) drop-shadow(0 4px 3px rgb(${dark_shade.r} ${dark_shade.g} ${dark_shade.b} / 0.4))`,
+        },
+        ".drop-shadow-dark-shade-xl": {
+          filter: `drop-shadow(0 20px 13px rgb(${dark_shade.r} ${dark_shade.g} ${dark_shade.b} / 0.25)) drop-shadow(0 8px 5px rgb(${dark_shade.r} ${dark_shade.g} ${dark_shade.b} / 0.7))`,
+        },
+        ".drop-shadow-dark-shade-2xl": {
+          filter: `drop-shadow(0 25px 25px rgb(${dark_shade.r} ${dark_shade.g} ${dark_shade.b} / 0.8))`,
+        },
+
+        ".drop-shadow-dark-black-md": {
+          filter: `drop-shadow(0 4px 3px rgb(${dark_black.r} ${dark_black.g} ${dark_black.b} / 0.15)) drop-shadow(0 2px 2px rgb(${dark_black.r} ${dark_black.g} ${dark_black.b} / 0.2))`,
+        },
+        ".drop-shadow-dark-black-lg": {
+          filter: `drop-shadow(0 10px 8px rgb(${dark_black.r} ${dark_black.g} ${dark_black.b} / 0.2)) drop-shadow(0 4px 3px rgb(${dark_black.r} ${dark_black.g} ${dark_black.b} / 0.4))`,
+        },
+        ".drop-shadow-dark-black-xl": {
+          filter: `drop-shadow(0 20px 13px rgb(${dark_black.r} ${dark_black.g} ${dark_black.b} / 0.25)) drop-shadow(0 8px 5px rgb(${dark_black.r} ${dark_black.g} ${dark_black.b} / 0.7))`,
+        },
+        ".drop-shadow-dark-black-2xl": {
+          filter: `drop-shadow(0 25px 25px rgb(${dark_black.r} ${dark_black.g} ${dark_black.b} / 0.8))`,
         },
       });
     }),
 
     plugin(function ({ addUtilities }) {
       addUtilities({
-        ".linearbg-1": {
+        ".linearbg-obi": {
           background:
             "linear-gradient(to right, theme('colors.mid'), theme('colors.light') 3%, theme('colors.light') 97%, theme('colors.mid'))",
         },
+        ".linearbg-dark-obi": {
+          background:
+            "linear-gradient(to right, theme('colors.dark-mid'), theme('colors.dark-light') 3%, theme('colors.dark-light') 97%, theme('colors.dark-mid'))",
+        },
       });
     }),
   ],
 };
+
+/*
+The following is taken from https://codepen.io/sosuke/pen/Pjoqqp
+Used for colorizing any element using filters. 
+*/
+
+function getFilterRecipe(rgb) {
+  const color = new FilterColorTransform(rgb.r, rgb.g, rgb.b);
+  const solver = new Solver(color);
+  const result = solver.solve();
+  return result;
+}
+
+class FilterColorTransform {
+  constructor(r, g, b) {
+    this.set(r, g, b);
+  }
+
+  set(r, g, b) {
+    this.r = this.clamp(r);
+    this.g = this.clamp(g);
+    this.b = this.clamp(b);
+  }
+
+  hueRotate(angle = 0) {
+    angle = (angle / 180) * Math.PI;
+    const sin = Math.sin(angle);
+    const cos = Math.cos(angle);
+
+    this.multiply([
+      0.213 + cos * 0.787 - sin * 0.213,
+      0.715 - cos * 0.715 - sin * 0.715,
+      0.072 - cos * 0.072 + sin * 0.928,
+      0.213 - cos * 0.213 + sin * 0.143,
+      0.715 + cos * 0.285 + sin * 0.14,
+      0.072 - cos * 0.072 - sin * 0.283,
+      0.213 - cos * 0.213 - sin * 0.787,
+      0.715 - cos * 0.715 + sin * 0.715,
+      0.072 + cos * 0.928 + sin * 0.072,
+    ]);
+  }
+
+  grayscale(value = 1) {
+    this.multiply([
+      0.2126 + 0.7874 * (1 - value),
+      0.7152 - 0.7152 * (1 - value),
+      0.0722 - 0.0722 * (1 - value),
+      0.2126 - 0.2126 * (1 - value),
+      0.7152 + 0.2848 * (1 - value),
+      0.0722 - 0.0722 * (1 - value),
+      0.2126 - 0.2126 * (1 - value),
+      0.7152 - 0.7152 * (1 - value),
+      0.0722 + 0.9278 * (1 - value),
+    ]);
+  }
+
+  sepia(value = 1) {
+    this.multiply([
+      0.393 + 0.607 * (1 - value),
+      0.769 - 0.769 * (1 - value),
+      0.189 - 0.189 * (1 - value),
+      0.349 - 0.349 * (1 - value),
+      0.686 + 0.314 * (1 - value),
+      0.168 - 0.168 * (1 - value),
+      0.272 - 0.272 * (1 - value),
+      0.534 - 0.534 * (1 - value),
+      0.131 + 0.869 * (1 - value),
+    ]);
+  }
+
+  saturate(value = 1) {
+    this.multiply([
+      0.213 + 0.787 * value,
+      0.715 - 0.715 * value,
+      0.072 - 0.072 * value,
+      0.213 - 0.213 * value,
+      0.715 + 0.285 * value,
+      0.072 - 0.072 * value,
+      0.213 - 0.213 * value,
+      0.715 - 0.715 * value,
+      0.072 + 0.928 * value,
+    ]);
+  }
+
+  multiply(matrix) {
+    const newR = this.clamp(
+      this.r * matrix[0] + this.g * matrix[1] + this.b * matrix[2]
+    );
+    const newG = this.clamp(
+      this.r * matrix[3] + this.g * matrix[4] + this.b * matrix[5]
+    );
+    const newB = this.clamp(
+      this.r * matrix[6] + this.g * matrix[7] + this.b * matrix[8]
+    );
+    this.r = newR;
+    this.g = newG;
+    this.b = newB;
+  }
+
+  brightness(value = 1) {
+    this.linear(value);
+  }
+  contrast(value = 1) {
+    this.linear(value, -(0.5 * value) + 0.5);
+  }
+
+  linear(slope = 1, intercept = 0) {
+    this.r = this.clamp(this.r * slope + intercept * 255);
+    this.g = this.clamp(this.g * slope + intercept * 255);
+    this.b = this.clamp(this.b * slope + intercept * 255);
+  }
+
+  invert(value = 1) {
+    this.r = this.clamp((value + (this.r / 255) * (1 - 2 * value)) * 255);
+    this.g = this.clamp((value + (this.g / 255) * (1 - 2 * value)) * 255);
+    this.b = this.clamp((value + (this.b / 255) * (1 - 2 * value)) * 255);
+  }
+
+  hsl() {
+    // Code taken from https://stackoverflow.com/a/9493060/2688027, licensed under CC BY-SA.
+    const r = this.r / 255;
+    const g = this.g / 255;
+    const b = this.b / 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    let h,
+      s,
+      l = (max + min) / 2;
+
+    if (max === min) {
+      h = s = 0;
+    } else {
+      const d = max - min;
+      s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+      switch (max) {
+        case r:
+          h = (g - b) / d + (g < b ? 6 : 0);
+          break;
+
+        case g:
+          h = (b - r) / d + 2;
+          break;
+
+        case b:
+          h = (r - g) / d + 4;
+          break;
+      }
+      h /= 6;
+    }
+
+    return {
+      h: h * 100,
+      s: s * 100,
+      l: l * 100,
+    };
+  }
+
+  clamp(value) {
+    if (value > 255) {
+      value = 255;
+    } else if (value < 0) {
+      value = 0;
+    }
+    return value;
+  }
+}
+
+class Solver {
+  constructor(target) {
+    this.target = target;
+    this.targetHSL = target.hsl();
+    this.reusedColor = new FilterColorTransform(0, 0, 0);
+  }
+
+  solve() {
+    const result = this.solveNarrow(this.solveWide());
+    return this.css(result.values);
+  }
+
+  solveWide() {
+    const A = 5;
+    const c = 15;
+    const a = [60, 180, 18000, 600, 1.2, 1.2];
+
+    let best = { loss: Infinity };
+    for (let i = 0; best.loss > 25 && i < 3; i++) {
+      const initial = [50, 20, 3750, 50, 100, 100];
+      const result = this.spsa(A, a, c, initial, 1000);
+      if (result.loss < best.loss) {
+        best = result;
+      }
+    }
+    return best;
+  }
+
+  solveNarrow(wide) {
+    const A = wide.loss;
+    const c = 2;
+    const A1 = A + 1;
+    const a = [0.25 * A1, 0.25 * A1, A1, 0.25 * A1, 0.2 * A1, 0.2 * A1];
+    return this.spsa(A, a, c, wide.values, 500);
+  }
+
+  spsa(A, a, c, values, iters) {
+    const alpha = 1;
+    const gamma = 0.16666666666666666;
+
+    let best = null;
+    let bestLoss = Infinity;
+    const deltas = new Array(6);
+    const highArgs = new Array(6);
+    const lowArgs = new Array(6);
+
+    for (let k = 0; k < iters; k++) {
+      const ck = c / Math.pow(k + 1, gamma);
+      for (let i = 0; i < 6; i++) {
+        deltas[i] = Math.random() > 0.5 ? 1 : -1;
+        highArgs[i] = values[i] + ck * deltas[i];
+        lowArgs[i] = values[i] - ck * deltas[i];
+      }
+
+      const lossDiff = this.loss(highArgs) - this.loss(lowArgs);
+      for (let i = 0; i < 6; i++) {
+        const g = (lossDiff / (2 * ck)) * deltas[i];
+        const ak = a[i] / Math.pow(A + k + 1, alpha);
+        values[i] = fix(values[i] - ak * g, i);
+      }
+
+      const loss = this.loss(values);
+      if (loss < bestLoss) {
+        best = values.slice(0);
+        bestLoss = loss;
+      }
+    }
+    return { values: best, loss: bestLoss };
+
+    function fix(value, idx) {
+      let max = 100;
+      if (idx === 2 /* saturate */) {
+        max = 7500;
+      } else if (idx === 4 /* brightness */ || idx === 5 /* contrast */) {
+        max = 200;
+      }
+
+      if (idx === 3 /* hue-rotate */) {
+        if (value > max) {
+          value %= max;
+        } else if (value < 0) {
+          value = max + (value % max);
+        }
+      } else if (value < 0) {
+        value = 0;
+      } else if (value > max) {
+        value = max;
+      }
+      return value;
+    }
+  }
+
+  loss(filters) {
+    // Argument is array of percentages.
+    const color = this.reusedColor;
+    color.set(0, 0, 0);
+
+    color.invert(filters[0] / 100);
+    color.sepia(filters[1] / 100);
+    color.saturate(filters[2] / 100);
+    color.hueRotate(filters[3] * 3.6);
+    color.brightness(filters[4] / 100);
+    color.contrast(filters[5] / 100);
+
+    const colorHSL = color.hsl();
+    return (
+      Math.abs(color.r - this.target.r) +
+      Math.abs(color.g - this.target.g) +
+      Math.abs(color.b - this.target.b) +
+      Math.abs(colorHSL.h - this.targetHSL.h) +
+      Math.abs(colorHSL.s - this.targetHSL.s) +
+      Math.abs(colorHSL.l - this.targetHSL.l)
+    );
+  }
+
+  css(filters) {
+    function fmt(idx, multiplier = 1) {
+      return Math.round(filters[idx] * multiplier);
+    }
+    return `
+    brightness(0)
+    saturate(100%)
+    invert(${fmt(0)}%)
+    sepia(${fmt(1)}%)
+    saturate(${fmt(2)}%)
+    hue-rotate(${fmt(3, 3.6)}deg)
+    brightness(${fmt(4)}%)
+    contrast(${fmt(5)}%);
+    `;
+  }
+}