DimX/dim-theme-fallback.css at main · chapelsoftware/DimX · GitHub

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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
/*
 * Dim for X — Complete Dim Theme Fallback
 *
 * Extracted from x.com on 2026-02-13.
 * Contains the full :root[data-theme="dim"] variable definitions as shipped
 * by X.com. If X removes these from their codebase, this file can be injected
 * to restore them. Simply include this stylesheet and set data-theme="dim"
 * on <html>.
 */

/* =======================================================================
   MAIN THEME — :root[data-theme="dim"]
   Defines all CSS custom properties for the Dim color scheme.
   ======================================================================= */

:root[data-theme="dim"] {
  /* app */
  --color-background: 210 34% 13%;
  --color-brand: 180 14% 97%;
  --color-mark: rgba(91, 112, 131, 0.4);
  --color-nested-border: 210 13% 60%;
  --color-text: 180 14% 97%;
  /* shadcn */
  --background: 210 34% 13%;
  --foreground: 200 7% 91%;
  --card: var(--color-gray-0);
  --card-foreground: 200 7% 91%;
  --popover: 210 34% 13%;
  --popover-foreground: 200 7% 91%;
  --primary: var(--color-blue-500);
  --primary-foreground: 240 5.9% 10%;
  --secondary: 210 21% 28%;
  --secondary-foreground: 200 7% 91%;
  --muted: 210 21% 28%;
  --muted-foreground: 240 5% 64.9%;
  --accent: var(--color-blue-200);
  --accent-foreground: var(--color-blue-700);
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 200 7% 91%;
  --border: 210 21% 28%;
  --input: 210 21% 28%;
  --ring: var(--color-blue-500);
  --chart-1: var(--color-blue-500);
  --chart-2: var(--color-green-500);
  --chart-3: var(--color-red-500);
  --chart-4: var(--color-yellow-500);
  --chart-5: var(--color-purple-500);
  /* palette — blue */
  --color-blue-0: 225 94% 12%;
  --color-blue-50: 223 100% 15%;
  --color-blue-100: 215 100% 26%;
  --color-blue-200: 212 100% 38%;
  --color-blue-300: 209 100% 42%;
  --color-blue-400: 207 100% 46%;
  --color-blue-500: 204 88% 53%;
  --color-blue-600: 202 91% 61%;
  --color-blue-700: 201 95% 70%;
  --color-blue-800: 196 100% 80%;
  --color-blue-900: 192 100% 87%;
  --color-blue-1000: 194 100% 92%;
  --color-blue-1100: 194 100% 96%;
  /* palette — gray */
  --color-gray-0: 213 25% 16%;
  --color-gray-50: 211 24% 20%;
  --color-gray-100: 210 21% 28%;
  --color-gray-200: 210 20% 33%;
  --color-gray-300: 208 16% 43%;
  --color-gray-400: 208 14% 49%;
  --color-gray-500: 207 14% 54%;
  --color-gray-600: 208 15% 58%;
  --color-gray-700: 210 13% 60%;
  --color-gray-800: 209 13% 66%;
  --color-gray-900: 206 13% 79%;
  --color-gray-1000: 203 13% 88%;
  --color-gray-1100: 180 14% 97%;
  /* palette — green */
  --color-green-0: 162 100% 7%;
  --color-green-50: 162 100% 7%;
  --color-green-100: 157 100% 13%;
  --color-green-200: 158 100% 19%;
  --color-green-300: 158 100% 25%;
  --color-green-400: 158 100% 31%;
  --color-green-500: 160 100% 36%;
  --color-green-600: 157 61% 49%;
  --color-green-700: 154 59% 61%;
  --color-green-800: 153 59% 73%;
  --color-green-900: 153 63% 85%;
  --color-green-1000: 153 67% 92%;
  --color-green-1100: 160 100% 96%;
  /* palette — magenta */
  --color-magenta-0: 330 96% 11%;
  --color-magenta-50: 330 100% 12%;
  --color-magenta-100: 331 90% 21%;
  --color-magenta-200: 332 86% 29%;
  --color-magenta-300: 332 85% 37%;
  --color-magenta-400: 332 84% 45%;
  --color-magenta-500: 332 95% 54%;
  --color-magenta-600: 332 95% 62%;
  --color-magenta-700: 332 95% 71%;
  --color-magenta-800: 332 96% 80%;
  --color-magenta-900: 332 96% 89%;
  --color-magenta-1000: 332 100% 93%;
  --color-magenta-1100: 330 100% 97%;
  /* palette — orange */
  --color-orange-0: 17 97% 12%;
  --color-orange-50: 18 100% 14%;
  --color-orange-100: 19 100% 21%;
  --color-orange-200: 19 100% 27%;
  --color-orange-300: 24 100% 35%;
  --color-orange-400: 27 100% 42%;
  --color-orange-500: 29 100% 50%;
  --color-orange-600: 29 100% 60%;
  --color-orange-700: 29 100% 69%;
  --color-orange-800: 29 100% 79%;
  --color-orange-900: 30 100% 88%;
  --color-orange-1000: 30 100% 93%;
  --color-orange-1100: 30 90% 96%;
  /* palette — plum */
  --color-plum-0: 300 88% 9%;
  --color-plum-50: 299 100% 10%;
  --color-plum-100: 299 77% 18%;
  --color-plum-200: 299 67% 26%;
  --color-plum-300: 298 64% 35%;
  --color-plum-400: 299 60% 43%;
  --color-plum-500: 299 60% 51%;
  --color-plum-600: 299 60% 60%;
  --color-plum-700: 299 60% 69%;
  --color-plum-800: 298 63% 79%;
  --color-plum-900: 299 67% 88%;
  --color-plum-1000: 300 72% 93%;
  --color-plum-1100: 300 100% 97%;
  /* palette — purple */
  --color-purple-0: 261 79% 11%;
  --color-purple-50: 260 100% 15%;
  --color-purple-100: 257 73% 25%;
  --color-purple-200: 256 62% 35%;
  --color-purple-300: 254 56% 46%;
  --color-purple-400: 253 68% 56%;
  --color-purple-500: 252 100% 67%;
  --color-purple-600: 252 100% 73%;
  --color-purple-700: 252 100% 80%;
  --color-purple-800: 252 100% 86%;
  --color-purple-900: 251 100% 92%;
  --color-purple-1000: 250 100% 95%;
  --color-purple-1100: 250 100% 98%;
  /* palette — red */
  --color-red-0: 356 97% 12%;
  --color-red-50: 356 100% 13%;
  --color-red-100: 355 87% 22%;
  --color-red-200: 351 83% 30%;
  --color-red-300: 353 79% 38%;
  --color-red-400: 355 78% 46%;
  --color-red-500: 356 91% 54%;
  --color-red-600: 354 90% 63%;
  --color-red-700: 355 90% 72%;
  --color-red-800: 354 92% 80%;
  --color-red-900: 354 93% 89%;
  --color-red-1000: 351 94% 93%;
  --color-red-1100: 356 100% 97%;
  /* palette — teal */
  --color-teal-0: 185 89% 7%;
  --color-teal-50: 185 100% 7%;
  --color-teal-100: 184 100% 13%;
  --color-teal-200: 183 100% 19%;
  --color-teal-300: 182 100% 24%;
  --color-teal-400: 182 100% 30%;
  --color-teal-500: 182 100% 36%;
  --color-teal-600: 182 100% 41%;
  --color-teal-700: 183 70% 55%;
  --color-teal-800: 182 71% 69%;
  --color-teal-900: 183 75% 83%;
  --color-teal-1000: 183 80% 90%;
  --color-teal-1100: 183 100% 96%;
  /* palette — yellow */
  --color-yellow-0: 28 94% 12%;
  --color-yellow-50: 29 100% 14%;
  --color-yellow-100: 34 100% 22%;
  --color-yellow-200: 36 100% 29%;
  --color-yellow-300: 42 100% 36%;
  --color-yellow-400: 47 100% 43%;
  --color-yellow-500: 50 100% 50%;
  --color-yellow-600: 50 100% 63%;
  --color-yellow-700: 52 100% 71%;
  --color-yellow-800: 54 100% 79%;
  --color-yellow-900: 59 100% 88%;
  --color-yellow-1000: 59 100% 92%;
  --color-yellow-1100: 54 100% 96%;
}

/* =======================================================================
   JETFUEL SUBSYSTEM — [data-theme="dim"] .jetfuel-style-root
   Used by X's ad/promotion rendering engine.
   ======================================================================= */

[data-theme="dim"] .jetfuel-style-root,
.jf-element[data-theme="dim"] {
  /* app */
  --color-background: 210 34% 13%;
  --color-text: 180 14% 97%;
  --color-drop-shadow: 136 153 166;
  /* palette */
  --color-blue-100: 192 100% 87%;
  --color-blue-200: 196 100% 80%;
  --color-gray-100: 197 16% 91%;
  --color-gray-200: 201 23% 85%;
  --color-gray-300: 201 23% 78%;
  --color-gray-400: 203 23% 69%;
  --color-gray-500: 205 20% 59%;
  --color-green-500: 142 76% 36%;
  --color-red-500: 0 84% 60%;
  --color-blue-500: 204 88% 53%;
}