commit 1253184c75329031dea707833ff699e58ad3eb5c · pdsls.dev/pdsls

+13 -8

src/components/theme.tsx

···

       24
       24
        
           else localStorage.theme = newTheme;

     

       25
       25
        
         };

     

       26
       26
        
       

     

       27
       27
       -
         const ThemeButton = (props: { theme: string; icon: string }) => {

     

       27
       27
       +
         const ThemeOption = (props: { theme: string; icon: string; label: string }) => {

     

       28
       28
        
           return (

     

       29
       29
        
             <button

     

       30
       30
        
               classList={{

     

       31
       31
       -
                 "p-1.5 flex items-center rounded-full border-[0.5px]": true,

     

       32
       32
       -
                 "bg-neutral-200/60 border-neutral-300/60 dark:border-neutral-500/60 dark:bg-neutral-600":

     

       31
       31
       +
                 "flex items-center gap-2 rounded-xl border px-3 py-2": true,

     

       32
       32
       +
                 "bg-neutral-200/60 border-neutral-300 dark:border-neutral-500 dark:bg-neutral-700":

     

       33
       33
        
                   theme() === props.theme,

     

       34
       34
       -
                 "border-transparent": theme() !== props.theme,

     

       34
       34
       +
                 "border-neutral-200 dark:border-neutral-600 hover:bg-neutral-100 dark:hover:bg-neutral-800":

     

       35
       35
       +
                   theme() !== props.theme,

     

       35
       36
        
               }}

     

       36
       37
        
               onclick={() => updateTheme(props.theme)}

     

       37
       38
        
             >

     

       38
       39
        
               <span class={"iconify " + props.icon}></span>

     

       40
       40
       +
               <span>{props.label}</span>

     

       39
       41
        
             </button>

     

       40
       42
        
           );

     

       41
       43
        
         };

     

       42
       44
        
       

     

       43
       45
        
         return (

     

       44
       44
       -
           <div class="dark:bg-dark-100 dark:inset-shadow-dark-200 mt-2 flex items-center justify-between gap-1 rounded-full border-[0.5px] border-neutral-200/60 bg-white p-1 text-base text-neutral-800 inset-shadow-sm dark:border-neutral-600 dark:text-neutral-300">

     

       45
       45
       -
             <ThemeButton theme="system" icon="lucide--monitor" />

     

       46
       46
       -
             <ThemeButton theme="light" icon="lucide--sun" />

     

       47
       47
       -
             <ThemeButton theme="dark" icon="lucide--moon" />

     

       46
       46
       +
           <div class="flex flex-col gap-0.5">

     

       47
       47
       +
             <label class="select-none">Theme</label>

     

       48
       48
       +
             <div class="flex gap-2">

     

       49
       49
       +
               <ThemeOption theme="system" icon="lucide--monitor" label="System" />

     

       50
       50
       +
               <ThemeOption theme="light" icon="lucide--sun" label="Light" />

     

       51
       51
       +
               <ThemeOption theme="dark" icon="lucide--moon" label="Dark" />

     

       52
       52
       +
             </div>

     

       48
       53
        
           </div>

     

       49
       54
        
         );

     

       50
       55
        
       };

+1 -2

src/layout.tsx

···

       9
       9
        
       import { NavBar } from "./components/navbar.jsx";

     

       10
       10
        
       import { NotificationContainer } from "./components/notification.jsx";

     

       11
       11
        
       import { Search, SearchButton, showSearch } from "./components/search.jsx";

     

       12
       12
       -
       import { themeEvent, ThemeSelection } from "./components/theme.jsx";

     

       12
       12
       +
       import { themeEvent } from "./components/theme.jsx";

     

       13
       13
        
       import { resolveHandle } from "./utils/api.js";

     

       14
       14
        
       

     

       15
       15
        
       export const isTouchDevice = "ontouchstart" in window || navigator.maxTouchPoints > 1;

     
···

       161
       161
        
                       newTab

     

       162
       162
        
                       external

     

       163
       163
        
                     />

     

       164
       164
       -
                     <ThemeSelection />

     

       165
       164
        
                   </DropdownMenu>

     

       166
       165
        
                 </MenuProvider>

     

       167
       166
        
               </div>

+3 -1

src/views/settings.tsx

···

       1
       1
        
       import { createSignal } from "solid-js";

     

       2
       2
        
       import { TextInput } from "../components/text-input.jsx";

     

       3
       3
       +
       import { ThemeSelection } from "../components/theme.jsx";

     

       3
       4
        
       

     

       4
       5
        
       export const [hideMedia, setHideMedia] = createSignal(localStorage.hideMedia === "true");

     

       5
       6
        
       

     
···

       9
       10
        
             <div class="flex items-center gap-1 font-semibold">

     

       10
       11
        
               <span>Settings</span>

     

       11
       12
        
             </div>

     

       12
       12
       -
             <div class="flex flex-col gap-2">

     

       13
       13
       +
             <div class="flex flex-col gap-3">

     

       13
       14
        
               <div class="flex flex-col gap-0.5">

     

       14
       15
        
                 <label for="plcDirectory" class="select-none">

     

       15
       16
        
                   PLC Directory

     
···

       24
       25
        
                   }}

     

       25
       26
        
                 />

     

       26
       27
        
               </div>

     

       28
       28
       +
               <ThemeSelection />

     

       27
       29
        
               <div class="flex justify-between">

     

       28
       30
        
                 <div class="flex items-center gap-1">

     

       29
       31
        
                   <input