-
Notifications
You must be signed in to change notification settings - Fork 28.1k
/
Copy pathdark-theme.tsx
123 lines (110 loc) · 3.33 KB
/
dark-theme.tsx
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
import { css } from '../../utils/css'
const colors = `
/* Background Dark */
--color-background-100: #0a0a0a;
--color-background-200: #000000;
/* Syntax Dark */
--color-syntax-comment: #a0a0a0;
--color-syntax-constant: #ededed;
--color-syntax-function: #52a9ff;
--color-syntax-keyword: #f76e99;
--color-syntax-link: #0ac5b2;
--color-syntax-parameter: #f1a10d;
--color-syntax-punctuation: #ededed;
--color-syntax-string: #0ac5b2;
--color-syntax-string-expression: #0ac5b2;
/* Gray Scale Dark */
--color-gray-100: #1a1a1a;
--color-gray-200: #1f1f1f;
--color-gray-300: #292929;
--color-gray-400: #2e2e2e;
--color-gray-500: #454545;
--color-gray-600: #878787;
--color-gray-700: #8f8f8f;
--color-gray-800: #7d7d7d;
--color-gray-900: #a0a0a0;
--color-gray-1000: #ededed;
/* Gray Alpha Scale Dark */
--color-gray-alpha-100: rgba(255, 255, 255, 0.066);
--color-gray-alpha-200: rgba(255, 255, 255, 0.087);
--color-gray-alpha-300: rgba(255, 255, 255, 0.125);
--color-gray-alpha-400: rgba(255, 255, 255, 0.145);
--color-gray-alpha-500: rgba(255, 255, 255, 0.239);
--color-gray-alpha-600: rgba(255, 255, 255, 0.506);
--color-gray-alpha-700: rgba(255, 255, 255, 0.54);
--color-gray-alpha-800: rgba(255, 255, 255, 0.47);
--color-gray-alpha-900: rgba(255, 255, 255, 0.61);
--color-gray-alpha-1000: rgba(255, 255, 255, 0.923);
/* Blue Scale Dark */
--color-blue-100: #0f1b2d;
--color-blue-200: #10243e;
--color-blue-300: #0f3058;
--color-blue-400: #0d3868;
--color-blue-500: #0a4481;
--color-blue-600: #0091ff;
--color-blue-700: #0070f3;
--color-blue-800: #0060d1;
--color-blue-900: #52a9ff;
--color-blue-1000: #eaf6ff;
/* Red Scale Dark */
--color-red-100: #2a1314;
--color-red-200: #3d1719;
--color-red-300: #551a1e;
--color-red-400: #671e22;
--color-red-500: #822025;
--color-red-600: #e5484d;
--color-red-700: #e5484d;
--color-red-800: #da3036;
--color-red-900: #ff6369;
--color-red-1000: #ffecee;
/* Amber Scale Dark */
--color-amber-100: #271700;
--color-amber-200: #341c00;
--color-amber-300: #4a2900;
--color-amber-400: #573300;
--color-amber-500: #693f05;
--color-amber-600: #e79c13;
--color-amber-700: #ffb224;
--color-amber-800: #ff990a;
--color-amber-900: #f1a10d;
--color-amber-1000: #fef3dd;
/* Green Scale Dark */
--color-green-100: #0b2211;
--color-green-200: #0f2c17;
--color-green-300: #11351b;
--color-green-400: #0c461b;
--color-green-500: #126427;
--color-green-600: #1a9338;
--color-green-700: #46a758;
--color-green-800: #388e4a;
--color-green-900: #63c174;
--color-green-1000: #e5fbeb;
/* Turbopack Dark - Temporary */
--color-turbopack-text-red: #ff6d92;
--color-turbopack-text-blue: #45b2ff;
--color-turbopack-border-red: #6e293b;
--color-turbopack-border-blue: #284f80;
--color-turbopack-background-red: #250d12;
--color-turbopack-background-blue: #0a1723;
`
const base = `
--color-font: white;
--color-backdrop: rgba(0, 0, 0, 0.8);
--color-border-shadow: rgba(255, 255, 255, 0.145);
--color-title-color: #fafafa;
--color-stack-notes: #a9a9a9;
`
export function DarkTheme() {
return (
<style>{css`
:host(.dark) {
${base}
${colors}
@media (prefers-color-scheme: dark) {
:host(:not(.light)) {
${base}
${colors}
}
`}</style>
)
}