Skip to content

Commit 5126595

Browse files
echobtechobt
committed
fix(theme): replace hardcoded hex colors with CSS variables and apply theme settings at runtime
Issue #21896: Replace all hardcoded hex colors (#141415, #1C1C1D, #2E2F31) in shell layout components with corresponding CSS variables from cortex-tokens.css: - #141415 → var(--cortex-bg-primary) - #1C1C1D → var(--cortex-bg-secondary) - #2E2F31 → var(--cortex-border-default) Affected components: - CortexDesktopLayout.tsx - CortexSidebarContainer.tsx - EditorTabBar.tsx - CortexTitleBar.tsx - CortexEditorTabs.tsx - TitleBarDropdownMenu.tsx - CortexActivityBar.tsx - CortexCodeEditor.tsx - CortexFileExplorer.tsx - ExplorerHeader.tsx - EditorBreadcrumbs.tsx - CortexIDELayout.tsx - EnhancedStatusBar.tsx - CortexNotifications.tsx Issue #21897: Add createEffect in AppCore.tsx AppContent that reads settings.theme.uiFontFamily, settings.theme.uiFontSize, and settings.theme.zoomLevel from SettingsContext and applies them to document.documentElement.style at runtime.
1 parent a92b3d3 commit 5126595

17 files changed

+53
-40
lines changed

