CADmium-Co · av8ta · Jun 14, 2024 · Jun 14, 2024 · Jun 14, 2024 · Jun 14, 2024
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
@@ -7,6 +7,8 @@
   import Bug from "phosphor-svelte/lib/Bug"
   import DiscordLogo from "phosphor-svelte/lib/DiscordLogo"
   import GithubLogo from "phosphor-svelte/lib/GithubLogo"
+  import Moon from "phosphor-svelte/lib/Moon"
+  import Sun from "phosphor-svelte/lib/Sun"
   import type {WithTarget} from "shared/types"
   import {isProject} from "shared/typeGuards"
   import {base} from "../base"
@@ -20,6 +22,8 @@
 
   export let newFileContent: string | null = null
 
+  let isDarkMode = localStorage.getItem("theme") === "dark"
+
   $: project,
     (() => {
       // log("[project]", project)
@@ -40,7 +44,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">
@@ -81,7 +85,7 @@
     {/if}
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
-      class="hover:bg-gray-300 rounded p-1"
+      class="hover:bg-gray-300 dark:hover:bg-gray-600 rounded p-1"
       on:click={() => {
         let asString = $wasmProject.to_json()
         fileDownload(asString, `${project.name}.cadmium`)
@@ -91,7 +95,7 @@
     </div>
 
     <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div class="hover:bg-gray-300 rounded p-1">
+    <div class="hover:bg-gray-300 dark:hover:bg-gray-600 rounded p-1">
       <!-- <Upload class="h-6 w-6" /> -->
       <!-- <input id="file-inp" type="file" style="visibility:hidden;" onchange="readFile(event)" /> -->
       <label for="file-inp">
@@ -102,7 +106,7 @@
 
     <!-- svelte-ignore a11y-no-static-element-interactions -->
     <div
-      class="hover:bg-gray-300 rounded p-1"
+      class="hover:bg-gray-300 dark:hover:bg-gray-600 rounded p-1"
       on:click={() => {
         let asString = JSON.stringify($messageHistory)
         fileDownload(asString, `${project.name}.history.json`)
@@ -111,12 +115,34 @@
       <Bug class="h-6 w-6" />
     </div>
 
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="hover:bg-gray-300 dark:hover:bg-gray-600 rounded p-1"
+      on:click={() => {
+        if (localStorage.getItem("theme") === "light") {
+          document.documentElement.classList.add("dark")
+          localStorage.setItem("theme", "dark")
+          isDarkMode = true
+        } else {
+          document.documentElement.classList.remove("dark")
+          localStorage.setItem("theme", "light")
+          isDarkMode = false
+        }
+      }}
+    >
+      {#if isDarkMode}
+        <Moon class="h-6 w-6" />
+      {:else}
+        <Sun class="h-6 w-6" />
+      {/if}
+    </div>
+
     <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/SolidItem.svelte b/applications/web/src/components/SolidItem.svelte
@@ -71,7 +71,7 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <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:contextmenu|preventDefault={e => {
@@ -85,11 +85,11 @@
 
 {#if contextMenuVisible}
   <nav use:getContextMenuDimension style="position: absolute; top:{pos.y}px; left:{pos.x}px">
-    <div class="navbar inline-flex border w-[210px] bg-white overflow-hidden flex-col rounded-[10px] border-[solid]" id="navbar">
+    <div class="navbar inline-flex border w-[210px] bg-white dark:bg-gray-700 overflow-hidden flex-col rounded-[10px] border-[solid]" id="navbar">
       <ul class="m-1.5">
         <li class="block list-none w-[1fr] my-1">
           <button
-            class="text-base text-[#222] w-full h-[30px] text-left bg-white border-0 hover:text-black hover:text-left hover:bg-[#eee] hover:rounded-[5px] flex"
+            class="text-base text-[#222] w-full h-[30px] text-left bg-white dark:bg-gray-700 dark:text-gray-300 dark:hover:text-gray-300 dark:hover:bg-gray-600 border-0 hover:text-black hover:text-left hover:bg-[#eee] rounded-[5px] flex"
             on:click={exportSolidOBJ}
           >
             <FileArrowDown class="h-6 w-6 mx-2" /> Download as OBJ
@@ -98,7 +98,7 @@
 
         <li class="block list-none w-[1fr] my-1">
           <button
-            class="text-base text-[#222] w-full h-[30px] text-left bg-white border-0 hover:text-black hover:text-left hover:bg-[#eee] hover:rounded-[5px] flex"
+            class="text-base text-[#222] w-full h-[30px] text-left bg-white dark:bg-gray-700 dark:text-gray-300 dark:hover:text-gray-300 dark:hover:bg-gray-600 border-0 hover:text-black hover:text-left hover:bg-[#eee] rounded-[5px] flex"
             on:click={exportSolidSTEP}
           >
             <FileArrowDown class="h-6 w-6 mx-2" />Download as STEP

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}>
@@ -50,7 +50,7 @@
     {/each}
   {:else}
     {#each actions as action}
-      <button class="inline-flex items-center {action.text === 'Solve' && solving ? 'bg-gray-400' : ''} hover:bg-gray-200 p-1" on:click={action.handler}>
+      <button class="inline-flex items-center hover:bg-gray-200 p-1 rounded dark:hover:bg-gray-600 dark:hover:text-gray-300" on:click={action.handler}>
         <img class="h-8 w-8" src={action.src} alt={action.alt} />{action.text ? action.text : ""}
       </button>
     {/each}

diff --git a/applications/web/src/components/controls/CubeGizmo/CubeGizmo.svelte b/applications/web/src/components/controls/CubeGizmo/CubeGizmo.svelte
@@ -45,7 +45,7 @@
 
   const origin = new Vector3(0, 0, 0)
   const textureSize = 64
-  const gray = 0xdde6ed
+  const gray = 0xa1a8ad
   const black = 0x000000
 
   const {autoRenderTask, renderer, camera, invalidate} = useThrelte()

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={() => {
@@ -105,7 +105,7 @@
       on:submit|preventDefault={() => {
         closeAndRefresh()
       }}
-      class="px-3 py-2 bg-gray-100 flex flex-col space-y-2"
+      class="px-3 py-2 bg-gray-100 dark:bg-gray-600 flex flex-col space-y-2"
       autocomplete="off"
     >
       <label>
@@ -135,7 +135,7 @@
       Faces
       <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <div tabindex="0" class="bg-gray-50 rounded flex shadow border focus:ring focus:border-blue-500 min-h-8 flex-wrap">
-        <div class="h-8" />
+        <div class="h-8"></div>
         {#each faceIdsFromInputs as faceId}
           <div class="bg-sky-200 pl-2 py-0.5 m-1 rounded text-sm">
             {faceId}<button

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 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-500 px-1 py-1 rounded"
     on:mousedown={() => {
       setCameraFocus(plane.tertiary, plane.origin, plane.secondary)
       // move camera to focus on plane
@@ -61,7 +61,7 @@
         // editing = false
         closeAndRefresh()
       }}
-      class="px-3 py-2 bg-gray-100 flex flex-col space-y-2"
+      class="px-3 py-2 bg-gray-100 dark:bg-gray-600 flex flex-col space-y-2"
       autocomplete="off"
     >
       <label>

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={() => {
@@ -39,7 +39,7 @@
       on:submit|preventDefault={() => {
         closeAndRefresh()
       }}
-      class="px-3 py-2 bg-gray-100 flex flex-col space-y-2"
+      class="px-3 py-2 bg-gray-100 dark:bg-gray-600 flex flex-col space-y-2"
       autocomplete="off"
     >
       <label>

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 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-500 px-1 py-1 rounded"
     on:click={() => {
       if ($hiddenSketches.includes(id)) {
         // cool, unhide
@@ -156,7 +156,7 @@
         // editing = false
         closeAndRefresh()
       }}
-      class="px-3 py-2 bg-gray-100 flex flex-col space-y-2"
+      class="px-3 py-2 bg-gray-100 dark:bg-gray-600 flex flex-col space-y-2"
       autocomplete="off"
     >
       <label>

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: {