diff --git a/packages/app/public/oc-theme-preload.js b/packages/app/public/oc-theme-preload.js index 0fe9a1b60..a1e6b5277 100644 --- a/packages/app/public/oc-theme-preload.js +++ b/packages/app/public/oc-theme-preload.js @@ -37,14 +37,15 @@ document.documentElement.dataset.theme = themeId document.documentElement.dataset.colorScheme = mode - // Brand ground, tracking harmoniqs.json palette.neutral (dark #000, light #fff). - // This paints before any stylesheet, so a stock literal here shows through as - // the old brand for the first frame. - document.documentElement.style.backgroundColor = isDark ? "#0F0F0D" : "#ffffff" + // Pre-paint ground, tracking harmoniqs.json's deepest ground per scheme: + // dark keeps the stock neutral #080808 (the brand cream-black read as warm + // against VS Code's chrome), light is the brand white. This paints before any + // stylesheet, so a wrong literal here shows through for the first frame. + document.documentElement.style.backgroundColor = isDark ? "#080808" : "#ffffff" // Update theme-color meta tag to match app color scheme var metas = document.querySelectorAll("meta[name='theme-color']") - if (metas.length > 0) metas[0].setAttribute("content", isDark ? "#0F0F0D" : "#ffffff") + if (metas.length > 0) metas[0].setAttribute("content", isDark ? "#080808" : "#ffffff") if (themeId === "oc-2") return // stock theme needs no cached CSS diff --git a/packages/app/src/components/terminal.tsx b/packages/app/src/components/terminal.tsx index cd9b93a43..538c629a5 100644 --- a/packages/app/src/components/terminal.tsx +++ b/packages/app/src/components/terminal.tsx @@ -59,10 +59,10 @@ const DEFAULT_TERMINAL_COLORS: Record<"light" | "dark", TerminalColors> = { selectionBackground: withAlpha("#000000", 0.2), }, dark: { - background: "#000000", - foreground: "#EFEDCD", - cursor: "#EFEDCD", - selectionBackground: withAlpha("#EFEDCD", 0.25), + background: "#191515", + foreground: "#d4d4d4", + cursor: "#d4d4d4", + selectionBackground: withAlpha("#d4d4d4", 0.25), }, } diff --git a/packages/ui/src/theme/themes/harmoniqs.json b/packages/ui/src/theme/themes/harmoniqs.json index 1b06e62d6..83cf32e58 100644 --- a/packages/ui/src/theme/themes/harmoniqs.json +++ b/packages/ui/src/theme/themes/harmoniqs.json @@ -245,33 +245,33 @@ }, "dark": { "palette": { - "neutral": "#0F0F0D", - "ink": "#EFEDCD", + "neutral": "#1f1f1f", + "ink": "#f1ece8", "primary": "#FFE614", "accent": "#FFE614", "success": "#4ade80", "warning": "#F0D600", "error": "#e88484", - "info": "#C9C7A6", + "info": "#edb2f1", "interactive": "#FFE614", "diffAdd": "#4ade80", "diffDelete": "#e88484" }, "overrides": { - "text-strong": "#EFEDCD", - "text-base": "#C9C7A6", - "text-weak": "#A9A88C", - "text-weaker": "#8a8972", + "text-strong": "#EDEDED", + "text-base": "#A0A0A0", + "text-weak": "#707070", + "text-weaker": "#505050", "text-diff-add-base": "var(--v2-state-fg-success)", "text-diff-delete-base": "var(--v2-state-fg-danger)", - "border-weak-base": "#EFEDCD38", - "border-weaker-base": "#EFEDCD1F", - "icon-base": "#C9C7A6", - "icon-weak-base": "#8a8972", - "surface-raised-base": "#171714", - "surface-raised-base-hover": "#201f1b", - "surface-base": "#0F0F0D", - "surface-base-hover": "#EFEDCD0D", + "border-weak-base": "#282828", + "border-weaker-base": "#232323", + "icon-base": "#7E7E7E", + "icon-weak-base": "#343434", + "surface-raised-base": "#232323", + "surface-raised-base-hover": "#282828", + "surface-base": "#1C1C1C", + "surface-base-hover": "#FFFFFF0D", "surface-interactive-weak": "#2a2600", "surface-success-base": "#052e16", "syntax-comment": "var(--v2-text-text-muted)", @@ -280,7 +280,7 @@ "syntax-primitive": "var(--v2-pink-400)", "syntax-property": "var(--v2-orange-400)", "syntax-type": "var(--v2-purple-400)", - "syntax-constant": "#C9C7A6", + "syntax-constant": "#93e9f6", "syntax-critical": "var(--v2-red-400)", "syntax-diff-add": "var(--v2-state-fg-success)", "syntax-diff-delete": "var(--v2-state-fg-danger)", @@ -288,19 +288,19 @@ "surface-critical-base": "#2a0c0c" }, "v2Overrides": { - "v2-grey-50": "#FFFDF0ff", - "v2-grey-100": "#EFEDCDff", - "v2-grey-200": "#E3E0C0ff", - "v2-grey-300": "#C9C7A6ff", - "v2-grey-400": "#A9A88Cff", - "v2-grey-500": "#8a8972ff", - "v2-grey-600": "#6e6d5aff", - "v2-grey-700": "#545343ff", - "v2-grey-800": "#3a3a30ff", - "v2-grey-900": "#201f1bff", - "v2-grey-1000": "#171714ff", - "v2-grey-1100": "#0F0F0Dff", - "v2-grey-1200": "#000000ff", + "v2-grey-50": "#ffffffff", + "v2-grey-100": "#fafafaff", + "v2-grey-200": "#f2f2f2ff", + "v2-grey-300": "#eeeeeeff", + "v2-grey-400": "#dbdbdbff", + "v2-grey-500": "#aeaeaeff", + "v2-grey-600": "#808080ff", + "v2-grey-700": "#5c5c5cff", + "v2-grey-800": "#3a3a3aff", + "v2-grey-900": "#2e2e2eff", + "v2-grey-1000": "#242424ff", + "v2-grey-1100": "#161616ff", + "v2-grey-1200": "#080808ff", "v2-red-100": "#fde2e2ff", "v2-red-200": "#f6d5d3ff", "v2-red-300": "#fca5a5ff", @@ -407,23 +407,23 @@ "v2-background-bg-contrast": "var(--v2-grey-700)", "v2-background-bg-button-neutral": "var(--v2-alpha-light-6)", "v2-background-bg-accent": "#FFE614", - "v2-text-text-base": "var(--v2-grey-100)", - "v2-text-text-muted": "var(--v2-grey-300)", - "v2-text-text-faint": "var(--v2-grey-400)", + "v2-text-text-base": "var(--v2-grey-200)", + "v2-text-text-muted": "var(--v2-grey-500)", + "v2-text-text-faint": "var(--v2-grey-600)", "v2-text-text-inverse": "var(--v2-grey-1000)", "v2-text-text-contrast": "var(--v2-grey-100)", "v2-text-text-accent": "#FFE614", "v2-text-text-accent-hover": "#F0D600", "v2-text-text-code-accent": "var(--v2-grey-200)", - "v2-icon-icon-base": "var(--v2-grey-300)", - "v2-icon-icon-muted": "var(--v2-grey-400)", + "v2-icon-icon-base": "var(--v2-grey-400)", + "v2-icon-icon-muted": "var(--v2-grey-600)", "v2-icon-icon-inverse": "var(--v2-grey-1000)", "v2-icon-icon-contrast": "var(--v2-grey-200)", "v2-icon-icon-accent": "#FFE614", "v2-icon-icon-accent-hover": "#F0D600", - "v2-border-border-muted": "#EFEDCD1F", - "v2-border-border-base": "#EFEDCD38", - "v2-border-border-strong": "#EFEDCD5C", + "v2-border-border-muted": "var(--v2-alpha-light-8)", + "v2-border-border-base": "var(--v2-alpha-light-10)", + "v2-border-border-strong": "var(--v2-alpha-light-20)", "v2-border-border-inverse": "var(--v2-grey-100)", "v2-border-border-focus": "var(--v2-blue-500)", "v2-overlay-simple-overlay-hover": "var(--v2-alpha-light-6)",