-
Notifications
You must be signed in to change notification settings - Fork 308
/
_color.scss
124 lines (123 loc) · 3.54 KB
/
_color.scss
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/*******************************************************************************
* master color map. Only the colors that actually differ between light and dark
* themes are specified separately.
*
* NOTE: this theme defines "info == primary" and "warning == secondary"
*/
$pst-semantic-colors: (
"primary": rgb(69, 157, 185),
"secondary": rgb(238, 144, 64),
"info": rgb(69, 157, 185),
"warning": rgb(238, 144, 64),
"success": (
"light": rgb(40, 167, 69),
"dark": rgb(72, 135, 87),
),
"danger": (
"light": rgb(220, 53, 69),
"dark": rgb(203, 70, 83),
),
"text-base": (
// Black + 50
"light": rgb(50, 50, 50),
// White - 50
"dark": rgb(206, 206, 206),
),
"text-muted": (
// Twice as far from 0 as base
"light": rgb(100, 100, 100),
// Twice as far from 256 as base
"dark": rgb(166, 166, 166),
),
"shadow": (
"light": rgb(216, 216, 216),
"dark": rgb(33, 33, 33),
),
"border": (
"light": rgb(201, 201, 201),
"dark": rgb(192, 192, 192),
),
"inline-code": (
"light": rgb(232, 62, 140),
"dark": rgb(221, 158, 194),
),
"target": (
"light": rgb(251, 229, 78),
"dark": rgb(71, 39, 0),
),
// DEPTH COLORS
// background: color of the canvas / the furthest back layer
"background":
(
"light": rgb(255, 255, 255),
"dark": rgb(18, 18, 18),
),
// on-background: provides slight contrast against background
// (by use of shadows in light theme)
"on-background":
(
"light": rgb(255, 255, 255),
"dark": rgb(30, 30, 30),
),
// surface: object set above the background (without shadows)
// Uses JupyterLab cell background colors in light/dark theme
"surface":
(
"light": rgb(245, 245, 245),
"dark": rgb(33, 33, 33),
),
// on_surface: object on top of surface object (without shadows)
"on-surface":
(
"light": rgb(225, 225, 225),
"dark": rgb(55, 55, 55),
),
);
/*******************************************************************************
* write the color rules for each theme (light/dark)
*
* NOTE: @each {...} is like a for-loop
* https://sass-lang.com/documentation/at-rules/control/each
* and #{...} inserts a variable into a CSS selector or property name
* https://sass-lang.com/documentation/interpolation
*/
@each $mode in (light, dark) {
html[data-theme="#{$mode}"] {
@each $name, $value in $pst-semantic-colors {
// check if this color is defined differently for light/dark
@if type-of($value) == map {
$value: map-get($value, $mode);
}
--pst-color-#{$name}: #{$value};
}
// assign the "duplicate" colors (ones that just reference other variables)
--pst-color-link: var(--pst-color-primary);
--pst-color-link-hover: var(--pst-color-secondary);
// adapt to light/dark-specific content
@if $mode == "light" {
.only-dark {
display: none !important;
}
} @else {
.only-light {
display: none !important;
}
// adjust images in dark mode
img {
filter: brightness(0.8) contrast(1.2);
}
/* Give images a light background in dark mode in case they have
* transparency and black text (unless they have class .only-dark, in
* which case assume they're already optimized for dark mode).
*/
.bd-content img:not(.only-dark) {
background: rgb(255, 255, 255);
border-radius: 0.25rem;
}
// MathJax SVG outputs should be filled to same color as text.
.MathJax_SVG * {
fill: var(--pst-color-text-base);
}
}
}
}