feat: add functionality to toggle light/dark mode based on user prefe…

…rence (#57)
davidhu2000 · Feb 15, 2023 · 1868ed9 · 1868ed9
1 parent 90dc70c
commit 1868ed9
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="h-full bg-gray-100">
+<html lang="en" class="h-full bg-gray-100 dark:bg-gray-800 dark:text-gray-100">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />

diff --git a/src/components/action-group.tsx b/src/components/action-group.tsx
@@ -44,7 +44,7 @@ export function ActionButton({ label, position, onClick }: ActionButtonProps) {
       onClick={onClick}
       className={`relative ${
         position === "left" ? "" : "-ml-px"
-      } inline-flex items-center ${roundedClass} border border-gray-300 p-2 hover:bg-gray-50`}
+      } inline-flex items-center ${roundedClass} border border-gray-300 p-2 hover:bg-gray-50 hover:dark:bg-gray-700`}
     >
       <Icon className="mr-2 h-5 w-5 text-gray-400" aria-hidden="true" />
       {label[0].toUpperCase()}

diff --git a/src/components/drawer.tsx b/src/components/drawer.tsx
@@ -27,7 +27,7 @@ export function Drawer({ isOpen, handleClose, title, description, children }: Po
                 leaveTo="translate-x-full"
               >
                 <Dialog.Panel className="pointer-events-auto w-screen max-w-4xl">
-                  <div className="flex h-full flex-col overflow-y-scroll bg-white p-6 shadow-xl">
+                  <div className="flex h-full flex-col overflow-y-scroll bg-white dark:bg-gray-900 p-6 shadow-xl">
                     <div className="flex items-center justify-between">
                       <Dialog.Title className="text-lg font-medium text-gray-900">
                         {title}
@@ -39,7 +39,7 @@ export function Drawer({ isOpen, handleClose, title, description, children }: Po
 
                       <button
                         type="button"
-                        className="rounded-md p-2 text-gray-400 hover:bg-gray-200 hover:text-gray-600"
+                        className="rounded-md p-2 text-gray-400 dark:text-gray-200 dark:hover:bg-gray-700 hover:bg-gray-200"
                         onClick={handleClose}
                       >
                         <span className="sr-only">Close</span>

diff --git a/src/components/resource-edit-drawer.tsx b/src/components/resource-edit-drawer.tsx
@@ -3,6 +3,7 @@ import { type V1ObjectMeta } from "@kubernetes/client-node";
 import Editor, { DiffEditor } from "@monaco-editor/react";
 import { useEffect, useState } from "react";
 
+import { useTheme } from "../hooks/use-theme";
 import { Drawer } from "./drawer";
 
 interface ResourceEditDrawerProps<T> {
@@ -20,6 +21,8 @@ export function ResourceEditDrawer<T extends { metadata?: V1ObjectMeta }>({
 
   const [showDiff, setShowDiff] = useState(false);
 
+  const { theme } = useTheme();
+
   useEffect(() => {
     setCode(JSON.stringify(selectedResource, null, 4));
     setShowDiff(false);
@@ -36,7 +39,7 @@ export function ResourceEditDrawer<T extends { metadata?: V1ObjectMeta }>({
             checked={showDiff}
             onChange={setShowDiff}
             className={`${
-              showDiff ? "bg-blue-600" : "bg-gray-200"
+              showDiff ? "bg-blue-600 dark:bg-blue-300" : "bg-gray-200 dark:bg-gray-500"
             } relative inline-flex h-6 w-11 items-center rounded-full`}
           >
             <span className="sr-only">Show Diff</span>
@@ -47,7 +50,9 @@ export function ResourceEditDrawer<T extends { metadata?: V1ObjectMeta }>({
             />
           </Switch>
           <Switch.Label as="span" className="ml-3">
-            <span className="text-sm font-medium text-gray-900">Diff Toggle</span>
+            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
+              Diff Toggle
+            </span>
           </Switch.Label>
         </Switch.Group>
       }
@@ -56,12 +61,14 @@ export function ResourceEditDrawer<T extends { metadata?: V1ObjectMeta }>({
         <DiffEditor
           language="json"
           original={JSON.stringify(selectedResource, null, 4)}
+          theme={theme === "dark" ? "vs-dark" : "light"}
           modified={code}
         />
       ) : (
         <Editor
           defaultLanguage="json"
           defaultValue={code}
+          theme={theme === "dark" ? "vs-dark" : "light"}
           onChange={(code) => setCode(code ?? "")}
         />
       )}

diff --git a/src/components/scale-modal.tsx b/src/components/scale-modal.tsx
@@ -28,17 +28,20 @@ export function ScaleModal({ isOpen, handleClose, deployment }: ModalProps): JSX
 
   return (
     <Dialog as="div" className="relative z-10" onClose={handleClose} open={isOpen}>
-      <div className="fixed inset-0 bg-gray-500/75 transition-opacity" />
+      <div className="fixed inset-0 bg-gray-500/75 transition-opacity dark:bg-gray-400/75" />
 
       <div className="fixed inset-0 z-10 overflow-y-auto">
         <div className="flex min-h-full items-center justify-center p-4 text-center">
-          <Dialog.Panel className="relative rounded-lg bg-gray-100 p-4 text-left shadow-xl">
-            <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+          <Dialog.Panel className="relative rounded-lg bg-gray-100 p-4 text-left shadow-xl dark:bg-gray-900">
+            <Dialog.Title
+              as="h3"
+              className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100"
+            >
               Scale {deployment.metadata?.name}
             </Dialog.Title>
 
             <div className="mt-2">
-              <p className="text-sm text-gray-500">
+              <p className="text-sm text-gray-500 dark:text-gray-400">
                 Current replica count: {deployment.spec?.replicas}
               </p>
             </div>
@@ -47,13 +50,13 @@ export function ScaleModal({ isOpen, handleClose, deployment }: ModalProps): JSX
               onChange={(e) => setReplicas(parseInt(e.target.value ?? ""))}
               type="number"
               value={replicas}
-              className="mt-4 block w-full rounded-md border-gray-300 focus:ring-slate-500"
+              className="mt-4 block w-full rounded-md border-gray-300 focus:ring-slate-500 dark:border-gray-600 dark:bg-gray-800"
               step={1}
               min={0}
             />
 
             <button
-              className="mt-4 w-full rounded-md bg-gray-200 px-4 py-2 text-base text-gray-800 shadow-sm hover:bg-gray-300"
+              className="mt-4 w-full rounded-md bg-gray-200  px-4 py-2 text-base text-gray-800 shadow-sm hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
               onClick={() => scaleMutation.mutate(replicas)}
             >
               Scale

diff --git a/src/components/table.tsx b/src/components/table.tsx
@@ -1,16 +1,20 @@
 export function Table({ children }: { children: React.ReactNode }) {
-  return <table className="min-w-full divide-y divide-gray-300 rounded-md">{children}</table>;
+  return (
+    <table className="min-w-full divide-y divide-gray-300 rounded-md dark:divide-gray-600">
+      {children}
+    </table>
+  );
 }
 
 export function TableHeader({ headers }: { headers: string[] }) {
   return (
-    <thead className="bg-gray-200">
+    <thead className="bg-gray-200 dark:bg-gray-700">
       <tr>
         {headers.map((header) => (
           <th
             key={header}
             scope="col"
-            className="px-6 py-3 text-left text-sm font-bold uppercase text-gray-700"
+            className="px-6 py-3 text-left text-sm font-bold uppercase text-gray-700 dark:text-gray-300"
           >
             {header}
           </th>
@@ -21,12 +25,16 @@ export function TableHeader({ headers }: { headers: string[] }) {
 }
 
 export function TableBody({ children }: { children: React.ReactNode }) {
-  return <tbody className="divide-y divide-gray-200 bg-white">{children}</tbody>;
+  return (
+    <tbody className="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
+      {children}
+    </tbody>
+  );
 }
 
 export function TableCell({ children }: { children: React.ReactNode }) {
   return (
-    <td className="max-w-xs overflow-scroll whitespace-nowrap px-6 py-4 text-sm text-gray-800">
+    <td className="max-w-xs overflow-scroll whitespace-nowrap px-6 py-4 text-sm text-gray-800 dark:text-gray-200">
       {children}
     </td>
   );

diff --git a/src/hooks/use-theme.ts b/src/hooks/use-theme.ts
@@ -0,0 +1,7 @@
+export function useTheme() {
+  const darkThemeMq = window.matchMedia("(prefers-color-scheme: dark)");
+
+  return {
+    theme: darkThemeMq.matches ? "dark" : "light",
+  } as const;
+}
diff --git a/src/layout.tsx b/src/layout.tsx
@@ -20,7 +20,7 @@ export function Layout({ children }: PropsWithChildren) {
 
   return (
     <div>
-      <div className="fixed inset-y-0 flex w-40 flex-col bg-gray-200">
+      <div className="fixed inset-y-0 flex w-40 flex-col bg-gray-200 dark:bg-gray-700">
         <div className="flex h-16 items-center px-4 font-medium">
           {/* TODO: update logo */}
           <DocumentMagnifyingGlassIcon className="mr-2 h-6 w-6" aria-hidden="true" />
@@ -36,7 +36,7 @@ export function Layout({ children }: PropsWithChildren) {
                   <Link
                     key={item.name}
                     to={item.path}
-                    className="group flex items-center rounded-md p-2 text-sm font-medium text-gray-800 hover:bg-gray-400"
+                    className="group flex items-center rounded-md p-2 text-sm font-medium text-gray-800 dark:text-gray-100 hover:bg-gray-400 hover:dark:bg-gray-500"
                   >
                     {item.name}
                   </Link>
@@ -47,11 +47,11 @@ export function Layout({ children }: PropsWithChildren) {
         </div>
       </div>
       <div className="flex flex-col pl-40">
-        <div className="sticky top-0 z-10 flex h-16 w-full shrink-0 items-center justify-between bg-gray-200 p-2 shadow">
+        <div className="sticky top-0 z-10 flex h-16 w-full shrink-0 items-center justify-between bg-gray-200 dark:bg-gray-700 p-2 shadow">
           <NamespaceSelect />
 
           <Cog8ToothIcon
-            className="h-6 w-6 cursor-pointer fill-gray-600 hover:fill-gray-800"
+            className="h-6 w-6 cursor-pointer fill-gray-600 hover:fill-gray-800 dark:fill-gray-400 dark:hover:fill-gray-200"
             onClick={() => setShowSetting(true)}
           />
           <Suspense fallback={<div>Loading Settings</div>}>

diff --git a/src/namespaces/namespace-select.tsx b/src/namespaces/namespace-select.tsx
@@ -19,7 +19,7 @@ export function NamespaceSelect() {
     <Combobox as="div" value={namespace ?? "All namespaces"} onChange={updateNamespace}>
       <div className="relative mt-1">
         <Combobox.Input
-          className="w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 shadow-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500"
+          className="w-full rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 shadow-sm focus:border-slate-500 focus:outline-none focus:ring-1 focus:ring-slate-500 dark:bg-gray-900"
           onChange={(event) => setQuery(event.target.value)}
         />
         <Combobox.Button className="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none">
@@ -33,8 +33,8 @@ export function NamespaceSelect() {
                 key={namespace}
                 value={namespace}
                 className={({ active }) =>
-                  `relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 ${
-                    active ? "bg-gray-200" : ""
+                  `relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 ${
+                    active ? "bg-gray-200 dark:bg-gray-700" : ""
                   }`
                 }
               >
@@ -43,7 +43,7 @@ export function NamespaceSelect() {
                     <span className={`block cursor-pointer truncate`}>{namespace}</span>
 
                     {selected && (
-                      <span className="absolute inset-y-0 right-0 flex items-center pr-4 text-slate-600">
+                      <span className="absolute inset-y-0 right-0 flex items-center pr-4 text-slate-600 dark:text-slate-300">
                         <CheckIcon className="h-5 w-5" aria-hidden="true" />
                       </span>
                     )}

diff --git a/src/settings/settings.tsx b/src/settings/settings.tsx
@@ -3,19 +3,22 @@ import { Dialog } from "@headlessui/react";
 export function Settings({ isOpen, handleClose }: { isOpen: boolean; handleClose: () => void }) {
   return (
     <Dialog as="div" className="relative z-10" onClose={handleClose} open={isOpen}>
-      <div className="fixed inset-0 bg-gray-500/75 transition-opacity" />
+      <div className="fixed inset-0 bg-gray-500/75 transition-opacity dark:bg-gray-400/75" />
 
       <div className="fixed inset-0 z-10 overflow-y-auto">
         <div className="flex min-h-full items-center justify-center p-4 text-center">
-          <Dialog.Panel className="relative rounded-lg bg-gray-100 p-4 text-left shadow-xl">
-            <Dialog.Title as="h3" className="text-lg font-medium leading-6 text-gray-900">
+          <Dialog.Panel className="relative rounded-lg bg-gray-100 p-4 text-left shadow-xl dark:bg-gray-900">
+            <Dialog.Title
+              as="h3"
+              className="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100"
+            >
               Settings
             </Dialog.Title>
 
             <div>TODO</div>
 
             <button
-              className="mt-4 w-full rounded-md bg-gray-200 px-4 py-2 text-base text-gray-800 shadow-sm hover:bg-gray-300"
+              className="mt-4 w-full rounded-md bg-gray-200  px-4 py-2 text-base text-gray-800 shadow-sm hover:bg-gray-300 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
               onClick={handleClose}
             >
               Save