add more dark theming

Mu-L · Jun 14, 2024 · 1d709f3 · 1d709f3
1 parent ad0c86f
commit 1d709f3
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 14 deletions.
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"
@@ -81,7 +83,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 +93,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 +104,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,6 +113,10 @@
  <Bug class="h-6 w-6" />
  </div>
 
+ <div class="hover:bg-gray-300 dark:hover:bg-gray-600 rounded p-1">
+ <Sun class="h-6 w-6" />
+ </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>

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/features/Extrusion.svelte b/applications/web/src/components/features/Extrusion.svelte
@@ -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
@@ -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-gray-100 dark:bg-gray-800 px-1 py-1 rounded hover:bg-gray-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
@@ -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
@@ -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-gray-100 px-1 py-1 rounded dark:bg-gray-800"
+ 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>