aboutsummaryrefslogtreecommitdiff
path: root/source/library/styles
diff options
context:
space:
mode:
authornetop://ウィビ <paul@webb.page>2026-04-24 14:17:38 -0700
committernetop://ウィビ <paul@webb.page>2026-04-24 14:17:38 -0700
commit261f3bdb77799009344aab4a60686b7186ebd3b0 (patch)
tree8e87c6610a307f15f0c4b32f68b19424273fc6ad /source/library/styles
parent8a59f92d031963e23ecc84b75feecf43eb4dd146 (diff)
downloadgraphiql-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 'source/library/styles')
-rw-r--r--source/library/styles/theme.scss47
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;
+}