First pass on dark mode

CADmium-Co · Jun 14, 2024 · ad0c86f · ad0c86f
1 parent 18c0009
commit ad0c86f
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 18 deletions.
diff --git a/applications/web/index.html b/applications/web/index.html
@@ -14,6 +14,14 @@
 	<meta name="theme-color" content="#ffffff">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<title>CADmium</title>
+	<script>
+		// On page load or when changing themes, best to add inline in `head` to avoid FOUC
+		if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+			document.documentElement.classList.add('dark')
+		} else {
+			document.documentElement.classList.remove('dark')
+		}
+	</script>
 </head>
 
 <body>

diff --git a/applications/web/src/components/AppBar.svelte b/applications/web/src/components/AppBar.svelte
@@ -40,7 +40,7 @@
   }
 </script>
 
-<div class="bg-gray-200 h-[45px]">
+<div class="bg-gray-200 dark:bg-gray-900 dark:text-slate-300 h-[45px]">
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div class="flex items-center gap-4 bg-gray-">
     <div class="shrink-0 select-none">
@@ -113,10 +113,10 @@
 
     <div class="flex-grow flex flex-row-reverse gap-4 mr-4">
       <div>
-        <a href="https://discord.com/invite/qJCsKJeyZv" target="_blank"><DiscordLogo class="h-6 w-6"/></a>
+        <a href="https://discord.com/invite/qJCsKJeyZv" target="_blank"><DiscordLogo class="h-6 w-6" /></a>
       </div>
       <div>
-        <a href="https://github.com/mattferraro/cadmium" target="_blank"><GithubLogo class="h-6 w-6"/></a>
+        <a href="https://github.com/mattferraro/cadmium" target="_blank"><GithubLogo class="h-6 w-6" /></a>
       </div>
     </div>
   </div>

diff --git a/applications/web/src/components/BottomBar.svelte b/applications/web/src/components/BottomBar.svelte
@@ -9,7 +9,7 @@
   $: workbenches = $project.workbenches ?? []
 </script>
 
