mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-06 08:01:35 +00:00
bd246644c9
* feat: add github dark mode variant switchable in user settings Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> * feat: boot the UI Builder iframe into the current theme Seed the UI Builder iframe URL with the live dark/variant state (`?dark=&variant=`) so the VS Code workbench boots straight into GitHub Dark / Nord / Light instead of flashing the dark default until the host's `setDarkMode` message lands. Read from the <html> classes rather than the reactive state so the src is computed once at mount — a later theme toggle still updates the workbench via postMessage and does not reload the iframe. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * feat: align github-dark surfaces to GitHub Primer's elevation scale Snap the invented mid-greys to Primer's real dark canvas scale (inset=neutral.0, default=neutral.1, muted=neutral.2). Recessed surfaces now use true inset (#010409) instead of washed-out half-steps that sat in no-man's-land between inset and the page; raised surfaces align to muted. - surface-secondary #0b0e13 → #010409 (true inset) - surface-input #0c0f14 → #010409 (true inset) - surface-disabled #0b0e13 → #151b23 (muted) - surface-tertiary #161b22 → #151b23 (Primer neutral.2) - component-virtual-node #161b22 → #151b23 - surface-selected #21262d → #212830 (Primer neutral.3) surface-sunken (#010409) and surface-primary (#0d1117) already matched Primer inset/default exactly. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix: keep github-dark inputs subtle instead of full inset surface-input at true inset (#010409) made form fields read as recessed as the sidebar rail — too much contrast against the canvas. Inputs aren't sunken, so keep the subtle #0c0f14 (a hair below the page) while the recessed panel surfaces stay at inset. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * chore: bump UI Builder pin to the github-dark build (76ee616) windmill-code-ui-builder PR #16 is merged and published to R2, so pin the artifact to that build. The embedded raw-app editor now renders GitHub Dark (and honors the `variant` message) natively from the pinned build — no local swap needed. Reword the variant comment now that the dependency is resolved. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix: address codex review nits on the github-dark theme - UserSettings: re-read the dark variant when the settings drawer opens, so a change made through one mounted instance (page-local drawer) isn't shown stale by another (the always-mounted layout instance). - PublicApp / OAuth login callback: restore the `github-dark` variant class, not just the base `dark` class. These routes bypass the (root) layout, so they previously fell back to the default dark palette despite the saved preference. - RawAppEditor: condense the two new theme comments to the durable constraints per AGENTS.md (drop narration and the ephemeral artifact-pin history). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> * fix: address CI review findings on the github-dark theme - Move the hand-authored `github-dark` token set out of the Figma-generated tokens.json into githubDark.json, merged back in at the two consumers (tailwind.config.cjs before the rgb pass, utils.ts) so a Figma re-export of tokens.json can no longer drop the set and crash the build. - Restore the default-dark sidebar divider to #374151 — the PR must leave the Default variant unchanged; only the github variant adapts it to border-light. - Extract the `github-dark` DOM-class read into getAppliedDarkModeVariant() and reuse it across RawAppEditor and vscode.ts; drop the redundant `void darkVariant`. - Override the Monaco popup vars (suggest/hover widgets) in the github variant so they match the GitHub palette instead of VS Code's greys. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
28 lines
1.1 KiB
TypeScript
28 lines
1.1 KiB
TypeScript
export type DarkModeVariant = 'default' | 'github'
|
|
|
|
const DARK_MODE_VARIANT_KEY = 'dark-mode-variant'
|
|
|
|
export function getDarkModeVariant(): DarkModeVariant {
|
|
return window.localStorage.getItem(DARK_MODE_VARIANT_KEY) === 'github' ? 'github' : 'default'
|
|
}
|
|
|
|
// The variant currently applied to the DOM (the `github-dark` class) — the
|
|
// runtime source of truth, as opposed to the persisted preference above.
|
|
export function getAppliedDarkModeVariant(): DarkModeVariant {
|
|
return typeof document !== 'undefined' &&
|
|
document.documentElement.classList.contains('github-dark')
|
|
? 'github'
|
|
: 'default'
|
|
}
|
|
|
|
// The `github-dark` class only takes effect when `dark` is also present (see tailwind.config.cjs).
|
|
// It lives on <html> permanently so it survives the many independent `dark` toggle sites.
|
|
export function applyDarkModeVariant(variant: DarkModeVariant = getDarkModeVariant()): void {
|
|
document.documentElement.classList.toggle('github-dark', variant === 'github')
|
|
}
|
|
|
|
export function setDarkModeVariant(variant: DarkModeVariant): void {
|
|
window.localStorage.setItem(DARK_MODE_VARIANT_KEY, variant)
|
|
applyDarkModeVariant(variant)
|
|
}
|