‎src/AppCore.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import { useEditor } from "@/context/EditorContext";
3434
import { useExtensions } from "@/context/ExtensionsContext";
3535
import { useCommands } from "@/context/CommandContext";
3636
import { useLayout } from "@/context/LayoutContext";
37+
import { useSettings } from "@/context/SettingsContext";
3738
import { useNotifications } from "@/context/NotificationsContext";
3839
import { useOutput } from "@/context/OutputContext";
3940
import { useWindowEvents } from "@/hooks/useWindowEvents";
@@ -274,6 +275,7 @@ function AppContent(props: ParentProps) {
274275
const layout = useLayout();
275276
const notifications = useNotifications();
276277
const output = useOutput();
278+
const settingsCtx = useSettings();
277279

278280
// Window lifecycle events (close-requested with dirty file prompt, focus/blur,
279281
// beforeunload, visibilitychange, force-close cleanup)
@@ -282,6 +284,14 @@ function AppContent(props: ParentProps) {
282284
// Auto-save dirty files based on user settings (afterDelay, onFocusChange, onWindowChange)
283285
useAutoSave();
284286

287+
createEffect(() => {
288+
const theme = settingsCtx.settings().theme;
289+
const root = document.documentElement.style;
290+
root.setProperty("font-family", theme.uiFontFamily);
291+
root.setProperty("font-size", `${theme.uiFontSize}px`);
292+
root.setProperty("zoom", String(theme.zoomLevel));
293+
});
294+
285295
// Global error handler (unhandled rejections, uncaught errors)
286296
let cleanupErrorHandler: (() => void) | undefined;
287297

@@ -450,6 +460,9 @@ function AppContent(props: ParentProps) {
450460
window.removeEventListener("dev:inspector", handleDevInspector);
451461
if (mcpCleanup) mcpCleanup();
452462
if (cleanupErrorHandler) cleanupErrorHandler();
463+
document.documentElement.style.removeProperty("font-family");
464+
document.documentElement.style.removeProperty("font-size");
465+
document.documentElement.style.removeProperty("zoom");
453466
invoke("unregister_window", { label: getWindowLabel() }).catch(() => {});
454467
});
455468

‎src/components/cortex/CortexActivityBar.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export const CortexActivityBar: Component<CortexActivityBarProps> = (props) => {
6868
"margin-bottom": "var(--cortex-space-2)",
6969
background: "var(--cortex-sidebar-bg)",
7070
"border-radius": "var(--cortex-sidebar-radius)",
71-
border: "1px solid #2E2F31",
71+
border: "1px solid var(--cortex-border-default)",
7272
padding: "var(--cortex-space-1)",
7373
"flex-shrink": "0",
7474
...local.style,
@@ -140,7 +140,7 @@ const ActivityBarButton: Component<ActivityBarButtonProps> = (props) => {
140140
};
141141

142142
const iconColor = () => {
143-
if (props.isActive) return "#141415";
143+
if (props.isActive) return "var(--cortex-icon-active)";
144144
if (isHovered()) return "#FCFCFC";
145145
return "#8C8D8F";
146146
};
@@ -187,7 +187,7 @@ const ActivityBarButton: Component<ActivityBarButtonProps> = (props) => {
187187
"justify-content": "center",
188188
padding: "0 var(--cortex-space-1)",
189189
background: "#BFFF00",
190-
color: "#141415",
190+
color: "var(--cortex-icon-active)",
191191
"font-family": "var(--cortex-font-sans)",
192192
"font-size": "9px",
193193
"font-weight": "var(--cortex-font-semibold)",

‎src/components/cortex/CortexCodeEditor.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,8 @@ export const CortexCodeEditor: Component<CortexCodeEditorProps> = (props) => {
8888
"flex-direction": "column",
8989
width: "100%",
9090
height: "100%",
91-
background: "#1C1C1D",
92-
border: "1px solid #2E2F31",
91+
background: "var(--cortex-bg-secondary)",
92+
border: "1px solid var(--cortex-border-default)",
9393
"border-radius": "16px",
9494
overflow: "hidden",
9595
...local.style,
@@ -100,7 +100,7 @@ export const CortexCodeEditor: Component<CortexCodeEditorProps> = (props) => {
100100
display: "flex",
101101
"flex-direction": "column",
102102
overflow: "hidden",
103-
background: "#141415",
103+
background: "var(--cortex-bg-primary)",
104104
});
105105

106106
return (
@@ -141,7 +141,7 @@ export const CortexCodeEditor: Component<CortexCodeEditorProps> = (props) => {
141141
border-radius: 0;
142142
}
143143
.cortex-code-editor .monaco-editor .monaco-scrollable-element > .scrollbar > .slider {
144-
background: #2E2F31 !important;
144+
background: var(--cortex-border-default) !important;
145145
border-radius: 4px;
146146
}
147147
.cortex-code-editor .monaco-editor .monaco-scrollable-element > .scrollbar.vertical {
@@ -172,7 +172,7 @@ const EditorPlaceholder: Component = () => {
172172
"flex-direction": "column",
173173
"align-items": "center",
174174
"justify-content": "center",
175-
background: "#141415",
175+
background: "var(--cortex-bg-primary)",
176176
color: "#8C8D8F",
177177
gap: "16px",
178178
});

‎src/components/cortex/CortexDesktopLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ export function CortexDesktopLayout(props: ParentProps) {
269269
return (
270270
<div style={{
271271
display: "flex", "flex-direction": "column", width: "100vw", height: "100vh",
272-
background: "#141415", border: "1px solid #2E2F31",
272+
background: "var(--cortex-bg-primary)", border: "1px solid var(--cortex-border-default)",
273273
"border-radius": "24px",
274274
"box-shadow": "0px 4px 26px 15px rgba(38,36,37,0.38), inset 0px 0px 13.1px 6px rgba(26,24,25,0.2)",
275275
overflow: "hidden", "font-family": "var(--cortex-font-sans)", color: "var(--cortex-text-primary)",

‎src/components/cortex/CortexEditorTabs.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ export const CortexEditorTabs: Component<CortexEditorTabsProps> = (props) => {
6565
"align-items": "center",
6666
"align-self": "stretch",
6767
height: "36px",
68-
background: "#141415",
69-
"border-bottom": "1px solid #2E2F31",
68+
background: "var(--cortex-bg-primary)",
69+
"border-bottom": "1px solid var(--cortex-border-default)",
7070
overflow: "hidden",
7171
"flex-shrink": "0",
7272
position: "relative",
@@ -179,8 +179,8 @@ const TabContextMenu: Component<TabContextMenuProps> = (props) => {
179179
left: `${props.x}px`,
180180
top: `${props.y}px`,
181181
"z-index": "9999",
182-
background: "#1C1C1D",
183-
border: "1px solid #2E2F31",
182+
background: "var(--cortex-bg-secondary)",
183+
border: "1px solid var(--cortex-border-default)",
184184
"border-radius": "8px",
185185
padding: "4px 0",
186186
"min-width": "160px",

‎src/components/cortex/CortexFileExplorer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -106,8 +106,8 @@ export const CortexFileExplorer: Component<CortexFileExplorerProps> = (props) =>
106106
"flex-direction": "column",
107107
width: "320px",
108108
height: "100%",
109-
background: "#141415",
110-
border: "1px solid #2E2F31",
109+
background: "var(--cortex-bg-primary)",
110+
border: "1px solid var(--cortex-border-default)",
111111
"border-radius": "16px",
112112
gap: "8px",
113113
overflow: "hidden",

‎src/components/cortex/CortexNotifications.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -200,8 +200,8 @@ export function CortexNotifications() {
200200
right: "0",
201201
bottom: "0",
202202
width: "380px",
203-
background: "var(--cortex-bg-primary, #141415)",
204-
border: "1px solid var(--cortex-border-default, #2E2F31)",
203+
background: "var(--cortex-bg-primary)",
204+
border: "1px solid var(--cortex-border-default)",
205205
"box-shadow": "-4px 0 24px rgba(0,0,0,0.4)",
206206
display: "flex",
207207
"flex-direction": "column",
@@ -225,7 +225,7 @@ export function CortexNotifications() {
225225
"justify-content": "space-between",
226226
padding: "12px 16px",
227227
"border-bottom":
228-
"1px solid var(--cortex-border-default, #2E2F31)",
228+
"1px solid var(--cortex-border-default)",
229229
"flex-shrink": "0",
230230
}}
231231
>
@@ -399,7 +399,7 @@ const ToastCard: Component<{
399399
gap: "10px",
400400
padding: "12px 14px",
401401
background: "var(--cortex-bg-secondary, #1E1E1F)",
402-
border: "1px solid var(--cortex-border-default, #2E2F31)",
402+
border: "1px solid var(--cortex-border-default)",
403403
"border-radius": "var(--cortex-radius-lg, 12px)",
404404
"box-shadow": "0 4px 16px rgba(0,0,0,0.4)",
405405
"font-family": "var(--cortex-font-sans, Inter, sans-serif)",

‎src/components/cortex/CortexTitleBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -294,7 +294,7 @@ export const CortexTitleBar: Component<CortexTitleBarProps> = (props) => {
294294
<div style={{
295295
width: "1px",
296296
height: "20px",
297-
background: "#2E2F31",
297+
background: "var(--cortex-border-default)",
298298
"flex-shrink": "0",
299299
}} />
300300

‎src/components/cortex/EditorBreadcrumbs.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const EditorBreadcrumbs: Component<EditorBreadcrumbsProps> = (props) => {
2929
height: "26px",
3030
padding: "0px 16px",
3131
"flex-shrink": "0",
32-
background: "#141415",
32+
background: "var(--cortex-bg-primary)",
3333
...props.style,
3434
});
3535

‎src/components/cortex/EditorTabBar.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -54,8 +54,8 @@ export const EditorTabBar: Component<EditorTabBarProps> = (props) => {
5454
"align-items": "center",
5555
"align-self": "stretch",
5656
height: "36px",
57-
background: "#141415",
58-
"border-bottom": "1px solid #2E2F31",
57+
background: "var(--cortex-bg-primary)",
58+
"border-bottom": "1px solid var(--cortex-border-default)",
5959
overflow: "hidden",
6060
"flex-shrink": "0",
6161
position: "relative",
@@ -334,8 +334,8 @@ const TabBarContextMenu: Component<TabBarContextMenuProps> = (props) => {
334334
left: `${props.x}px`,
335335
top: `${props.y}px`,
336336
"z-index": "9999",
337-
background: "#1C1C1D",
338-
border: "1px solid #2E2F31",
337+
background: "var(--cortex-bg-secondary)",
338+
border: "1px solid var(--cortex-border-default)",
339339
"border-radius": "8px",
340340
padding: "4px 0",
341341
"min-width": "160px",
@@ -380,7 +380,7 @@ const TabBarContextMenu: Component<TabBarContextMenuProps> = (props) => {
380380
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = "transparent"; }}>
381381
Close All
382382
</button>
383-
<div style={{ height: "1px", background: "#2E2F31", margin: "4px 0" }} />
383+
<div style={{ height: "1px", background: "var(--cortex-border-default)", margin: "4px 0" }} />
384384
<button style={itemStyle} onClick={handleClick(props.onCopyPath)}
385385
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = "rgba(255,255,255,0.05)"; }}
386386
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = "transparent"; }}>

0 commit comments

Comments
 (0)