diff options
| author | netop://ウィビ <paul@webb.page> | 2026-04-24 14:17:38 -0700 |
|---|---|---|
| committer | netop://ウィビ <paul@webb.page> | 2026-04-24 14:17:38 -0700 |
| commit | 261f3bdb77799009344aab4a60686b7186ebd3b0 (patch) | |
| tree | 8e87c6610a307f15f0c4b32f68b19424273fc6ad /source/library/styles/theme.scss | |
| parent | 8a59f92d031963e23ecc84b75feecf43eb4dd146 (diff) | |
| download | graphiql-261f3bdb77799009344aab4a60686b7186ebd3b0.tar.gz graphiql-261f3bdb77799009344aab4a60686b7186ebd3b0.zip | |
Implement v0.4 subscriptions + v0.5 theming and plugin slots
- SSE and WebSocket fetchers via graphql-sse and graphql-ws,
returning AsyncIterable results
- SessionStore.run consumes AsyncIterable streams with
subscriptionMode "append" (timestamped) or "replace" and
honors an AbortSignal for cancellation
- Chrome CSS variables documented in styles/theme.scss with
prefers-color-scheme light/dark gating and .graphiql-light override
- Svelte 5 snippet slots on GraphiQL: toolbarExtras, tabExtras,
resultFooter
Diffstat (limited to '')
| -rw-r--r-- | source/library/styles/theme.scss | 47 |
1 files changed, 47 insertions, 0 deletions
diff --git a/source/library/styles/theme.scss b/source/library/styles/theme.scss new file mode 100644 index 0000000..55f24aa --- /dev/null +++ b/source/library/styles/theme.scss @@ -0,0 +1,47 @@ +// @eol/graphiql chrome theme variables. +// +// Override any variable under a scoped selector (e.g. `.graphiql`) or on :root +// to re-skin the chrome. The editor theme is a separate prop (`theme?: Extension`). +// +// Supported variables: +// --graphiql-accent primary action color (Run button, selected state) +// --graphiql-bg base background (editor + result) +// --graphiql-border divider lines between panes +// --graphiql-fg primary foreground +// --graphiql-font font-family for the chrome +// --graphiql-link clickable links in docs / breadcrumbs +// --graphiql-muted muted foreground (hints, timestamps) +// --graphiql-panel panel background (toolbar, tabbar, headers) + +:root { + --graphiql-accent: #0e639c; + --graphiql-bg: #1e1e1e; + --graphiql-border: #333; + --graphiql-fg: #d4d4d4; + --graphiql-font: ui-monospace, SFMono-Regular, monospace; + --graphiql-link: #79b8ff; + --graphiql-muted: #858585; + --graphiql-panel: #252526; +} + +@media (prefers-color-scheme: light) { + :root:not(.graphiql-dark) { + --graphiql-accent: #0366d6; + --graphiql-bg: #ffffff; + --graphiql-border: #e1e4e8; + --graphiql-fg: #24292e; + --graphiql-link: #0366d6; + --graphiql-muted: #6a737d; + --graphiql-panel: #f6f8fa; + } +} + +:root.graphiql-light { + --graphiql-accent: #0366d6; + --graphiql-bg: #ffffff; + --graphiql-border: #e1e4e8; + --graphiql-fg: #24292e; + --graphiql-link: #0366d6; + --graphiql-muted: #6a737d; + --graphiql-panel: #f6f8fa; +} |