blob: 55f24aaa952c95cf3b6a5442c70a051e89094155 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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;
}
|