WIP config update

src/components/DeviceSelector.tsx

@@ -7,15 +7,15 @@ import { PageNav } from "@app/Nav/PageNav.js";
 import { Mono } from "@components/generic/Mono.js";
 import { Hashicon } from "@emeraldpay/hashicon-react";
 import { PlusIcon } from "@heroicons/react/24/outline";
+import { MoonIcon, SunIcon } from "@primer/octicons-react";
 
 export const DeviceSelector = (): JSX.Element => {
   const { getDevices } = useDeviceStore();
-  const { selectedDevice, setSelectedDevice, darkMode } = useAppStore();
+  const { selectedDevice, setSelectedDevice, darkMode, setDarkMode } = useAppStore();
 
   return (
     <div className="flex h-full w-14 items-center gap-3 bg-backgroundPrimary pt-3 [writing-mode:vertical-rl]">
       <div className="flex items-center gap-3">
-        <Mono className="select-none">Connected Devices</Mono>
         <span className="flex font-bold text-textPrimary">
           {getDevices().map((device) => (
             <div
@@ -55,7 +55,12 @@ export const DeviceSelector = (): JSX.Element => {
 
       <NavSpacer />
 
-      <div>//actions</div>
+      <div onClick={() => setDarkMode(!darkMode)} className="bg-backgroundPrimary py-5 px-4 hover:brightness-hover active:brightness-press text-textSecondary hover:text-textPrimary">{
+        darkMode ? (
+          <SunIcon className="w-4" />
+        ) : (
+          <MoonIcon className="w-4" />
+        )}</div>
 
       <img
         src={darkMode ? "Logo_White.svg" : "Logo_Black.svg"}