From cf3922fab8ed1ee104a13fbf3a0453aba7abf4fb Mon Sep 17 00:00:00 2001 From: Michael Giek Date: Sat, 9 Aug 2025 07:57:27 +0200 Subject: [PATCH 01/10] #2 - add theming support with light and dark modes --- index.html | 2 +- src/renderer/App.tsx | 29 ++++---- .../components/shared/ThemeToggle.tsx | 59 +++++++++++++++++ src/renderer/components/sidebar/FooterBar.tsx | 6 +- src/renderer/contexts/ThemeContext.tsx | 66 +++++++++++++++++++ src/renderer/styles/global.css | 4 +- src/renderer/styles/tailwind.css | 63 +++++++++++++++--- 7 files changed, 204 insertions(+), 25 deletions(-) create mode 100644 src/renderer/components/shared/ThemeToggle.tsx create mode 100644 src/renderer/contexts/ThemeContext.tsx diff --git a/index.html b/index.html index 63caa79e..7e40621a 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Trufos - +
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index 41f21b0b..5782cd34 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -5,6 +5,7 @@ import { RequestWindow } from '@/view/RequestWindow'; import { SidebarProvider } from '@/components/ui/sidebar'; import { TooltipProvider } from '@/components/ui/tooltip'; import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from '@/components/ui/resizable'; +import { ThemeProvider } from '@/contexts/ThemeContext'; import { useEffect, useState } from 'react'; const MIN_SIDEBAR_PIXELS = 300; @@ -32,18 +33,20 @@ export const App = () => { }, []); return ( - - - - - - - - - - - - - + + + + + + + + + + + + + + + ); }; diff --git a/src/renderer/components/shared/ThemeToggle.tsx b/src/renderer/components/shared/ThemeToggle.tsx new file mode 100644 index 00000000..a222b232 --- /dev/null +++ b/src/renderer/components/shared/ThemeToggle.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { Button } from '@/components/ui/button'; +import { useTheme } from '@/contexts/ThemeContext'; + +const SunIcon = () => ( + + + + + + + + + + + +); + +const MoonIcon = () => ( + + + +); + +export const ThemeToggle: React.FC = () => { + const { theme, toggleTheme } = useTheme(); + + return ( + + ); +}; diff --git a/src/renderer/components/sidebar/FooterBar.tsx b/src/renderer/components/sidebar/FooterBar.tsx index e7dd0fc0..2898753e 100644 --- a/src/renderer/components/sidebar/FooterBar.tsx +++ b/src/renderer/components/sidebar/FooterBar.tsx @@ -5,6 +5,7 @@ import { GithubIcon } from '@/components/icons'; import { SettingsModal } from '@/components/shared/settings/SettingsModal'; import { Divider } from '@/components/shared/Divider'; import { SidebarFooter } from '@/components/ui/sidebar'; +import { ThemeToggle } from '@/components/shared/ThemeToggle'; export function FooterBar() { const [appVersion, setAppVersion] = useState(undefined); @@ -17,12 +18,15 @@ export function FooterBar() {
- {/* Settings and icon on the left */} + {/* Settings and theme toggle on the left */}
Settings +
+ +
diff --git a/src/renderer/contexts/ThemeContext.tsx b/src/renderer/contexts/ThemeContext.tsx new file mode 100644 index 00000000..31feeaca --- /dev/null +++ b/src/renderer/contexts/ThemeContext.tsx @@ -0,0 +1,66 @@ +import React, { createContext, useContext, useEffect, useState } from 'react'; + +type Theme = 'light' | 'dark'; + +interface ThemeContextType { + theme: Theme; + setTheme: (theme: Theme) => void; + toggleTheme: () => void; +} + +const ThemeContext = createContext(undefined); + +export const useTheme = () => { + const context = useContext(ThemeContext); + if (context === undefined) { + throw new Error('useTheme must be used within a ThemeProvider'); + } + return context; +}; + +interface ThemeProviderProps { + children: React.ReactNode; + defaultTheme?: Theme; +} + +export const ThemeProvider: React.FC = ({ + children, + defaultTheme = 'dark', +}) => { + const [theme, setTheme] = useState(defaultTheme); + + useEffect(() => { + const savedTheme = localStorage.getItem('theme') as Theme; + if (savedTheme && (savedTheme === 'light' || savedTheme === 'dark')) { + setTheme(savedTheme); + } + }, []); + + useEffect(() => { + const root = document.documentElement; + + // Remove both classes first + root.classList.remove('light', 'dark'); + + // Add the current theme class + root.classList.add(theme); + + // Save to localStorage + localStorage.setItem('theme', theme); + + // Debug log + console.log('Theme changed to:', theme, 'Classes:', root.classList.toString()); + }, [theme]); + + const toggleTheme = () => { + setTheme((prev) => (prev === 'light' ? 'dark' : 'light')); + }; + + const value = { + theme, + setTheme, + toggleTheme, + }; + + return {children}; +}; diff --git a/src/renderer/styles/global.css b/src/renderer/styles/global.css index 900483db..d17f32b1 100644 --- a/src/renderer/styles/global.css +++ b/src/renderer/styles/global.css @@ -1,6 +1,6 @@ /* Add the following to your global CSS file */ -/* Colors */ +/* Colors - now using CSS variables for theming */ .success { color: var(--success); } @@ -29,7 +29,7 @@ color: var(--http-patch); } -/* Tabs scrollbar styles */ +/* Tabs scrollbar styles - now theme-aware */ .tabs-scrollbar::-webkit-scrollbar { width: 8px; /* Width of the scrollbar */ } diff --git a/src/renderer/styles/tailwind.css b/src/renderer/styles/tailwind.css index 8d8afb3f..2b40fa2f 100644 --- a/src/renderer/styles/tailwind.css +++ b/src/renderer/styles/tailwind.css @@ -37,6 +37,7 @@ @layer base { /* Light theme moved under .light class so dark becomes default */ .light { + /* Standard shadcn variables for light mode */ --background: 0 0% 100%; --foreground: 222.2 47.4% 11.2%; @@ -69,11 +70,36 @@ --ring: 215 20.2% 65.1%; + --divider: 214.3 31.8% 91.4%; + --radius: 0.5rem; - width: 100vw; - height: 100vh; + /* Custom light mode variables */ + --accent-primary: #1e40af; + --accent-secondary: #3b82f6; + --accent-tertiary: #dbeafe; + + --background-primary: #ffffff; + --background-secondary: #f8fafc; + --background-tertiary: #f1f5f9; + + --text-primary: #1e293b; + --text-secondary: #64748b; + + /* HTTP method colors for light mode */ + --http-get: #059669; + --http-put: #0284c7; + --http-post: #7c3aed; + --http-delete: #dc2626; + --http-patch: #ea580c; + --disabled: #94a3b8; + /* State colors for light mode */ + --success: #16a34a; + --error: #dc2626; + --warning: #d97706; + + /* Sidebar colors for light mode */ --sidebar-background: 0 0% 98%; --sidebar-foreground: 240 5.3% 26.1%; --sidebar-primary: 240 5.9% 10%; @@ -154,9 +180,6 @@ --muted: 0 0% 20%; --muted-foreground: 0 0% 100%; - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; - --popover: 224 71% 4%; --popover-foreground: 215 20.2% 65.1%; @@ -172,8 +195,8 @@ --secondary: 196.5 44.44% 17.65%; --secondary-foreground: 195 94% 72%; - --tertiary: 195.21 85.54% 48.82%; - --tertiary-foreground: 0 0% 13%; + --accent: 216 34% 17%; + --accent-foreground: 210 40% 98%; --destructive: 0 63% 31%; --destructive-foreground: 210 40% 98%; @@ -182,8 +205,32 @@ --divider: 0 0% 20%; - --radius: 0.5rem; + /* Custom dark mode variables */ + --accent-primary: #75D9FB; + --accent-secondary: #12B1E7; + --accent-tertiary: #193641; + + --background-primary: #111111; + --background-secondary: #1F1F1F; + --background-tertiary: transparent; + + --text-primary: #EEEEEE; + --text-secondary: #BBBBBB; + + /* HTTP method colors for dark mode */ + --http-get: #93F176; + --http-put: #37ABFF; + --http-post: #9F72FE; + --http-delete: #EE5C99; + --http-patch: #EFA349; + --disabled: #444444; + + /* State colors for dark mode */ + --success: #2BB361; + --error: #BD5151; + --warning: #F9AA2D; + /* Sidebar colors for dark mode */ --sidebar-background: 240 5.9% 10%; --sidebar-foreground: 240 4.8% 95.9%; From c2183634bf1808c9e1e096313f766d002b034386 Mon Sep 17 00:00:00 2001 From: Michael Giek Date: Wed, 8 Oct 2025 22:35:20 +0200 Subject: [PATCH 02/10] #2 implement dynamic theming in MonacoEditor --- src/renderer/lib/monaco/MonacoEditor.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/src/renderer/lib/monaco/MonacoEditor.tsx b/src/renderer/lib/monaco/MonacoEditor.tsx index 57e4953e..96d27985 100644 --- a/src/renderer/lib/monaco/MonacoEditor.tsx +++ b/src/renderer/lib/monaco/MonacoEditor.tsx @@ -1,11 +1,8 @@ import { Editor, EditorProps } from '@monaco-editor/react'; +import { useTheme } from '@/contexts/ThemeContext'; export default function MonacoEditor(props: EditorProps) { - return ( - - ); + const { theme } = useTheme(); + + return ; } From 1b7b7669be04678d8a3bd9c535f07e0c4f370089 Mon Sep 17 00:00:00 2001 From: Michael Giek Date: Thu, 9 Oct 2025 21:16:03 +0200 Subject: [PATCH 03/10] #2 refactor theming implementation and update CSS variables --- src/renderer/components/ui/sonner.tsx | 4 +- src/renderer/styles/tailwind.css | 120 +++++++------------------- 2 files changed, 35 insertions(+), 89 deletions(-) diff --git a/src/renderer/components/ui/sonner.tsx b/src/renderer/components/ui/sonner.tsx index 025e268f..2e553b8a 100644 --- a/src/renderer/components/ui/sonner.tsx +++ b/src/renderer/components/ui/sonner.tsx @@ -1,10 +1,10 @@ -import { useTheme } from 'next-themes'; +import { useTheme } from '@/contexts/ThemeContext'; import { Toaster as Sonner } from 'sonner'; type ToasterProps = React.ComponentProps; const Toaster = ({ ...props }: ToasterProps) => { - const { theme = 'system' } = useTheme(); + const { theme } = useTheme(); return ( Date: Mon, 13 Oct 2025 13:50:37 +0200 Subject: [PATCH 04/10] #2 - cleanup --- src/renderer/index.tsx | 4 +-- src/renderer/styles/tailwind.css | 47 ++++++++++---------------------- 2 files changed, 15 insertions(+), 36 deletions(-) diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx index 199df008..119fbeee 100644 --- a/src/renderer/index.tsx +++ b/src/renderer/index.tsx @@ -10,7 +10,7 @@ import { RendererEventService } from '@/services/event/renderer-event-service'; import { useCollectionStore } from '@/state/collectionStore'; import winston from 'winston'; -import('@/lib/monaco/config'); // lazy load monaco editor to improve startup time +import('@/lib/monaco/config.js'); // lazy load monaco editor to improve startup time // set up store const { initialize } = useCollectionStore.getState(); @@ -23,8 +23,6 @@ declare global { } } -document.getElementById('body')?.classList.add('dark'); - const container = document.getElementById('root'); const root = createRoot(container); diff --git a/src/renderer/styles/tailwind.css b/src/renderer/styles/tailwind.css index 2b1c948e..78c88e42 100644 --- a/src/renderer/styles/tailwind.css +++ b/src/renderer/styles/tailwind.css @@ -1,13 +1,12 @@ @import 'tailwindcss'; @plugin 'tailwindcss-animate'; - -@variant dark (.dark &); +@custom-variant dark (&:where(.dark, .dark *)); +@custom-variant light (&:where(.light, .light *)); @utility container { margin-inline: auto; padding-inline: 2rem; - /* Fixed theme() function usage */ @media (width >= theme(--breakpoint-sm)) { max-width: none; } @@ -16,27 +15,20 @@ } } -/* - The default border color has changed to `currentcolor` in Tailwind CSS v4, - so we've added these compatibility styles to make sure everything still - looks the same as it did with Tailwind CSS v3. - - If we ever want to remove these styles, we need to add an explicit border - color utility to any element that depends on these defaults. -*/ @layer base { - *, - ::after, - ::before, - ::backdrop, - ::file-selector-button { - border-color: var(--color-gray-200, currentcolor); + * { + @apply border-border; } -} -@layer base { + body { + @apply bg-background text-foreground; + font-feature-settings: + 'rlig' 1, + 'calt' 1; + } + + /* Light Theme */ :root { - /* Standard shadcn variables for light mode (default) */ --background: 0 0% 100%; --foreground: 222.2 47.4% 11.2%; @@ -118,6 +110,7 @@ color-scheme: light; } + /* Dark Theme */ .dark { --background: 0 0% 6.67%; --foreground: 213 31% 91%; @@ -196,19 +189,7 @@ } } -@layer base { - * { - @apply border-border; - } - - body { - @apply bg-background text-foreground; - font-feature-settings: - 'rlig' 1, - 'calt' 1; - } -} - +/* Theme Variables */ @theme { --radius-lg: var(--radius); --radius-md: calc(var(--radius) - 2px); From d0ced1882341710197c6e16dd204c9f302263c89 Mon Sep 17 00:00:00 2001 From: SoulKa Date: Mon, 13 Oct 2025 14:24:13 +0200 Subject: [PATCH 05/10] #2 - consolidate CSS files --- src/renderer/App.tsx | 3 +- src/renderer/index.tsx | 5 +- src/renderer/styles/global.css | 78 ------------------- .../styles/{tailwind.css => index.css} | 62 +++++++++++++++ 4 files changed, 64 insertions(+), 84 deletions(-) delete mode 100644 src/renderer/styles/global.css rename src/renderer/styles/{tailwind.css => index.css} (83%) diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx index 5782cd34..d876517f 100644 --- a/src/renderer/App.tsx +++ b/src/renderer/App.tsx @@ -1,5 +1,4 @@ -import '@/styles/tailwind.css'; -import '@/styles/global.css'; +import '@/styles/index.css'; import { Menubar } from '@/view/Menubar'; import { RequestWindow } from '@/view/RequestWindow'; import { SidebarProvider } from '@/components/ui/sidebar'; diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx index 119fbeee..35bd62e3 100644 --- a/src/renderer/index.tsx +++ b/src/renderer/index.tsx @@ -1,9 +1,6 @@ import '@/logging/console'; import { enableMapSet } from 'immer'; - -enableMapSet(); - -import '@/styles/tailwind.css'; +enableMapSet(); // immer support for Map and Set import { createRoot } from 'react-dom/client'; import { App } from '@/App'; import { RendererEventService } from '@/services/event/renderer-event-service'; diff --git a/src/renderer/styles/global.css b/src/renderer/styles/global.css deleted file mode 100644 index d17f32b1..00000000 --- a/src/renderer/styles/global.css +++ /dev/null @@ -1,78 +0,0 @@ -/* Add the following to your global CSS file */ - -/* Colors - now using CSS variables for theming */ -.success { - color: var(--success); -} - -.error { - color: var(--error); -} - -.http-method-color-get { - color: var(--http-get); -} - -.http-method-color-put { - color: var(--http-put); -} - -.http-method-color-post { - color: var(--http-post); -} - -.http-method-color-delete { - color: var(--http-delete); -} - -.http-method-color-patch { - color: var(--http-patch); -} - -/* Tabs scrollbar styles - now theme-aware */ -.tabs-scrollbar::-webkit-scrollbar { - width: 8px; /* Width of the scrollbar */ -} - -.tabs-scrollbar::-webkit-scrollbar-track { - background: transparent; /* Background of the scrollbar track */ -} - -.tabs-scrollbar::-webkit-scrollbar-thumb { - background: var(--disabled); /* Color of the scrollbar thumb */ - border-radius: 4px; /* Rounded corners for the thumb */ -} - -.tabs-scrollbar::-webkit-scrollbar-thumb:hover { - background: var(--scrollbar-thumb-hover); -} - -.scrollbar > .slider { - background: var(--disabled); - border-radius: 4px; -} - -.response-status { -} - -body { - font-family: "Lato", sans-serif; - color: var(--text-primary); - font-weight: 400; -} - -.sidebar-request-list-item { - color: var(--text-secondary); - font-size: 12px; -} - -.sidebar-request-list-item.selected { - background-color: var(--disabled); - color: var(--text-primary); -} - -.sidebar-item.selected { - background: hsl(var(--sidebar-primary)); - color: hsl(var(--sidebar-primary-foreground)); - font-weight: bold; -} diff --git a/src/renderer/styles/tailwind.css b/src/renderer/styles/index.css similarity index 83% rename from src/renderer/styles/tailwind.css rename to src/renderer/styles/index.css index 78c88e42..0b22bef6 100644 --- a/src/renderer/styles/tailwind.css +++ b/src/renderer/styles/index.css @@ -25,6 +25,9 @@ font-feature-settings: 'rlig' 1, 'calt' 1; + font-family: 'Lato', sans-serif; + color: var(--text-primary); + font-weight: 400; } /* Light Theme */ @@ -189,6 +192,65 @@ } } +/* Consolidated from former global.css */ +@layer utilities { + .success { + color: var(--success); + } + .error { + color: var(--error); + } + .http-method-color-get { + color: var(--http-get); + } + .http-method-color-put { + color: var(--http-put); + } + .http-method-color-post { + color: var(--http-post); + } + .http-method-color-delete { + color: var(--http-delete); + } + .http-method-color-patch { + color: var(--http-patch); + } + + /* Scrollbar (webkit) */ + .tabs-scrollbar::-webkit-scrollbar { + width: 8px; + } + .tabs-scrollbar::-webkit-scrollbar-track { + background: transparent; + } + .tabs-scrollbar::-webkit-scrollbar-thumb { + background: var(--disabled); + border-radius: 4px; + } + .tabs-scrollbar::-webkit-scrollbar-thumb:hover { + background: var(--scrollbar-thumb-hover); + } + + .scrollbar > .slider { + background: var(--disabled); + border-radius: 4px; + } + + .sidebar-request-list-item { + color: var(--text-secondary); + font-size: 12px; + } + .sidebar-request-list-item.selected { + background-color: var(--disabled); + color: var(--text-primary); + } + .sidebar-item.selected { + background: hsl(var(--sidebar-primary)); + color: hsl(var(--sidebar-primary-foreground)); + font-weight: bold; + } +} + /* Theme Variables */ @theme { --radius-lg: var(--radius); From 06a5fd3617c23b105095d75e41f064463f192b9a Mon Sep 17 00:00:00 2001 From: SoulKa Date: Mon, 13 Oct 2025 14:35:10 +0200 Subject: [PATCH 06/10] #2 - add TS module declaration for CSS --- src/renderer/styles/index.d.ts | 1 + 1 file changed, 1 insertion(+) create mode 100644 src/renderer/styles/index.d.ts diff --git a/src/renderer/styles/index.d.ts b/src/renderer/styles/index.d.ts new file mode 100644 index 00000000..35306c6f --- /dev/null +++ b/src/renderer/styles/index.d.ts @@ -0,0 +1 @@ +declare module '*.css'; From cb1351921ca8707d29bcaab82588ed0d9a0fee45 Mon Sep 17 00:00:00 2001 From: SoulKa Date: Mon, 13 Oct 2025 15:26:06 +0200 Subject: [PATCH 07/10] #2 - adjust some colors --- src/renderer/styles/index.css | 224 +++++++++++++++++----------------- 1 file changed, 113 insertions(+), 111 deletions(-) diff --git a/src/renderer/styles/index.css b/src/renderer/styles/index.css index 0b22bef6..ae099026 100644 --- a/src/renderer/styles/index.css +++ b/src/renderer/styles/index.css @@ -32,121 +32,123 @@ /* Light Theme */ :root { - --background: 0 0% 100%; - --foreground: 222.2 47.4% 11.2%; + --background: hsl(0 0% 100%); + --foreground: hsl(222.2 47.4% 11.2%); - --danger: #ff5555; + --danger: #ca464e; --overlay: rgba(0, 0, 0, 0.8); - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; + --muted: hsl(210 40% 96.1%); + --muted-foreground: hsl(215.4 16.3% 46.9%); - --popover: 0 0% 100%; - --popover-foreground: 222.2 47.4% 11.2%; + --popover: hsl(0 0% 100%); + --popover-foreground: hsl(222.2 47.4% 11.2%); - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; + --border: hsl(214.3 31.8% 91.4%); + --input: hsl(214.3 31.8% 91.4%); - --card: 0 0% 100%; - --card-foreground: 222.2 47.4% 11.2%; + --card: hsl(0 0% 100%); + --card-foreground: hsl(222.2 47.4% 11.2%); - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; + --primary: hsl(222.2 47.4% 11.2%); + --primary-foreground: hsl(210 40% 98%); - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; + --secondary: hsl(210 40% 96.1%); + --secondary-foreground: hsl(222.2 47.4% 11.2%); - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; + --accent: hsl(210 40% 96.1%); + --accent-foreground: hsl(222.2 47.4% 11.2%); - --destructive: 0 100% 50%; - --destructive-foreground: 210 40% 98%; + --destructive: hsl(0 100% 50%); + --destructive-foreground: hsl(210 40% 98%); - --ring: 215 20.2% 65.1%; + --ring: hsl(215 20.2% 65.1%); - --divider: 214.3 31.8% 91.4%; + --divider: hsl(214.3 31.8% 91.4%); --radius: 0.5rem; - --accent-primary: #1e40af; - --accent-secondary: #3b82f6; + --accent-primary: #0098ed; + --accent-secondary: #e5f5fd; --accent-tertiary: #dbeafe; --background-primary: #ffffff; - --background-secondary: #f8fafc; + --background-secondary: #f2f3f5; --background-tertiary: #f1f5f9; - --text-primary: #1e293b; - --text-secondary: #64748b; + --text-primary: #263e4c; + --text-secondary: #3d5563; - --http-get: #059669; - --http-put: #0284c7; - --http-post: #7c3aed; - --http-delete: #dc2626; - --http-patch: #ea580c; + --http-get: #2cbb00; + --http-put: #00a2d9; + --http-post: #853aff; + --http-delete: #f845a6; + --http-patch: #d88f00; --disabled: #94a3b8; --success: #16a34a; --error: #dc2626; --warning: #d97706; - --sidebar-background: 0 0% 98%; - --sidebar-foreground: 240 5.3% 26.1%; - --sidebar-primary: 240 5.9% 10%; - --sidebar-primary-foreground: 0 0% 98%; - --sidebar-accent: 240 4.8% 95.9%; - --sidebar-accent-foreground: 240 5.9% 10%; - --sidebar-border: 220 13% 91%; - --sidebar-ring: 217.2 91.2% 59.8%; - - --svg-dark-gray: #444444; - --svg-medium-gray: #777777; - --svg-gray: #666666; - --svg-dark-gray-2: #555555; - --svg-light-gray: #999999; - --svg-teal: #0f2f38; - - --tertiary: 195 85% 48%; - --tertiary-foreground: 0 0% 100%; - - --scrollbar-thumb-hover: rgba(0, 0, 0, 0.3); + /* Sidebar (slightly lifted from background-tertiary) */ + --sidebar-background: #f8f9fb; + --sidebar-foreground: hsl(222 34% 25%); + --sidebar-primary: hsl(222 47% 16%); + --sidebar-primary-foreground: hsl(0 0% 98%); + --sidebar-accent: hsl(213 45% 92%); + --sidebar-accent-foreground: hsl(222 34% 25%); + --sidebar-border: hsl(215 28% 88%); + --sidebar-ring: hsl(213 89% 58%); + + /* SVG / icon grayscale ramp tuned to new neutrals */ + --svg-dark-gray: #495057; + --svg-medium-gray: #6b7480; + --svg-gray: #5e6670; + --svg-dark-gray-2: #555c63; + --svg-light-gray: #b3bcc5; + --svg-teal: #0f4554; + + --tertiary: hsl(195 85% 48%); + --tertiary-foreground: hsl(0 0% 100%); + + --scrollbar-thumb-hover: rgba(0, 0, 0, 0.28); color-scheme: light; } /* Dark Theme */ .dark { - --background: 0 0% 6.67%; - --foreground: 213 31% 91%; + --background: hsl(0 0% 6.67%); + --foreground: hsl(213 31% 91%); --overlay: rgba(0, 0, 0, 0.8); - --muted: 0 0% 20%; - --muted-foreground: 0 0% 100%; + --muted: hsl(0 0% 20%); + --muted-foreground: hsl(0 0% 100%); - --popover: 224 71% 4%; - --popover-foreground: 215 20.2% 65.1%; + --popover: hsl(224 71% 4%); + --popover-foreground: hsl(215 20.2% 65.1%); - --border: 0 0% 20%; - --input: 216 34% 17%; + --border: hsl(0 0% 20%); + --input: hsl(216 34% 17%); - --card: 0 0% 12%; - --card-foreground: 213 31% 91%; + --card: hsl(0 0% 12%); + --card-foreground: hsl(213 31% 91%); - --primary: 195 94% 72%; - --primary-foreground: 0 0% 13%; + --primary: hsl(195 94% 72%); + --primary-foreground: hsl(0 0% 13%); - --secondary: 196.5 44.44% 17.65%; - --secondary-foreground: 195 94% 72%; + --secondary: hsl(196.5 44.44% 17.65%); + --secondary-foreground: hsl(195 94% 72%); - --accent: 216 34% 17%; - --accent-foreground: 210 40% 98%; + --accent: hsl(216 34% 17%); + --accent-foreground: hsl(210 40% 98%); - --destructive: 0 63% 31%; - --destructive-foreground: 210 40% 98%; + --destructive: hsl(0 63% 31%); + --destructive-foreground: hsl(210 40% 98%); - --ring: 216 34% 17%; + --ring: hsl(216 34% 17%); - --divider: 0 0% 20%; + --divider: hsl(0 0% 20%); --accent-primary: #75d9fb; --accent-secondary: #12b1e7; @@ -179,14 +181,14 @@ --scrollbar-thumb-hover: rgba(0, 0, 0, 0.5); - --sidebar-background: 240 5.9% 10%; - --sidebar-foreground: 240 4.8% 95.9%; - --sidebar-primary: 224.3 76.3% 48%; - --sidebar-primary-foreground: 0 0% 100%; - --sidebar-accent: 240 3.7% 15.9%; - --sidebar-accent-foreground: 240 4.8% 95.9%; - --sidebar-border: 240 3.7% 15.9%; - --sidebar-ring: 217.2 91.2% 59.8%; + --sidebar-background: hsl(240 5.9% 10%); + --sidebar-foreground: hsl(240 4.8% 95.9%); + --sidebar-primary: hsl(224.3 76.3% 48%); + --sidebar-primary-foreground: hsl(0 0% 100%); + --sidebar-accent: hsl(240 3.7% 15.9%); + --sidebar-accent-foreground: hsl(240 4.8% 95.9%); + --sidebar-border: hsl(240 3.7% 15.9%); + --sidebar-ring: hsl(217.2 91.2% 59.8%); color-scheme: dark; } @@ -245,8 +247,8 @@ color: var(--text-primary); } .sidebar-item.selected { - background: hsl(var(--sidebar-primary)); - color: hsl(var(--sidebar-primary-foreground)); + background: var(--sidebar-primary); + color: var(--sidebar-primary-foreground); font-weight: bold; } } @@ -257,44 +259,44 @@ --radius-md: calc(var(--radius) - 2px); --radius-sm: calc(var(--radius) - 4px); - --color-background: hsl(var(--background)); + --color-background: var(--background); --color-background-primary: var(--background-primary); --color-background-secondary: var(--background-secondary); --color-background-tertiary: var(--background-tertiary); - --color-foreground: hsl(var(--foreground)); + --color-foreground: var(--foreground); - --color-card: hsl(var(--card)); - --color-card-foreground: hsl(var(--card-foreground)); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); - --color-popover: hsl(var(--popover)); - --color-popover-foreground: hsl(var(--popover-foreground)); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); - --color-primary: hsl(var(--primary)); - --color-primary-foreground: hsl(var(--primary-foreground)); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); - --color-secondary: hsl(var(--secondary)); - --color-secondary-foreground: hsl(var(--secondary-foreground)); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); - --color-tertiary: hsl(var(--tertiary)); - --color-tertiary-foreground: hsl(var(--tertiary-foreground)); + --color-tertiary: var(--tertiary); + --color-tertiary-foreground: var(--tertiary-foreground); - --color-muted: hsl(var(--muted)); - --color-muted-foreground: hsl(var(--muted-foreground)); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); - --color-accent: hsl(var(--accent)); - --color-accent-foreground: hsl(var(--accent-foreground)); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); --color-accent-primary: var(--accent-primary); --color-accent-secondary: var(--accent-secondary); --color-accent-tertiary: var(--accent-tertiary); - --color-destructive: hsl(var(--destructive)); - --color-destructive-foreground: hsl(var(--destructive-foreground)); + --color-destructive: var(--destructive); + --color-destructive-foreground: var(--destructive-foreground); - --color-border: hsl(var(--border)); - --color-input: hsl(var(--input)); - --color-ring: hsl(var(--ring)); - --color-divider: hsl(var(--divider)); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-divider: var(--divider); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); @@ -320,12 +322,12 @@ --color-disabled: var(--disabled); --color-overlay: var(--overlay); - --color-sidebar: hsl(var(--sidebar-background)); - --color-sidebar-foreground: hsl(var(--sidebar-foreground)); - --color-sidebar-primary: hsl(var(--sidebar-primary)); - --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground)); - --color-sidebar-accent: hsl(var(--sidebar-accent)); - --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground)); - --color-sidebar-border: hsl(var(--sidebar-border)); - --color-sidebar-ring: hsl(var(--sidebar-ring)); + --color-sidebar: var(--sidebar-background); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); } From 713e2238fd3b02fa5df8beb0ecbb41349926accc Mon Sep 17 00:00:00 2001 From: SoulKa Date: Thu, 16 Oct 2025 10:26:40 +0200 Subject: [PATCH 08/10] #2 - disable theme toggle button until theme finished --- src/renderer/components/sidebar/FooterBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/renderer/components/sidebar/FooterBar.tsx b/src/renderer/components/sidebar/FooterBar.tsx index 2898753e..3ef37fa3 100644 --- a/src/renderer/components/sidebar/FooterBar.tsx +++ b/src/renderer/components/sidebar/FooterBar.tsx @@ -24,9 +24,9 @@ export function FooterBar() { Settings -
+ {/*
-
+
*/}
From f96a07ee780ebc30b757973e87c32becfaf8eae1 Mon Sep 17 00:00:00 2001 From: SoulKa Date: Thu, 16 Oct 2025 10:28:55 +0200 Subject: [PATCH 09/10] #2 - make dark theme default for editor --- src/renderer/lib/monaco/MonacoEditor.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/lib/monaco/MonacoEditor.tsx b/src/renderer/lib/monaco/MonacoEditor.tsx index 96d27985..9e7c9bd2 100644 --- a/src/renderer/lib/monaco/MonacoEditor.tsx +++ b/src/renderer/lib/monaco/MonacoEditor.tsx @@ -4,5 +4,5 @@ import { useTheme } from '@/contexts/ThemeContext'; export default function MonacoEditor(props: EditorProps) { const { theme } = useTheme(); - return ; + return ; } From 52965e33785bd514235b14c856e6fb66619dfb41 Mon Sep 17 00:00:00 2001 From: SoulKa Date: Thu, 16 Oct 2025 10:35:10 +0200 Subject: [PATCH 10/10] #2 - formatting --- src/renderer/components/shared/ThemeToggle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderer/components/shared/ThemeToggle.tsx b/src/renderer/components/shared/ThemeToggle.tsx index a222b232..b52af807 100644 --- a/src/renderer/components/shared/ThemeToggle.tsx +++ b/src/renderer/components/shared/ThemeToggle.tsx @@ -50,7 +50,7 @@ export const ThemeToggle: React.FC = () => { variant="ghost" size="sm" onClick={toggleTheme} - className="h-8 w-8 p-0 hover:bg-sidebar-accent" + className="hover:bg-sidebar-accent h-8 w-8 p-0" title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`} > {theme === 'dark' ? : }