/* ================================================================= EXCAMAR THEME SYSTEM Applied via . Each theme overrides the app's CSS custom properties with !important so it wins over the built-in light/dark (.excalidraw.theme--dark) declarations. ================================================================= */ /* --- 1. EXCAMAR LIGHT (default indigo + clean white) --- */ html[data-excamar-theme="light"] { --color-primary: #6965db !important; --color-primary-darker: #5b57d1 !important; --color-primary-darkest: #4a47b1 !important; --color-primary-hover: #5753d0 !important; --color-primary-light: #e3e2fe !important; --color-primary-light-darker: #d7d5ff !important; --color-surface-lowest: #ffffff !important; --color-surface-low: #ececf4 !important; --color-surface-mid: #f2f2f7 !important; --color-surface-high: #f1f0ff !important; --color-on-surface: #1b1b1f !important; --color-muted: #6b6b7b !important; --color-muted-background: #ececf4 !important; --color-muted-background-darker: #dcdce4 !important; --color-muted-darker: #4a4a55 !important; --color-muted-darkest: #2a2a33 !important; --color-border-outline: #d4d4dc !important; --color-border-outline-variant: #c4c4cc !important; --color-brand-active: #5b57d1 !important; --color-brand-hover: #6965db !important; --color-selection: #6965db !important; } /* --- 2. EXCAMAR DARK (deep dark + indigo accents) --- */ html[data-excamar-theme="dark"] { --color-primary: #a8a5ff !important; --color-primary-darker: #b2aeff !important; --color-primary-darkest: #beb9ff !important; --color-primary-hover: #bbb8ff !important; --color-primary-light: #4f4d6f !important; --color-primary-light-darker: #43415e !important; --color-surface-lowest: hsl(0, 0%, 7%) !important; --color-surface-low: hsl(240, 8%, 15%) !important; --color-surface-mid: hsl(240, 6%, 10%) !important; --color-surface-high: hsl(245, 10%, 21%) !important; --color-on-surface: #e3e3e8 !important; --color-muted: #9a9aa8 !important; --color-muted-background: hsl(240, 8%, 15%) !important; --color-muted-background-darker: hsl(240, 8%, 20%) !important; --color-muted-darker: #b0b0be !important; --color-muted-darkest: #d0d0dc !important; --color-border-outline: hsl(240, 8%, 28%) !important; --color-border-outline-variant: hsl(240, 8%, 34%) !important; --color-brand-active: #b2aeff !important; --color-brand-hover: #a8a5ff !important; --color-selection: #a8a5ff !important; } /* --- 3. OCEAN (deep sea blues + teal) --- */ html[data-excamar-theme="ocean"] { --color-primary: #0077b6 !important; --color-primary-darker: #005f8a !important; --color-primary-darkest: #004c6e !important; --color-primary-hover: #006399 !important; --color-primary-light: #caf0f8 !important; --color-primary-light-darker: #ade8f4 !important; --color-surface-lowest: #f0f9ff !important; --color-surface-low: #caf0f8 !important; --color-surface-mid: #e0f2fe !important; --color-surface-high: #bae6fd !important; --color-on-surface: #0c4a6e !important; --color-muted: #4b7a8c !important; --color-muted-background: #caf0f8 !important; --color-muted-background-darker: #a7d8e8 !important; --color-muted-darker: #3a6573 !important; --color-muted-darkest: #1a3f4c !important; --color-border-outline: #7dd3fc !important; --color-border-outline-variant: #62b8e0 !important; --color-brand-active: #005f8a !important; --color-brand-hover: #0077b6 !important; --color-selection: #0077b6 !important; } /* --- 4. FOREST (nature greens) --- */ html[data-excamar-theme="forest"] { --color-primary: #2d6a4f !important; --color-primary-darker: #1b4332 !important; --color-primary-darkest: #143626 !important; --color-primary-hover: #245c44 !important; --color-primary-light: #d8f3dc !important; --color-primary-light-darker: #b7e4c7 !important; --color-surface-lowest: #f1f8e9 !important; --color-surface-low: #d8f3dc !important; --color-surface-mid: #cfe8d4 !important; --color-surface-high: #b7e4c7 !important; --color-on-surface: #1b4332 !important; --color-muted: #4a7c59 !important; --color-muted-background: #d8f3dc !important; --color-muted-background-darker: #a7c8ad !important; --color-muted-darker: #3a6346 !important; --color-muted-darkest: #1f3d2a !important; --color-border-outline: #95d5b2 !important; --color-border-outline-variant: #7fc49e !important; --color-brand-active: #1b4332 !important; --color-brand-hover: #2d6a4f !important; --color-selection: #2d6a4f !important; } /* --- 5. SUNSET (warm dusk: coral / orange / plum) --- */ html[data-excamar-theme="sunset"] { --color-primary: #e76f51 !important; --color-primary-darker: #c4543a !important; --color-primary-darkest: #a3422c !important; --color-primary-hover: #d46145 !important; --color-primary-light: #fce4d6 !important; --color-primary-light-darker: #f9d4bf !important; --color-surface-lowest: #fff8f0 !important; --color-surface-low: #fce4d6 !important; --color-surface-mid: #f9e0cc !important; --color-surface-high: #f9d4bf !important; --color-on-surface: #4a2c1a !important; --color-muted: #a07a5c !important; --color-muted-background: #fce4d6 !important; --color-muted-background-darker: #e8c9b0 !important; --color-muted-darker: #7a5c42 !important; --color-muted-darkest: #4f3a28 !important; --color-border-outline: #f4a261 !important; --color-border-outline-variant: #e08e4c !important; --color-brand-active: #c4543a !important; --color-brand-hover: #e76f51 !important; --color-selection: #e76f51 !important; } /* --- 6. LAVENDER (soft purple / pink) --- */ html[data-excamar-theme="lavender"] { --color-primary: #9b5de5 !important; --color-primary-darker: #7b2cbf !important; --color-primary-darkest: #5a189a !important; --color-primary-hover: #8a4fd4 !important; --color-primary-light: #f0e6ff !important; --color-primary-light-darker: #e2ccff !important; --color-surface-lowest: #faf5ff !important; --color-surface-low: #f0e6ff !important; --color-surface-mid: #ead9ff !important; --color-surface-high: #e2ccff !important; --color-on-surface: #3c1361 !important; --color-muted: #7a5a96 !important; --color-muted-background: #f0e6ff !important; --color-muted-background-darker: #d4b8e8 !important; --color-muted-darker: #5c4270 !important; --color-muted-darkest: #332542 !important; --color-border-outline: #c77dff !important; --color-border-outline-variant: #b565da !important; --color-brand-active: #7b2cbf !important; --color-brand-hover: #9b5de5 !important; --color-selection: #9b5de5 !important; } /* --- 7. MIDNIGHT (deep navy dark + electric blue) --- */ html[data-excamar-theme="midnight"] { --color-primary: #4cc9f0 !important; --color-primary-darker: #38b2db !important; --color-primary-darkest: #249bc6 !important; --color-primary-hover: #42bde0 !important; --color-primary-light: #1a3a4a !important; --color-primary-light-darker: #152f3d !important; --color-surface-lowest: #0b1020 !important; --color-surface-low: #131a2e !important; --color-surface-mid: #101526 !important; --color-surface-high: #1a2240 !important; --color-on-surface: #caf0f8 !important; --color-muted: #6a8aaa !important; --color-muted-background: #131a2e !important; --color-muted-background-darker: #1a2240 !important; --color-muted-darker: #8aa0ba !important; --color-muted-darkest: #a8bcce !important; --color-border-outline: #243050 !important; --color-border-outline-variant: #2c3a60 !important; --color-brand-active: #38b2db !important; --color-brand-hover: #4cc9f0 !important; --color-selection: #4cc9f0 !important; } /* --- 8. ROSE (elegant rose / pink) --- */ html[data-excamar-theme="rose"] { --color-primary: #d6336c !important; --color-primary-darker: #b02a5b !important; --color-primary-darkest: #8c2048 !important; --color-primary-hover: #c22e61 !important; --color-primary-light: #fde2e8 !important; --color-primary-light-darker: #fac5d2 !important; --color-surface-lowest: #fff5f7 !important; --color-surface-low: #fde2e8 !important; --color-surface-mid: #fbd8e0 !important; --color-surface-high: #fac5d2 !important; --color-on-surface: #4a1528 !important; --color-muted: #965a6e !important; --color-muted-background: #fde2e8 !important; --color-muted-background-darker: #e8bcc8 !important; --color-muted-darker: #704254 !important; --color-muted-darkest: #422833 !important; --color-border-outline: #f78ca0 !important; --color-border-outline-variant: #e8788e !important; --color-brand-active: #b02a5b !important; --color-brand-hover: #d6336c !important; --color-selection: #d6336c !important; } /* ========================================================================== FAILSAFE: Toolbar & ToolIcon SVG Sizing & Alignment Prevents unstyled SVG / checkbox blowout (e.g. giant padlock bug) ========================================================================== */ .ToolIcon, .ToolIcon__lock, .ToolIcon.Shape { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; position: relative !important; cursor: pointer !important; } .ToolIcon svg, .ToolIcon__icon svg, .ToolIcon__lock svg { width: 20px !important; height: 20px !important; max-width: 20px !important; max-height: 20px !important; display: block !important; flex-shrink: 0 !important; } .ToolIcon input[type="checkbox"], .ToolIcon input[type="radio"], .ToolIcon_type_checkbox, .ToolIcon_type_radio { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; margin: 0 !important; } .App-toolbar { display: flex !important; align-items: center !important; justify-content: center !important; max-height: 48px !important; } .HintViewer { position: absolute !important; top: 100% !important; left: 50% !important; transform: translateX(-50%) !important; white-space: nowrap !important; font-size: 12px !important; pointer-events: none !important; opacity: 0.8 !important; margin-top: 8px !important; }