updated color scheme

src/components/Dialog/DeviceNameDialog.tsx

@@ -83,6 +83,7 @@ export const DeviceNameDialog = ({
                 label: "Long Name",
                 type: "text",
                 properties: {
+                  className: 'text-slate-900 dark:text-slate-200',
                   fieldLength: {
                     currentValueLength: currentLongNameLength ?? 0,
                     max: MAX_LONG_NAME_BYTE_LENGTH,

src/components/Dialog/ImportDialog.tsx

@@ -109,7 +109,6 @@ export const ImportDialog = ({
           <Input
             value={importDialogInput}
             suffix={validUrl ? "✅" : "❌"}
-            className="dark:text-slate-900"
             onChange={(e) => {
               setImportDialogInput(e.target.value);
             }}

src/components/Dialog/NodeDetailsDialog/NodeDetailsDialog.tsx

@@ -131,7 +131,7 @@ export const NodeDetailsDialog = ({
 
               {device.deviceMetrics && (
                 <div className="text-slate-900 dark:text-slate-100 bg-slate-100 dark:bg-slate-800 p-3 rounded-lg mt-3">
-                  <p className="text-lg font-semibold text-slate-900 dark:text-slate-50">
+                  <p className="text-lg font-semibold text-slate-900 dark:text-slate-0">
                     Device Metrics:
                   </p>
                   {deviceMetricsMap.map(

src/components/Dialog/QRDialog.tsx

@@ -133,8 +133,8 @@ export const QRDialog = ({
           <Input
             value={qrCodeUrl}
             disabled
-            className="dark:text-slate-900"
             action={{
+              key: 'copy-value',
               icon: ClipboardIcon,
               onClick() {
                 void navigator.clipboard.writeText(qrCodeUrl);

src/components/Dialog/ShutdownDialog.tsx

@@ -41,7 +41,6 @@ export const ShutdownDialog = ({
             type="number"
             value={time}
             onChange={(e) => setTime(Number.parseInt(e.target.value))}
-            className="dark:text-slate-900"
             suffix="Minutes"
           />
           <Button

src/components/Form/FormInput.tsx

@@ -6,6 +6,7 @@ import { Input } from "@components/UI/Input.tsx";
 import type { ChangeEventHandler } from "react";
 import { useState } from "react";
 import { useController, type FieldValues } from "react-hook-form";
+import { cn } from "@core/utils/cn.ts";
 
 export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
   type: "text" | "number" | "password";
@@ -15,6 +16,7 @@ export interface InputFieldProps<T> extends BaseFormBuilderProps<T> {
     prefix?: string;
     suffix?: string;
     step?: number;
+    className?: string;
     fieldLength?: {
       min?: number;
       max?: number;
@@ -63,6 +65,7 @@ export function GenericInput<T extends FieldValues>({
         onChange={handleInputChange}
         showCopyButton={field.properties?.showCopyButton}
         showPasswordToggle={field.properties?.showPasswordToggle || field.type === "password"}
+        className={field.properties?.className}
         {...restProperties}
         disabled={disabled}
       />

src/components/PageComponents/Config/Bluetooth.tsx

@@ -1,5 +1,5 @@
 import { useAppStore } from "../../../core/stores/appStore.ts";
-import type { BluetoothValidation } from "@app/validation/config/bluetooth.tsx";
+import type { BluetoothValidation } from "@app/validation/config/bluetooth.ts";
 import { create } from "@bufbuild/protobuf";
 import { DynamicForm } from "@components/Form/DynamicForm.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";

src/components/PageComponents/Connect/BLE.tsx

@@ -43,7 +43,7 @@ export const BLE = ({ setConnectionInProgress, closeDialog }: TabElementProps) =
         {bleDevices.map((device) => (
           <Button
             key={device.id}
-            className="dark:bg-slate-900 dark:text-white"
+            variant="default"
             onClick={() => {
               setConnectionInProgress(true);
               onConnect(device);
@@ -57,8 +57,10 @@ export const BLE = ({ setConnectionInProgress, closeDialog }: TabElementProps) =
         )}
       </div>
       <Button
-        className="dark:bg-slate-900 dark:text-white"
+        variant="default"
         onClick={async () => {
+
+
           await navigator.bluetooth
             .requestDevice({
               filters: [{ services: [ServiceUuid] }],

src/components/PageComponents/Connect/HTTP.tsx

@@ -74,7 +74,7 @@ export const HTTP = ({ closeDialog, setConnectionInProgress, connectionInProgres
           <Input
             prefix={tlsValue ? "https://" : "http://"}
             placeholder="000.000.000.000 / meshtastic.local"
-            className="text-slate-900 dark:text-slate-900"
+            className="text-slate-900 dark:text-slate-100"
             {...register("ip")}
           />
         </div>
@@ -120,7 +120,7 @@ export const HTTP = ({ closeDialog, setConnectionInProgress, connectionInProgres
       </div>
       <Button
         type="submit"
-        className="dark:bg-slate-900 dark:text-white"
+        variant={"default"}
       >
         <span>{connectionInProgress ? "Connecting..." : "Connect"}</span>
       </Button>

src/components/PageComponents/Connect/Serial.tsx

@@ -52,7 +52,7 @@ export const Serial = ({ setConnectionInProgress, closeDialog }: TabElementProps
             <Button
               key={`${usbVendorId ?? "UNK"}-${usbProductId ?? "UNK"}-${index}`}
               disabled={port.readable !== null}
-              className="dark:bg-slate-900 dark:text-white"
+              variant="default"
               onClick={async () => {
                 setConnectionInProgress(true);
                 await onConnect(port);
@@ -68,7 +68,7 @@ export const Serial = ({ setConnectionInProgress, closeDialog }: TabElementProps
         )}
       </div>
       <Button
-        className="dark:bg-slate-900 dark:text-white"
+        variant="default"
         onClick={async () => {
           await navigator.serial.requestPort().then((port) => {
             setSerialPorts(serialPorts.concat(port));

src/components/PageComponents/Map/NodeDetail.tsx

@@ -49,7 +49,7 @@ export const NodeDetail = ({ node }: NodeDetailProps) => {
   }
 
   return (
-    <div className="dark:text-slate-900 p-1">
+    <div className="p-1">
       <div className="flex gap-2">
         <div className="flex flex-col items-center gap-2 min-w-6 pt-1">
           <Avatar text={shortName} size="sm" />

src/components/PageComponents/Messages/MessageInput.tsx

@@ -96,7 +96,8 @@ export const MessageInput = ({
 
           <Button
             type="submit"
-            className="dark:bg-white dark:text-slate-900 dark:hover:bg-slate-400 dark:hover:text-white"
+            variant={"default"}
+          // className=" dark:text-slate-900 dark:hover:bg-slate-400 dark:hover:text-white"
           >
             <SendIcon size={16} />
           </Button>

src/components/PageComponents/Messages/MessageItem.tsx

@@ -40,9 +40,9 @@ const StatusTooltip = ({ status, children }: { status: MessageStatus; children:
   <TooltipProvider delayDuration={300}>
     <Tooltip>
       <TooltipTrigger asChild>{children}</TooltipTrigger>
-      <TooltipContent className="bg-gray-800 text-white px-2 py-1 rounded text-xs">
+      <TooltipContent className="bg-slate-800 dark:bg-slate-600 text-white px-2 py-1 rounded text-xs">
         {status.displayText}
-        <TooltipArrow className="fill-gray-800" />
+        <TooltipArrow className="fill-slate-800" />
       </TooltipContent>
     </Tooltip>
   </TooltipProvider>
@@ -50,7 +50,7 @@ const StatusTooltip = ({ status, children }: { status: MessageStatus; children:
 
 const StatusIcon = ({ status, className }: { status: MessageStatus; className?: string }) => {
   const Icon = status.icon;
-  const iconClass = cn("w-3.5 h-3.5 shrink-0", className);
+  const iconClass = cn("size-4 shrink-0", className);
   return (
     <StatusTooltip status={status}>
       <span aria-label={status.ariaLabel} role="img">
@@ -110,10 +110,10 @@ export const MessageItem = ({ message }: MessageProps) => {
   // const avatarSizeClass = "size-11";
   const gridGapClass = "gap-x-2";
 
-  const baseTextStyle = "text-sm text-gray-800 dark:text-gray-200";
-  const nameTextStyle = "font-medium text-gray-900 dark:text-gray-100 mr-2";
-  const dateTextStyle = "text-gray-500 dark:text-gray-400";
-  const statusIconBaseColor = "text-gray-400 dark:text-gray-500";
+  const baseTextStyle = "text-sm text-slate-800 dark:text-slate-200";
+  const nameTextStyle = "font-medium text-slate-900 dark:text-slate-100 mr-2";
+  const dateTextStyle = "text-slate-500 dark:text-slate-400";
+  const statusIconBaseColor = "text-slate-400 dark:text-slate-400";
   const statusIconFailedColor = "text-red-500 dark:text-red-400";
 
   return (

src/components/PageLayout.tsx

@@ -22,11 +22,11 @@ export interface PageLayoutProps {
   children: React.ReactNode;
   leftBar?: React.ReactNode;
   rightBar?: React.ReactNode;
-  className?: string;
   noPadding?: boolean;
   leftBarClassName?: string;
   rightBarClassName?: string;
   topBarClassName?: string;
+  contentClassName?: string;
 }
 
 export const PageLayout = ({
@@ -35,11 +35,11 @@ export const PageLayout = ({
   children,
   leftBar,
   rightBar,
-  className,
   noPadding,
   leftBarClassName,
   rightBarClassName,
   topBarClassName,
+  contentClassName
 }: PageLayoutProps) => {
   return (
     <ErrorBoundary FallbackComponent={ErrorPage}>
@@ -100,7 +100,7 @@ export const PageLayout = ({
               "flex-1 flex flex-col",
               "overflow-hidden",
               !noPadding && "px-2",
-              className
+              contentClassName
             )}
           >
             {children}

src/components/UI/Button.tsx

@@ -8,13 +8,13 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-slate-900 text-white dark:bg-slate-900 hover:dark:bg-slate-700 dark:text-slate-100 hover:bg-slate-800 ",
+          "bg-slate-900 text-white dark:bg-slate-200 hover:dark:bg-slate-300 dark:text-slate-900 hover:bg-slate-500",
         destructive:
           "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600",
         success:
           "bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600",
         outline:
-          "bg-transparent border border-slate-400 hover:bg-slate-100 dark:border-slate-400 dark:text-slate-500",
+          "bg-transparent border border-slate-400 hover:text-slate-100 dark:hover:text-slate-300 dark:border-slate-400 dark:text-slate-100 ",
         subtle:
           "bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-500 dark:text-white dark:hover:bg-slate-400",
         ghost:

src/components/UI/Checkbox/index.tsx

@@ -71,7 +71,7 @@ export function Checkbox({
           >
             {isChecked && (
               <div className="animate-fade-in scale-100 opacity-100">
-                <Check className="w-4 h-4 text-slate-900 dark:text-slate-900" />
+                <Check className="w-4 h-4 text-slate-900 dark:text-slate-200" />
               </div>
             )}
           </div>

src/components/UI/Command.tsx

@@ -88,7 +88,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden py-3 px-2 text-slate-700 dark:text-slate-400 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-slate-900 dark:[&_[cmdk-group-heading]]:text-slate-300",
+      "overflow-hidden py-3 px-2 text-slate-700 dark:text-slate-200 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-slate-900 dark:[&_[cmdk-group-heading]]:text-slate-300",
       className,
     )}
     {...props}
@@ -103,7 +103,7 @@ const CommandSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 h-px bg-slate-100 dark:bg-slate-700", className)}
+    className={cn("-mx-1 h-px bg-slate-100 dark:bg-slate-200", className)}
     {...props}
   />
 ));

src/components/UI/Dialog.tsx

@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed z-50 grid w-full bg-white  max-w-[512px] max-h-[100vh] overflow-y-auto scale-100 gap-4 p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0 dark:text-slate-900",
+        "fixed z-50 grid w-full bg-slate-100 dark:bg-slate-700 dark:text-slate-200 text-slate-900 max-w-[512px] max-h-[100vh] overflow-y-auto scale-100 gap-4 p-6 opacity-100 animate-in fade-in-90 slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 sm:slide-in-from-bottom-0",
         className,
       )}
       {...props}
@@ -106,7 +106,7 @@ const DialogTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold text-slate-900", className)}
+    className={cn("text-lg font-semibold text-slate-900 dark:text-slate-100", className)}
     {...props}
   />
 ));
@@ -118,7 +118,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-slate-700", className)}
+    className={cn("text-sm text-slate-800 dark:text-slate-200", className)}
     {...props}
   />
 ));

src/components/UI/Input.tsx

@@ -6,11 +6,11 @@ import { useCopyToClipboard } from "@core/hooks/useCopyToClipboard.ts";
 import { usePasswordVisibilityToggle } from "@core/hooks/usePasswordVisibilityToggle.ts";
 
 const inputVariants = cva(
-  "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-600",
+  "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-slate-400 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:bg-transparet dark:text-slate-100 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-600",
   {
     variants: {
       variant: {
-        default: "border-slate-300 dark:border-slate-700",
+        default: "border-slate-300 dark:border-slate-500",
         invalid:
           "border-red-500 dark:border-red-500 focus:ring-red-500 dark:focus:ring-red-500",
       },
@@ -26,7 +26,7 @@ type InputActionType = {
   icon: LucideIcon;
   onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
   ariaLabel: string;
-  tooltip?: string;
+  tooltip?: string
   condition?: boolean;
 };
 
@@ -128,7 +128,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className={cn("relative flex w-full items-stretch", containerClassName)}>
         {prefix && (
-          <span className="inline-flex items-center rounded-l-md border border-r-0 border-slate-300 bg-slate-100/80 px-3 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-700 dark:text-slate-300">
+          <span className="inline-flex items-center rounded-l-md border border-r-0 border-slate-300 bg-slate-100/80 px-3 text-sm text-slate-600 dark:border-slate-700 dark:bg-slate-200 dark:text-slate-700">
             {prefix}
           </span>
         )}

src/components/UI/Tabs.tsx

@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex flex-wrap items-center rounded-md  p-1 mt-2 bg-slate-200 dark:bg-slate-200",
+      "inline-flex flex-wrap items-center rounded-md  p-1 mt-2 bg-slate-200 dark:bg-slate-100",
       className,
     )}
     {...props}

src/components/UI/Toast.tsx

@@ -28,7 +28,7 @@ const toastVariants = cva(
     variants: {
       variant: {
         default:
-          "border bg-backgound-primary text-foreground dark:bg-white dark:border-slate-600 dark:text-slate-900",
+          "border bg-backgound-primary text-foreground dark:bg-slate-100 dark:border-slate-600 dark:text-slate-900",
         destructive:
           "group destructive bg-red-600 text-white dark:border-red-900 dark:bg-red-900 dark:text-red-50",
       },

src/components/UI/Tooltip.tsx

@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400",
+      "z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-200",
       className,
     )}
     {...props}

src/components/UI/Typography/Link.tsx

@@ -12,7 +12,7 @@ export const Link = ({ href, children, className }: LinkProps) => (
     target="_blank"
     rel="noopener noreferrer"
     className={cn(
-      "font-medium text-slate-900 underline underline-offset-4 dark:text-slate-900",
+      "font-medium text-slate-900 underline underline-offset-4 dark:text-slate-200",
       className,
     )}
   >

src/components/UI/Typography/Subtle.tsx

@@ -6,7 +6,7 @@ export interface SubtleProps {
 }
 
 export const Subtle = ({ className, children }: SubtleProps) => (
-  <p className={cn("text-sm text-slate-500 dark:text-slate-400", className)}>
+  <p className={cn("text-sm text-slate-500 dark:text-slate-300", className)}>
     {children}
   </p>
 );

src/pages/Config/DeviceConfig.tsx

@@ -52,7 +52,7 @@ export const DeviceConfig = () => {
 
   return (
     <Tabs defaultValue="Device">
-      <TabsList className="dark:bg-slate-800">
+      <TabsList className="dark:bg-slate-700">
         {tabs.map((tab) => (
           <TabsTrigger
             key={tab.label}

src/pages/Config/index.tsx

@@ -93,6 +93,7 @@ const ConfigPage = () => {
     <>
 
       <PageLayout
+        contentClassName="overflow-auto"
         leftBar={leftSidebar}
         label={activeConfigSection === "device"
           ? "Radio Config"

src/pages/Dashboard/index.tsx

@@ -99,7 +99,7 @@ export const Dashboard = () => {
                 <Heading as="h3">No Devices</Heading>
                 <Subtle>Connect at least one device to get started</Subtle>
                 <Button
-                  className="gap-2 dark:bg-white dark:text-slate-900 dark:hover:text-slate-100"
+                  className="gap-2"
                   variant="default"
                   onClick={() => setConnectDialogOpen(true)}
                 >

src/pages/Messages.tsx

@@ -113,7 +113,6 @@ export const MessagesPage = () => {
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
           showClearButton={!!searchTerm}
-          className={cn('relative w-full p-2 border border-slate-300 rounded-sm bg-white text-slate-900 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100 focus:outline-none focus:ring-1 focus:ring-slate-700 focus:dark:ring-slate-100')}
         />
       </label>
       <div className={cn(