diff --git a/excalidraw-app/index.html b/excalidraw-app/index.html
index 1c29d7220..e64196252 100644
--- a/excalidraw-app/index.html
+++ b/excalidraw-app/index.html
@@ -9,7 +9,7 @@
/>
-
+
diff --git a/excalidraw-app/index.scss b/excalidraw-app/index.scss
index cfaaf9cea..56b61ab91 100644
--- a/excalidraw-app/index.scss
+++ b/excalidraw-app/index.scss
@@ -1,8 +1,8 @@
.excalidraw {
- --color-primary-contrast-offset: #625ee0; // to offset Chubb illusion
+ --color-primary-contrast-offset: #747a86; // to offset Chubb illusion
&.theme--dark {
- --color-primary-contrast-offset: #726dff; // to offset Chubb illusion
+ --color-primary-contrast-offset: #71767e; // to offset Chubb illusion
}
.top-right-ui {
@@ -115,3 +115,52 @@
}
}
}
+
+/* App-only dark theme overrides (custom palette) */
+.excalidraw.theme--dark {
+ /* base palette tokens */
+ --bg-900: #121416;
+ --bg-800: #181a1d;
+ --bg-700: #1c1e22;
+ --border-600: #2a2c30;
+ --ink-100: #f1f3f5;
+ --ink-200: #e7e9ec;
+ --ink-400: #c9ccd2;
+ --ink-600: #8f9399;
+
+ /* primary scale */
+ --color-primary: #2a2d32;
+ --color-primary-darker: #26292e;
+ --color-primary-darkest: #212428;
+ --color-primary-light: #34383d;
+ --color-primary-light-darker: #2f3338;
+ --color-primary-hover: #34383d;
+
+ /* surfaces */
+ --color-surface-lowest: var(--bg-900);
+ --color-surface-mid: var(--bg-800);
+ --color-surface-low: var(--bg-700);
+ --island-bg-color: var(--bg-800);
+
+ /* text and icons */
+ --color-on-surface: var(--ink-400);
+ --popup-text-color: var(--ink-400);
+ --popup-text-inverted-color: var(--ink-100);
+
+ /* borders */
+ --color-border-outline: var(--border-600);
+ --color-border-outline-variant: var(--border-600);
+
+ /* inputs */
+ --input-bg-color: var(--bg-900);
+ --input-border-color: var(--border-600);
+ --input-hover-bg-color: var(--bg-800);
+
+ /* brand */
+ --color-brand-hover: var(--color-primary-hover);
+ --color-brand-active: var(--color-primary);
+
+ /* main background and text */
+ --default-bg-color: var(--bg-900);
+ --color-logo-text: var(--ink-100);
+}
diff --git a/excalidraw-app/useHandleAppTheme.ts b/excalidraw-app/useHandleAppTheme.ts
index 94f5a3e58..8b510f04f 100644
--- a/excalidraw-app/useHandleAppTheme.ts
+++ b/excalidraw-app/useHandleAppTheme.ts
@@ -15,10 +15,10 @@ export const useHandleAppTheme = () => {
(localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_THEME) as
| Theme
| "system"
- | null) || THEME.LIGHT
+ | null) || THEME.DARK
);
});
- const [editorTheme, setEditorTheme] = useState(THEME.LIGHT);
+ const [editorTheme, setEditorTheme] = useState(THEME.DARK);
useEffect(() => {
const mediaQuery = getDarkThemeMediaQuery();