Make dark mode configurable

Author: craquet

src/components/FairDOElasticSearch.tsx

@@ -18,6 +18,7 @@ import { ComponentType, useMemo } from "react"
 import "../index.css"
 import "../elastic-ui.css"
 import { TooltipProvider } from "./ui/tooltip"
+import { useAutoDarkMode } from "@/components/utils"
 
 /**
  * All-in-one component for rendering an elastic search UI based on the provided configuration. Includes
@@ -28,16 +29,24 @@ export function FairDOElasticSearch({
     config: rawConfig,
     debug,
     resultView,
-    facetOptionView
+    facetOptionView,
+    dark
 }: {
     /**
      * Make sure the config is either memoized or constant (defined outside any components)
      */
     config: FairDOConfig
     resultView?: ComponentType<ResultViewProps>
     facetOptionView?: ComponentType<OptionViewProps>
+
+    /**
+     * Set to true to enable dark mode. Alternatively, set class="dark" on your html or body element
+     */
+    dark?: boolean
     debug?: boolean
 }) {
+    useAutoDarkMode(dark)
+
     const config = useMemo(() => {
         return new FairDOConfigBuilder(rawConfig)
     }, [rawConfig])

src/components/result/NMRResultView.tsx

@@ -172,7 +172,7 @@ export function NMRResultView({ result, debug }: { result: SearchResult; debug?:
     return (
         <div className={`rfs-m-2 rfs-rounded-lg rfs-border rfs-border-border rfs-p-4 ${exactPidMatch ? "rfs-animate-outline-ping" : ""}`}>
             <div className="rfs-grid rfs-grid-rows-[100px_1fr] rfs-gap-4 rfs-overflow-x-auto md:rfs-max-w-full md:rfs-grid-cols-[200px_1fr] md:rfs-grid-rows-1">
-                <div className="rfs-flex rfs-justify-center rfs-rounded md:rfs-items-center rfs-p-2 dark:rfs-invert">
+                <div className="rfs-flex rfs-justify-center rfs-rounded md:rfs-items-center rfs-p-2 d dark:rfs-invert">
                     {previewImage ? (
                         <img className="md:rfs-size-[200px]" src={previewImage} alt={`Preview for ${title}`} />
                     ) : (

src/components/utils.ts

@@ -0,0 +1,11 @@
+import { useEffect } from "react"
+
+export function useAutoDarkMode(dark?: boolean) {
+    useEffect(() => {
+        if (dark) {
+            document.documentElement.classList.add("dark")
+        } else {
+            document.documentElement.classList.remove("dark")
+        }
+    }, [dark])
+}

src/stories/NMRResultView.stories.tsx

@@ -4,6 +4,7 @@ import { FairDOSearchContext } from "@/components/FairDOSearchContext"
 import { GlobalModalProvider } from "@/components/GlobalModalProvider"
 import { DateTime } from "luxon"
 import { NMRResultView } from "@/components/result/NMRResultView"
+import { TooltipProvider } from "@/components/ui/tooltip"
 
 const meta = {
     component: NMRResultView,
@@ -42,9 +43,11 @@ export const Default: Story = {
                     }
                 }}
             >
-                <GlobalModalProvider>
-                    <Story />
-                </GlobalModalProvider>
+                <TooltipProvider>
+                    <GlobalModalProvider>
+                        <Story />
+                    </GlobalModalProvider>
+                </TooltipProvider>
             </FairDOSearchContext.Provider>
         )
     ]

tailwind.config.js

@@ -3,7 +3,7 @@
 import animatePlugin from "tailwindcss-animate"
 
 export default {
-    darkMode: ["class"],
+    darkMode: ["class", `[class="dark"]`],
     content: ["./src/**/*.{ts,tsx,js,jsx,css}"],
     prefix: "rfs-",
     theme: {