feat: add themes and theme switcher

invm · Jul 10, 2023 · a307e78 · a307e78
1 parent 5595118
commit a307e78
Show file tree

Hide file tree

Showing 22 changed files with 75 additions and 81 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="dark">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -10,7 +10,7 @@
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root" class="background-gradient h-full w-full"></div>
+    <div id="root" class="h-full w-full"></div>
 
     <script src="/src/index.tsx" type="module"></script>
   </body>

diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "tabulator-tables": "^5.5.0",
     "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#v1",
     "tauri-plugin-window-state-api": "github:tauri-apps/tauri-plugin-window-state#v1",
+    "theme-change": "^2.5.0",
     "zod": "^3.21.4"
   },
   "devDependencies": {

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,6 +3,7 @@ import { useAppSelector } from './services/Context';
 import { Alerts } from './components/UI';
 import { For, Show } from 'solid-js';
 import { CloseIcon } from './components/UI/Icons';
+import ThemeSwitch from './components/UI/ThemeSwitch';
 
 function App() {
   const { tabsService: { tabsStore, setActiveTab, removeTab } } = useAppSelector()
@@ -14,19 +15,24 @@ function App() {
 
   return (
     <div class="w-full h-full flex flex-col">
-      <div class="px-2 pb-2 bg-base-300 tabs tabs-boxed rounded-none gap-2">
-        <For each={tabsStore.tabs}>
-          {(tab, idx) =>
-            <div class="group flex items-center">
-              <div onClick={() => setActiveTab(idx() + 1)} class="tab tab-md "
-                classList={{ 'tab-active': tabsStore.activeTab === idx() + 1, }}
-              ><span class="">{tab.label}</span>               </div>
-              {idx() + 1 !== 1 && <button onClick={() => closeTab(tab.id!)} class="hidden group-hover:block pl-2 mb-1">
-                <CloseIcon />
-              </button>}
-            </div>
-          }
-        </For>
+      <div class="px-2 pb-2 bg-base-300 tabs tabs-boxed rounded-none gap-2 flex justify-between items-center">
+        <div>
+          <For each={tabsStore.tabs}>
+            {(tab, idx) =>
+              <div class="group flex items-center">
+                <div onClick={() => setActiveTab(idx() + 1)} class="tab tab-md "
+                  classList={{ 'tab-active': tabsStore.activeTab === idx() + 1, }}
+                ><span class="">{tab.label}</span>               </div>
+                {idx() + 1 !== 1 && <button onClick={() => closeTab(tab.id!)} class="hidden group-hover:block pl-2 mb-1">
+                  <CloseIcon />
+                </button>}
+              </div>
+            }
+          </For>
+        </div>
+        <div class="">
+          <ThemeSwitch />
+        </div>
       </div>
       <div class="h-full">
         <For each={tabsStore.tabs}>

diff --git a/src/components/Connections/AddConnectionForm.tsx b/src/components/Connections/AddConnectionForm.tsx
@@ -101,7 +101,7 @@ const AddConnectionForm = (props: { addConnection: ({ name, scheme, color }: { n
     <div class="p-3 w-full flex justify-center items-around pt-20">
       <form class="flex max-w-lg flex-col gap-1" autocomplete="off" onSubmit={submit}>
         <div>
-          <h2 class="text-2xl font-bold text">{t('components.add_connection_form.title')}</h2>
+          <h2 class="text-2xl font-bold">{t('components.add_connection_form.title')}</h2>
         </div>
         <div class='grid grid-cols-5 gap-3'>
           <div class='col-span-3'>

diff --git a/src/components/Connections/ConnectionsList/ConnectionItem/ActionsMenu.tsx b/src/components/Connections/ConnectionsList/ConnectionItem/ActionsMenu.tsx
@@ -19,7 +19,7 @@ export const ActionsMenu = (props: { connection: ConnectionConfig }) => {
   return (
     <div class="flex items-center">
       <button onClick={onConnect} class="btn btn-sm btn-ghost">
-        <svg class="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 16">
+        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 16">
           <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
         </svg>
       </button>

diff --git a/src/components/Connections/ConnectionsList/ConnectionItem/ConnectionItem.tsx b/src/components/Connections/ConnectionsList/ConnectionItem/ConnectionItem.tsx
@@ -11,15 +11,15 @@ export const ConnectionItem = (props: { connection: ConnectionConfig }) => {
 
   return (
     <div
-      class="group hover:bg-gray-800 rounded-md flex items-center justify-between px-2 py-1">
+      class="group hover:bg-base-200 rounded-md flex items-center justify-between px-2 py-1">
       <div>
         <div class="flex items-center">
-          <h5 class="text text-md font-bold">{props.connection.name}</h5>
+          <h5 class="text-md font-bold">{props.connection.name}</h5>
           <div class="flex px-3">
             <ColorCircle color={props.connection.color} />
           </div>
         </div>
-        <p class="text text-sm dark:text-slate-500">{connectionString}</p>
+        <p class="text-sm">{connectionString}</p>
       </div>
       <div class="hidden group-hover:block">
         <ActionsMenu {...{ connection: props.connection! }} />

diff --git a/src/components/Connections/ConnectionsList/ConnectionsList.tsx b/src/components/Connections/ConnectionsList/ConnectionsList.tsx
@@ -20,8 +20,8 @@ export const ConnectionsList = (props: { connections: ConnectionConfig[], setCon
 
 
   return (
-    <div class="h-full p-2 pt-5 bg-gray-900">
-      <h3 class="text px-2 text-xl font-bold">Saved Connections</h3>
+    <div class="h-full p-2 pt-5 bg-base-300">
+      <h3 class="px-2 text-xl font-bold">Saved Connections</h3>
       <div class="divider my-0"></div>
       <ul class="grid grid-cols-1 gap-1"
       >

diff --git a/src/components/UI/Alert.tsx b/src/components/UI/Alert.tsx
@@ -1,8 +1,8 @@
 const colors = {
-  info: 'text-blue-800 bg-blue-50 dark:bg-gray-800 dark:text-blue-400',
-  success: 'text-green-800 bg-green-50 dark:bg-gray-800 dark:text-green-400',
-  warning: 'text-yellow-800 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-400',
-  error: 'text-red-800 bg-red-50 dark:bg-gray-800 dark:text-red-400',
+  info: 'text-info-content bg-info',
+  success: 'text-success-content bg-success',
+  warning: 'text-warning-content bg-warning',
+  error: 'text-error-content bg-error',
 }
 
 const Alert = (props: { children: any, color: keyof typeof colors }) => {

diff --git a/src/components/UI/Card.tsx b/src/components/UI/Card.tsx
diff --git a/src/components/UI/Dropdown.tsx b/src/components/UI/Dropdown.tsx
diff --git a/src/components/UI/Icons/Add.tsx b/src/components/UI/Icons/Add.tsx
@@ -1,6 +1,6 @@
 export const AddIcon = () => {
   return (
-<svg class="w-3 h-3 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16"/>
   </svg>
   )

diff --git a/src/components/UI/Icons/Close.tsx b/src/components/UI/Icons/Close.tsx
@@ -1,6 +1,6 @@
 export const CloseIcon = () => {
   return (
-    <svg class='w-3 h-3 text-gray-800 dark:text-white' aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
+    <svg class='w-3 h-3' aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
       <path d="m9.414 8 5.293-5.293a1 1 0 1 0-1.414-1.414L8 6.586 2.707 1.293a1 1 0 0 0-1.414 1.414L6.586 8l-5.293 5.293a1 1 0 1 0 1.414 1.414L8 9.414l5.293 5.293a1 1 0 0 0 1.414-1.414L9.414 8Z" />
     </svg>
   )

diff --git a/src/components/UI/Icons/Edit.tsx b/src/components/UI/Icons/Edit.tsx
@@ -1,6 +1,6 @@
 export const EditIcon = () => {
   return (
-    <svg class="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
+    <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
       <path d="M12.687 14.408a3.01 3.01 0 0 1-1.533.821l-3.566.713a3 3 0 0 1-3.53-3.53l.713-3.566a3.01 3.01 0 0 1 .821-1.533L10.905 2H2.167A2.169 2.169 0 0 0 0 4.167v11.666A2.169 2.169 0 0 0 2.167 18h11.666A2.169 2.169 0 0 0 16 15.833V11.1l-3.313 3.308Zm5.53-9.065.546-.546a2.518 2.518 0 0 0 0-3.56 2.576 2.576 0 0 0-3.559 0l-.547.547 3.56 3.56Z" />
       <path d="M13.243 3.2 7.359 9.081a.5.5 0 0 0-.136.256L6.51 12.9a.5.5 0 0 0 .59.59l3.566-.713a.5.5 0 0 0 .255-.136L16.8 6.757 13.243 3.2Z" />
     </svg>

diff --git a/src/components/UI/Icons/Fire.tsx b/src/components/UI/Icons/Fire.tsx
@@ -1,6 +1,6 @@
 export const FireIcon = () => {
   return (
-    <svg class="w-4 h-4 text-gray-800 dark:text-white text-primary" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
+    <svg class="w-4 h-4 text-primary" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z" />
     </svg>
   )

diff --git a/src/components/UI/Icons/Pen.tsx b/src/components/UI/Icons/Pen.tsx
@@ -1,6 +1,6 @@
 export const PenIcon = () => {
   return (
-    <svg class="w-4 h-4 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21">
+    <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21">
       <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7.418 17.861 1 20l2.139-6.418m4.279 4.279 10.7-10.7a3.027 3.027 0 0 0-2.14-5.165c-.802 0-1.571.319-2.139.886l-10.7 10.7m4.279 4.279-4.279-4.279m2.139 2.14 7.844-7.844m-1.426-2.853 4.279 4.279" />
     </svg>
   )

diff --git a/src/components/UI/Icons/ThreeDots.tsx b/src/components/UI/Icons/ThreeDots.tsx
@@ -1,6 +1,6 @@
 export const ThreeDots = () => {
   return (
-    <svg class='w-3 h-3 text-gray-800 dark:text-white' aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
+    <svg class='w-3 h-3' aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
       <path d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
     </svg>
   )

diff --git a/src/components/UI/Label.tsx b/src/components/UI/Label.tsx
@@ -1,6 +1,6 @@
 const Label = (props: { for: string, value?: string, children?: any }) => {
   return (
-    <label for={props.for} class="text-sm font-medium text-gray-900 dark:text-gray-300">{props.children ?? props.value}</label>
+    <label for={props.for} class="text-sm font-medium">{props.children ?? props.value}</label>
   )
 }
 

diff --git a/src/components/UI/ThemeSwitch.tsx b/src/components/UI/ThemeSwitch.tsx
@@ -0,0 +1,24 @@
+import { For } from "solid-js"
+import { titleCase } from "../../utils/formatters"
+const THEMES = ["light", "dark", "aqua", "synthwave", "dracula", "night", "cupcake"]
+import { onMount } from 'solid-js'
+import { themeChange } from 'theme-change'
+
+const ThemeSwitch = () => {
+
+  onMount(async () => {
+    themeChange();
+  })
+  return (
+    <details class="dropdown dropdown-left">
+      <summary class="m-1 btn btn-xs">Theme</summary>
+      <ul class="p-2 shadow menu dropdown-content  z-[1] bg-base-100 rounded-box w-52">
+        <For each={THEMES}>
+          {(theme) => <li data-toggle-theme={theme} class="py-1">{titleCase(theme)}</li>}
+        </For>
+      </ul>
+    </details>
+  )
+}
+
+export default ThemeSwitch
diff --git a/src/components/UI/index.ts b/src/components/UI/index.ts
@@ -1,9 +1,7 @@
 export * from './Alert'
 export * from './Alerts'
-export * from './Card'
 export * from './Checkbox'
 export * from './ColorCircle'
-export * from './Dropdown'
 export * from './Label'
 export * from './Select'
 export * from './TextInput'
diff --git a/src/index.css b/src/index.css
@@ -33,10 +33,6 @@ body {
   height: 100%;
 }
 
-.text {
-  @apply text-black dark:text-white;
-}
-
 /* Chrome, Safari, Edge, Opera */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
@@ -73,15 +69,15 @@ input[type=number] {
 }
 
 .app-input {
-  @apply block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 sm:text-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 py-1.5 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 text-base;
+  @apply block w-full p-2 border border-gray-300 rounded-lg bg-base-100 sm:text-sm focus:ring-blue-500 focus:border-blue-500 dark:border-gray-600 py-1.5 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-base;
 }
 
 .app-checkbox{
- @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600;
+ @apply w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800 focus:ring-2 dark:border-gray-600;
 }
 
 .app-select {
-  @apply bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 text-base sm:text-sm py-0.5;
+  @apply border border-gray-300 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2 dark:border-gray-600 dark:placeholder-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500 text-base sm:text-sm py-0.5;
 }
 
 .background-gradient {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -11,7 +11,7 @@ export default {
     require("daisyui")
   ],
   daisyui: {
-    themes: false, // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
+    themes: ["light", "dark", "aqua", "synthwave", "dracula", "night", "cupcake"], // true: all themes | false: only light + dark | array: specific themes like this ["light", "dark", "cupcake"]
     darkTheme: "dark", // name of one of the included themes for dark mode
     base: true, // applies background color and foreground color for root element by default
     styled: true, // include daisyUI colors and design decisions for all components