-<div class="bg-gray-100 h-[45px] flex">
+<div class="bg-gray-100 dark:bg-gray-800 h-[45px] flex">
   {#each workbenches as wb, i (wb.name)}
     {#if wb.renaming}
       <input
@@ -32,7 +32,9 @@
       />
     {:else}
       <button
-        class="{$workbenchIndex === i ? 'bg-gray-300' : 'bg-gray-200'} hover:bg-sky-300 text-gray-700 py-2 px-4"
+        class="{$workbenchIndex === i
+          ? 'bg-gray-300 dark:bg-gray-600'
+          : 'bg-gray-200 dark:bg-gray-800'} hover:bg-sky-300 text-gray-700 dark:text-gray-300 dark:hover:text-gray-700 py-2 px-4"
         type="button"
         on:dblclick={() => {
           if ($workbenchIndex !== i) {

diff --git a/applications/web/src/components/FeatureHistory.svelte b/applications/web/src/components/FeatureHistory.svelte
@@ -53,7 +53,7 @@
   }
 </script>
 
-<div class="flex flex-col select-none">
+<div class="flex flex-col select-none dark:text-gray-300">
   <div style="height:{Math.min(height, overallHeight - 12)}px" class="overflow-y-auto">
     <div id="history" class="font-bold text-sm px-2 py-2">History ({history.length})</div>
     {#each history as feature, featureIdx (feature.data.type + ":" + feature.unique_id)}
@@ -73,7 +73,7 @@
     {/each}
   </div>
   <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div class="h-[12px] cursor-row-resize border-b-2 border-b-gray-300" on:mousedown={onMouseDown} />
+  <div class="h-[12px] cursor-row-resize border-b-2 border-b-gray-300" on:mousedown={onMouseDown}></div>
   <div style="height:{partsHeight}px" class="overflow-y-auto">
     <div class="font-bold text-sm px-2 py-2">
       Solids ({solids ? Object.keys(solids).length : 0})

diff --git a/applications/web/src/components/MainDisplay.svelte b/applications/web/src/components/MainDisplay.svelte
@@ -44,16 +44,16 @@
   }
 </script>
 
-<div style="width:{width}px; height:{height}px">
+<div style="width:{width}px; height:{height}px" class="dark:bg-gray-700">
   <FeatureHistory {setCameraFocus} />
 </div>
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div class="w-[12px] cursor-col-resize border-r-gray-300 border-r-2" on:mousedown={onMouseDown} />
+<div class="w-[12px] cursor-col-resize border-r-gray-300 dark:bg-gray-700 border-r-2" on:mousedown={onMouseDown}></div>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-  class="bg-white {$sketchTool === 'line' || $sketchTool === 'circle' || $sketchTool === 'rectangle' ? 'cursor-crosshair' : ''}"
+  class="bg-white dark:bg-gray-700 {$sketchTool === 'line' || $sketchTool === 'circle' || $sketchTool === 'rectangle' ? 'cursor-crosshair' : ''}"
   style="width:{viewportWidth}px; height:{height}px"
   on:mousedown={e => {
     if ($selectingFor.length > 0) {

diff --git a/applications/web/src/components/ToolBar.svelte b/applications/web/src/components/ToolBar.svelte
@@ -41,7 +41,7 @@
   ]
 </script>
 
-<div class="col-span-2 flex flex-none items-center gap-1 bg-gray-100 h-[45px] select-none">
+<div class="col-span-2 flex flex-none items-center gap-1 bg-gray-100 dark:bg-gray-800 dark:text-gray-300 h-[45px] select-none">
   {#if $sketchBeingEdited !== ""}
     {#each sketchActions as action}
       <button class="inline-flex items-center p-1 {$sketchTool === action.alt ? 'bg-gray-400' : 'hover:bg-gray-200'} p-1" on:click={action.handler}>

diff --git a/applications/web/src/components/features/Extrusion.svelte b/applications/web/src/components/features/Extrusion.svelte
@@ -78,7 +78,7 @@
 </script>
 
 <div
-  class="flex items-center text-sm hover:bg-sky-200"
+  class="flex items-center text-sm hover:bg-sky-200 dark:hover:bg-gray-600"
   role="button"
   tabindex="0"
   on:dblclick={() => {

diff --git a/applications/web/src/components/features/Plane.svelte b/applications/web/src/components/features/Plane.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <div
-  class="flex items-center text-sm hover:bg-sky-200"
+  class="flex items-center text-sm hover:bg-sky-200 dark:hover:bg-gray-600"
   role="button"
   tabindex="0"
   on:dblclick={() => {
@@ -44,7 +44,7 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class="ml-auto mr-2 bg-slate-100 px-1 py-1 rounded hover:bg-slate-200"
+    class="ml-auto mr-2 bg-gray-100 dark:bg-gray-800 px-1 py-1 rounded hover:bg-gray-200"
     on:mousedown={() => {
       setCameraFocus(plane.tertiary, plane.origin, plane.secondary)
       // move camera to focus on plane

diff --git a/applications/web/src/components/features/Point.svelte b/applications/web/src/components/features/Point.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <div
-  class="flex items-center text-sm hover:bg-sky-200"
+  class="flex items-center text-sm hover:bg-sky-200 dark:hover:bg-gray-600"
   role="button"
   tabindex="0"
   on:dblclick={() => {

diff --git a/applications/web/src/components/features/Sketch.svelte b/applications/web/src/components/features/Sketch.svelte
@@ -103,7 +103,7 @@
 </script>
 
 <div
-  class="flex items-center text-sm hover:bg-sky-200"
+  class="flex items-center text-sm hover:bg-sky-200 dark:hover:bg-gray-600"
   role="button"
   tabindex="0"
   on:dblclick={() => {
@@ -126,7 +126,7 @@
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
-    class="ml-auto mr-2 bg-slate-100 px-1 py-1 rounded"
+    class="ml-auto mr-2 bg-gray-100 px-1 py-1 rounded dark:bg-gray-800"
     on:click={() => {
       if ($hiddenSketches.includes(id)) {
         // cool, unhide

diff --git a/applications/web/tailwind.config.cjs b/applications/web/tailwind.config.cjs
@@ -1,7 +1,7 @@
 /** @type {import('tailwindcss').Config}*/
 const config = {
   content: ["./src/**/*.{html,js,svelte,ts}"],
-
+  darkMode: "selector",
   theme: {
     extend: {
       gridTemplateColumns: {