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();