├── screenshot.png
├── images
├── accent_color
│ ├── cyan.png
│ ├── pink.png
│ ├── red.png
│ ├── green.png
│ ├── orange.png
│ ├── purple.png
│ ├── white.png
│ ├── yellow.png
│ └── comment.png
├── button_color
│ ├── gray.png
│ ├── black.png
│ └── white.png
├── highlight_js
│ ├── turned_on.png
│ └── turned_off.png
└── rounded_corners
│ ├── sidebar_off.png
│ ├── sidebar_on.png
│ ├── user_popup_on.png
│ └── user_popup_off.png
├── LICENSE
├── README.md
├── INSTALL.md
├── DOCUMENTATION.md
└── dracula_for_stackoverflow.user.css
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/screenshot.png
--------------------------------------------------------------------------------
/images/accent_color/cyan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/accent_color/cyan.png
--------------------------------------------------------------------------------
/images/accent_color/pink.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/accent_color/pink.png
--------------------------------------------------------------------------------
/images/accent_color/red.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/accent_color/red.png
--------------------------------------------------------------------------------
/images/button_color/gray.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/button_color/gray.png
--------------------------------------------------------------------------------
/images/accent_color/green.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/accent_color/green.png
--------------------------------------------------------------------------------
/images/accent_color/orange.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/accent_color/orange.png
--------------------------------------------------------------------------------
/images/accent_color/purple.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/accent_color/purple.png
--------------------------------------------------------------------------------
/images/accent_color/white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/accent_color/white.png
--------------------------------------------------------------------------------
/images/accent_color/yellow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/accent_color/yellow.png
--------------------------------------------------------------------------------
/images/button_color/black.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/button_color/black.png
--------------------------------------------------------------------------------
/images/button_color/white.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/button_color/white.png
--------------------------------------------------------------------------------
/images/accent_color/comment.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/accent_color/comment.png
--------------------------------------------------------------------------------
/images/highlight_js/turned_on.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/highlight_js/turned_on.png
--------------------------------------------------------------------------------
/images/highlight_js/turned_off.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/highlight_js/turned_off.png
--------------------------------------------------------------------------------
/images/rounded_corners/sidebar_off.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/rounded_corners/sidebar_off.png
--------------------------------------------------------------------------------
/images/rounded_corners/sidebar_on.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/rounded_corners/sidebar_on.png
--------------------------------------------------------------------------------
/images/rounded_corners/user_popup_on.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/rounded_corners/user_popup_on.png
--------------------------------------------------------------------------------
/images/rounded_corners/user_popup_off.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dracula/stackoverflow/HEAD/images/rounded_corners/user_popup_off.png
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Dracula Theme
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Dracula for [Stack Overflow](https://stackoverflow.com)
2 |
3 | > A dark theme for [Stack Overflow](https://stackoverflow.com).
4 |
5 | 
6 |
7 | ## Install
8 |
9 | All instructions can be found at [draculatheme.com/stackoverflow](https://draculatheme.com/stackoverflow).
10 |
11 | ## Team
12 |
13 | This theme is maintained by the following person(s) and a bunch of [awesome contributors](https://github.com/dracula/stackoverflow/graphs/contributors).
14 |
15 | | [](https://github.com/wasi-master) |
16 | | --------------------------------------------------------------------------------------------- |
17 | | [Wasi master](https://github.com/wasi-master) |
18 |
19 | ## Community
20 |
21 | - [Twitter](https://twitter.com/draculatheme) - Best for getting updates about themes and new stuff.
22 | - [GitHub](https://github.com/dracula/dracula-theme/discussions) - Best for asking questions and discussing issues.
23 | - [Discord](https://draculatheme.com/discord-invite) - Best for hanging out with the community.
24 |
25 | ## License
26 |
27 | [MIT License](./LICENSE)
28 |
--------------------------------------------------------------------------------
/INSTALL.md:
--------------------------------------------------------------------------------
1 | ### [Stack Overflow](https://stackoverflow.com)
2 |
3 | #### Install with Stylus
4 |
5 | > ⚠️ NOTE: You need to have dark mode enabled in stackoverflow settings (Click on your avatar -> Click Settings -> Set Theme to Dark - [[screenshot]](https://user-images.githubusercontent.com/63045920/159838710-f7d2cb7f-c5b6-417e-8ea3-71fe7d4c557d.png))
6 |
7 | Click the button below to install the theme directly if you have the [stylus](https://add0n.com/stylus.html "Stylus is a fork of the popular Stylish extension which can be used to restyle the web.") extension installed
8 |
9 | [](https://raw.githubusercontent.com/dracula/stackoverflow/master/dracula_for_stackoverflow.user.css)
10 |
11 | #### Configuring the theme
12 |
13 | This theme is highly configurable to your liking and the options are shown below. These settings can be configured by pressing the cogwheel icon next to the name of the theme
14 |
15 | 
16 |
17 | For more information about configuration and settings please see [DOCUMENTATION.md](https://github.com/dracula/stackoverflow/blob/master/DOCUMENTATION.md)
18 |
--------------------------------------------------------------------------------
/DOCUMENTATION.md:
--------------------------------------------------------------------------------
1 | # Dracula for Stack Overflow
2 |
3 | This will outline all the settings and what they do
4 |
5 | 
6 |
7 | ## Accent Color
8 |
9 | This is the general shade of color used for everything
10 |
11 | Available values are:
12 |
13 | -
14 | 
Red
15 | 
16 |
17 |
18 | -
19 | 
Green
20 | 
21 |
22 |
23 | -
24 | 
Cyan
25 | 
26 |
27 |
28 | -
29 | 
Orange
30 | 
31 |
32 |
33 | -
34 | 
Pink
35 | 
36 |
37 |
38 | -
39 | 
Purple
40 | 
41 |
42 |
43 | -
44 | 
Yellow
45 | 
46 |
47 |
48 | -
49 | 
White
50 | 
51 |
52 |
53 | -
54 | 
Comment Color
55 | 
56 |
57 |
58 |
59 | ## Button Text Color
60 |
61 | This color is for all the texts used in the buttons
62 |
63 | Available values are:
64 |
65 | -
66 | 
Black
67 | 
68 |
69 |
70 | -
71 | 
White
72 | 
73 |
74 |
75 | -
76 | 
Gray
77 | 
78 |
79 |
80 | ## Rounded Corners
81 |
82 | This is to get rounded corners for sidebar and profile popups
83 |
84 | -
85 | ✅ Turned On
86 | User Popups
87 | 
88 | Sidebar
89 | 
90 |
91 | -
92 | ❌ Turned Off
93 | User Popups
94 | 
95 | Sidebar
96 | 
97 |
98 |
99 |
100 | ## Custom HighlightJS
101 |
102 | Enable this if you want to use the highlightjs theme as seen in [dracula/highlightjs](https://github.com/dracula/highlightjs)
103 |
104 | -
105 | ✅ Turned On
106 | 
107 |
108 | -
109 | ❌ Turned Off
110 | 
111 |
112 |
113 | ## Code Font
114 |
115 | The font used in code blocks, the format is same as [the one used for CSS](https://www.w3schools.com/csSref/pr_font_font-family.asp "A guide")
116 |
117 | ## Sans Font
118 |
119 | The font used for places where stack overflow uses a sans-serif font, the format is same as [the one used for CSS](https://www.w3schools.com/csSref/pr_font_font-family.asp "A guide")
120 |
121 | ## Serif Font
122 |
123 | The font used for places where stack overflow uses a serif font, the format is same as [the one used for CSS](https://www.w3schools.com/csSref/pr_font_font-family.asp "A guide")
124 |
--------------------------------------------------------------------------------
/dracula_for_stackoverflow.user.css:
--------------------------------------------------------------------------------
1 | /* ==UserStyle==
2 | @name Dracula for Stack Overflow
3 | @namespace dracula/stackoverflow
4 | @version 2.1.0
5 | @description Dark mode for StackOverflow and StackExchange
6 | @license MIT License
7 | @author Wasi Master
8 | @updateURL https://github.com/dracula/stackoverflow/raw/master/dracula_for_stackoverflow.user.css
9 | @preprocessor stylus
10 |
11 | @var select accent-color "Accent Color" ["red:Red", "green:Green", "cyan:Cyan", "orange:Orange", "pink:Pink", "purple:Purple*", "yellow:Yellow", "white:White", "comment:Comment Color"]
12 | @var select button-text-color "Button Text Color" ["white:White", "black:Black*", "gray:Gray"]
13 | @var checkbox rounded-corners "Rounded corners" 0
14 | @var checkbox custom-hljs-css "Custom HighlightJS" 1
15 | @var text code-font "Code Font" ui-monospace,"Cascadia Mono","Segoe UI Mono","Liberation Mono",Menlo,Monaco,Consolas,monospace
16 | @var text sans-font "Sans Font" -apple-system,BlinkMacSystemFont,"Segoe UI","Liberation Sans",sans-serif
17 | @var text serif-font "Serif Font" Georgia,Cambria,"Times New Roman",Times,serif
18 | ==/UserStyle== */
19 | @-moz-document domain("stackoverflow.com"),
20 | domain("askubuntu.com"),
21 | domain("mathoverflow.net"),
22 | domain("serverfault.com"),
23 | domain("stackapps.com"),
24 | regexp(".*stackexchange.com.*"),
25 | domain("stackmod.com"),
26 | domain("stackmod.blog"),
27 | domain("stackoverflow.blog"),
28 | domain("stackoverflowbusiness.com"),
29 | domain("stackoverflowteams.com"),
30 | domain("superuser.com"),
31 | domain("tex-talk.net"),
32 | domain("thesffblog.com") {
33 | /* ==========================================================================
34 | Base Colors
35 | ========================================================================== */
36 | body {
37 | --white: #282a36 !important;
38 | --black: #f8f8f2 !important;
39 | --orange: #ffb86c !important;
40 | --yellow: #f1fa8c !important;
41 | --green: #50fa7b !important;
42 | --blue: #bd93f9 !important;
43 | --powder: #6272a4 !important;
44 | --red: #ff5555 !important;
45 | --black-025: #343746 !important;
46 | --black-050: #343746 !important;
47 | --black-075: #343746 !important;
48 | --black-100: #373a46 !important;
49 | --black-150: #50525c !important;
50 | --black-200: #5c6071 !important;
51 | --black-300: #6a6e86 !important;
52 | --black-350: #868ca8 !important;
53 | --black-400: #abb1ce !important;
54 | --black-500: #c0c6e3 !important;
55 | --black-600: #d9dfff !important;
56 | --black-700: #e3e8ff !important;
57 | --black-750: #f0f2ff !important;
58 | --black-800: #ebeefd !important;
59 | --black-900: #f3f4fb !important;
60 | --orange-050: #19120b !important;
61 | --orange-100: #4c3720 !important;
62 | --orange-200: #805c36 !important;
63 | --orange-300: #b3814c !important;
64 | --orange-400: #ffb86c !important;
65 | --orange-500: #ffb86c !important;
66 | --orange-600: #ffb86c !important;
67 | --orange-700: #ffbf7b !important;
68 | --orange-800: #ffdcb6 !important;
69 | --orange-900: #ffead3 !important;
70 | if accent-color==purple {
71 | --blue-050: #5f4a7d !important;
72 | --blue-100: #715895 !important;
73 | --blue-200: #8467ae !important;
74 | --blue-300: #9776c7 !important;
75 | --blue-400: #aa84e0 !important;
76 | --blue-500: #bd93f9 !important;
77 | --blue-600: #c49efa !important;
78 | --blue-700: #d7befb !important;
79 | --blue-800: #e5d4fd !important;
80 | --blue-900: #f2e9fe !important;
81 | }
82 | if accent-color==green {
83 | --blue-025: #206431 !important;
84 | --blue-050: #287d3e !important;
85 | --blue-100: #30964a !important;
86 | --blue-200: #38af56 !important;
87 | --blue-300: #40c862 !important;
88 | --blue-400: #48e16f !important;
89 | --blue-500: #50fa7b !important;
90 | --blue-600: #62fb88 !important;
91 | --blue-700: #73fb95 !important;
92 | --blue-800: #85fca3 !important;
93 | --blue-900: #a8fdbd !important;
94 | }
95 | if accent-color==red {
96 | --blue-050: #662222 !important;
97 | --blue-100: #802b2b !important;
98 | --blue-200: #993333 !important;
99 | --blue-300: #cc4444 !important;
100 | --blue-400: #e64d4d !important;
101 | --blue-500: #ff5555 !important;
102 | --blue-600: #ff7777 !important;
103 | --blue-700: #ff9999 !important;
104 | --blue-800: #ffaaaa !important;
105 | --blue-900: #ffcccc !important;
106 | }
107 | if accent-color==comment {
108 | --blue-050: #272e42 !important;
109 | --blue-100: #3b4462 !important;
110 | --blue-200: #6272a4 !important;
111 | --blue-300: #4e5b83 !important;
112 | --blue-400: #586794 !important;
113 | --blue-500: #6272a4 !important;
114 | --blue-600: #6272a4 !important;
115 | --blue-700: #8ea2e0 !important;
116 | --blue-800: #acb8df !important;
117 | --blue-900: #dadde7 !important;
118 | }
119 | if accent-color==orange {
120 | --blue-050: #583F25 !important;
121 | --blue-100: #825D37 !important;
122 | --blue-200: #805c36 !important;
123 | --blue-300: #b3814c !important;
124 | --blue-400: #ffb86c !important;
125 | --blue-500: #ffb86c !important;
126 | --blue-600: #ffb86c !important;
127 | --blue-700: #ffbf7b !important;
128 | --blue-800: #ffdcb6 !important;
129 | --blue-900: #ffead3 !important;
130 | }
131 | if accent-color==yellow {
132 | --blue-050: #585a46 !important;
133 | --blue-100: #6e7150 !important;
134 | --blue-200: #a9af62 !important;
135 | --blue-300: #c1c870 !important;
136 | --blue-400: #d9e17e !important;
137 | --blue-500: #f1fa8c !important;
138 | --blue-600: #f2fb98 !important;
139 | --blue-700: #f5fcaf !important;
140 | --blue-800: #f8fdc6 !important;
141 | --blue-900: #fbfedd !important;
142 | }
143 | if accent-color==white {
144 | --blue-050: #cccccc !important;
145 | --blue-100: #d1d1d1 !important;
146 | --blue-200: #d6d6d6 !important;
147 | --blue-300: #dbdbdb !important;
148 | --blue-400: #e0e0e0 !important;
149 | --blue-500: #e6e6e6 !important;
150 | --blue-600: #ebebeb !important;
151 | --blue-700: #f0f0f0 !important;
152 | --blue-800: #f5f5f5 !important;
153 | --blue-900: #fafafa !important;
154 | }
155 | if accent-color==cyan {
156 | --blue-050: #46757f !important;
157 | --blue-100: #538c98 !important;
158 | --blue-200: #61a3b1 !important;
159 | --blue-300: #6fbaca !important;
160 | --blue-400: #7dd2e4 !important;
161 | --blue-500: #8be9fd !important;
162 | --blue-600: #97ebfd !important;
163 | --blue-700: #a2edfd !important;
164 | --blue-800: #b9f2fe !important;
165 | --blue-900: #d1f6fe !important;
166 | }
167 | if accent-color==pink {
168 | --blue-050: #803d63 !important;
169 | --blue-100: #994977 !important;
170 | --blue-200: #b3558b !important;
171 | --blue-300: #cc619e !important;
172 | --blue-400: #e66db2 !important;
173 | --blue-500: #ff79c6 !important;
174 | --blue-600: #ff86cc !important;
175 | --blue-700: #ff94d1 !important;
176 | --blue-800: #ffa1d7 !important;
177 | --blue-900: #ffafdd !important;
178 | }
179 | --powder-050: #272e42 !important;
180 | --powder-100-transparent: #3b446250;
181 | --powder-100: #3b4462 !important;
182 | --powder-200: #6272a4 !important;
183 | --powder-300: #4e5b83 !important;
184 | --powder-400: #586794 !important;
185 | --powder-500: #6272a4 !important;
186 | --powder-600: #6272a4 !important;
187 | --powder-700: #8ea2e0 !important;
188 | --powder-800: #acb8df !important;
189 | --powder-900: #dadde7 !important;
190 | --green-025: #206431 !important;
191 | --green-050: #287d3e !important;
192 | --green-100: #30964a !important;
193 | --green-200: #38af56 !important;
194 | --green-300: #40c862 !important;
195 | --green-400: #48e16f !important;
196 | --green-500: #50fa7b !important;
197 | --green-600: #62fb88 !important;
198 | --green-700: #73fb95 !important;
199 | --green-800: #85fca3 !important;
200 | --green-900: #a8fdbd !important;
201 | --yellow-050: #585a46 !important;
202 | --yellow-100: #6e7150 !important;
203 | --yellow-200: #a9af62 !important;
204 | --yellow-300: #c1c870 !important;
205 | --yellow-400: #d9e17e !important;
206 | --yellow-500: #f1fa8c !important;
207 | --yellow-600: #f2fb98 !important;
208 | --yellow-700: #f5fcaf !important;
209 | --yellow-800: #f8fdc6 !important;
210 | --yellow-900: #fbfedd !important;
211 | --red-050: #662222 !important;
212 | --red-100: #802b2b !important;
213 | --red-200: #993333 !important;
214 | --red-300: #cc4444 !important;
215 | --red-400: #e64d4d !important;
216 | --red-500: #ff5555 !important;
217 | --red-600: #ff7777 !important;
218 | --red-700: #ff9999 !important;
219 | --red-800: #ffaaaa !important;
220 | --red-900: #ffcccc !important;
221 | --gold: hsl(48, 100%, 50%) !important;
222 | --gold-lighter: hsl(48, 22%, 30%) !important;
223 | --gold-darker: hsl(45, 100%, 47%) !important;
224 | --silver: hsl(210, 6%, 72%) !important;
225 | --silver-lighter: hsl(0, 0%, 26%) !important;
226 | --silver-darker: hsl(210, 3%, 61%) !important;
227 | --bronze: hsl(28, 38%, 67%) !important;
228 | --bronze-lighter: hsl(28, 13%, 27%) !important;
229 | --bronze-darker: hsl(28, 31%, 52%) !important;
230 | --bc-lightest: var(--black-025) !important;
231 | --bc-lighter: var(--black-050) !important;
232 | --bc-light: var(--black-075) !important;
233 | --bc-medium: var(--black-100) !important;
234 | --bc-dark: var(--black-150) !important;
235 | --bc-darker: var(--black-200) !important;
236 | --fc-dark: var(--black-900) !important;
237 | --fc-medium: var(--black-700) !important;
238 | --fc-light: var(--black-500) !important;
239 | --focus-ring-success: hsla(140, 40%, 75%, 0.4) !important;
240 | --focus-ring-warning: hsla(47, 79%, 58%, 0.4) !important;
241 | --focus-ring-error: hsla(358, 62%, 52%, 0.3) !important;
242 | --focus-ring-muted: hsla(0, 0%, 100%, 0.1) !important;
243 | --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1),
244 | 0 1px 4px hsla(0, 0%, 0%, 0.1),
245 | 0 2px 8px hsla(0, 0%, 0%, 0.1) !important;
246 | --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11),
247 | 0 2px 6px hsla(0, 0%, 0%, 0.11),
248 | 0 3px 8px hsla(0, 0%, 0%, 0.14) !important;
249 | --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14),
250 | 0 3px 8px hsla(0, 0%, 0%, 0.14),
251 | 0 4px 13px hsla(0, 0%, 0%, 0.18) !important;
252 | --scrollbar: hsla(0, 0%, 100%, 0.2) !important;
253 | --highlight-bg: hsl(0, 2%, 11%) !important;
254 | --highlight-color: var(--black) !important;
255 | --highlight-comment: #6272a4 !important;
256 | --highlight-punctuation: #ff79c6 !important;
257 | --highlight-namespace: #ff79c6 !important;
258 | --highlight-attribute: #50fa7b !important;
259 | --highlight-literal: #50fa7b !important;
260 | --highlight-symbol: #ff79c6 !important;
261 | --highlight-keyword: #ff79c6 !important;
262 | --highlight-variable: #bd93f9 !important;
263 | --highlight-addition: var(--green-600) !important;
264 | --highlight-deletion: var(--red-700) !important;
265 | }
266 |
267 | /* ==========================================================================
268 | Custom Fonts
269 | ========================================================================== */
270 | body {
271 | --ff-sans: sans-font !important;
272 | --ff-serif: serif-font !important;
273 | --ff-mono: code-font !important;
274 | --theme-body-font-family: var(--ff-sans) !important;
275 | }
276 |
277 |
278 | /* ==========================================================================
279 | CSS Fixes
280 | ========================================================================== */
281 | /**
282 | * Footer color fix
283 | */
284 | body {
285 | --theme-footer-background-color: #343746 !important;
286 | --theme-footer-title-color: #a1aac8 !important;
287 | --theme-footer-text-color: #8c9bca !important;
288 | --theme-footer-link-color: #818eb6 !important;
289 | --theme-footer-link-color-hover: #a1aac8 !important;
290 | --theme-footer-link-color-active: hsl(27, 90%, 55%) !important;
291 | --theme-footer-link-caret-color: var(--theme-footer-background-color) !important;
292 | --theme-footer-divider-color: hsl(210, 8%, 25%) !important;
293 | }
294 |
295 |
296 | /**
297 | * Logo fix for light mode users
298 | */
299 | .s-topbar .s-topbar--logo .-img {
300 | filter: invert(.5) brightness(2);
301 | }
302 |
303 | /**
304 | * For places that have a background color
305 | */
306 | .s-post-summary--stats .s-post-summary--stats-item.has-answers.has-accepted-answer,
307 | .status.answered-accepted,
308 | .status.answered-accepted .mini-counts,
309 | .status.answered-accepted .minicounts span,
310 | .show-votes .sidebar-linked .spacer > a:first-child .answer-votes.answered-accepted,
311 | .show-votes .sidebar-related .spacer > a:first-child .answer-votes.answered-accepted,
312 | body.theme-dark .s-btn__primary:not(.is-selected),
313 | .theme-dark__forced .s-btn__primary:not(.is-selected),
314 | .bounty-indicator-tab {
315 | color: button-text-color;
316 | }
317 |
318 |
319 | /**
320 | * This will make the default UI elements such as scrollbars dark
321 | * Taken from https://stackoverflow.com/a/66097469/13123877
322 | */
323 | :root {
324 | color-scheme: dark;
325 | }
326 | /**
327 | * Adds a blackground color and border to codeblocks
328 | */
329 | pre.s-code-block,
330 | .s-prose pre:not(.s-code-block) {
331 | background-color: #282a36;
332 | border: 5px double var(--black-025);
333 | }
334 | /**
335 | * Fixes string color, by default stack overflow uses the same color as variables
336 | */
337 | code[class*="language-"] .hljs-string,
338 | pre.s-code-block > code .hljs-string {
339 | color: #f1fa8c;
340 | }
341 | /**
342 | * Fixes the hover card shown when hovering over a user's profile picture
343 | */
344 | #user-menu {
345 | background-color: var(--black-100);
346 | color: var(--black);
347 | border: none;
348 | }
349 | /**
350 | * Fixes text color for elements with black background color
351 | * --black means white, this behavior is same as stack overflow's default dark mode
352 | */
353 | #user-menu .um-header-info .mod-flair,
354 | #user-menu .um-header-info .um-user-link,
355 | #user-menu .um-header-info .um-flair .badgecount,
356 | #user-menu .um-header-info .um-flair .reputation-score {
357 | color: var(--black) !important;
358 | }
359 | /**
360 | * Fixes the owner card shown below the post
361 | * By default this is a color made for the light mode,
362 | * so dark mode doesn't suit that color so we change it
363 | */
364 | .owner {
365 | background-color: var(--black-100);
366 | }
367 | /**
368 | * Fixes the close button on hover for message tooltips
369 | */
370 | .message.message-config .message-close:hover,
371 | .message.message-info.contributor-dropdown .message-close:hover {
372 | background-color: var(--black-150);
373 | border-color: var(--black-150);
374 | color: var(--black) !important;
375 | }
376 |
377 | /**
378 | * Fixes the lack on contrast on tags and other UI elements for all the accent colors
379 | */
380 | .post-tag,
381 | .geo-tag,
382 | .container .chosen-choices .search-choice,
383 | .container .chosen-container-multi .chosen-choices li.search-choice {
384 | background-color: var(--theme-tag-background-color, var(--blue-050));
385 | }
386 | /**
387 | * Fixes the lack on contrast on tags and other UI elements for all the accent colors
388 | */
389 | if accent-color==white {
390 | .post-tag,
391 | .geo-tag,
392 | .container .chosen-choices .search-choice,
393 | .container .chosen-container-multi .chosen-choices li.search-choice {
394 | color: var(--theme-tag-color, var(--black-025));
395 | background-color: var(--theme-tag-background-color, var(--black-600));
396 | }
397 | }
398 | if accent-color==comment {
399 | .post-tag,
400 | .geo-tag,
401 | .container .chosen-choices .search-choice,
402 | .container .chosen-container-multi .chosen-choices li.search-choice {
403 | color: var(--theme-tag-color, var(--blue-900));
404 | background-color: var(--theme-tag-background-color, var(--blue-100));
405 | }
406 | }
407 |
408 | /**
409 | * Slightly increases the contrast for code blocks
410 | */
411 | .s-prose *:not(.s-code-block) > code {
412 | background-color: var(--black-150);
413 | }
414 |
415 | /**
416 | * Slightly increases the contrast for code blocks containing hyperlinks
417 | * For red, purple, white, (comment) accent colors
418 | */
419 | if accent-color==red or accent-color==purple or accent-color==white {
420 | .s-prose *:not(.s-code-block) > a code {
421 | background-color: #444651;
422 | }
423 | }
424 | if accent-color==comment {
425 | .s-prose *:not(.s-code-block) > a code {
426 | background-color: var(--black-500);
427 | }
428 | }
429 |
430 | /**
431 | * Fixes the spam indicator for posts marked as spam
432 | */
433 | .bounty-indicator-tab.flagbg {
434 | background-color: var(--red) !important;
435 | color: white;
436 | }
437 |
438 | if rounded-corners {
439 | #user-menu,
440 | .owner {
441 | overflow: hidden;
442 | border-radius: 10px
443 | }
444 | /* For sidebar widgets */
445 | .s-sidebarwidget {
446 | overflow: hidden;
447 | border-radius: 10px;
448 | }
449 | }
450 |
451 |
452 | /* ==========================================================================
453 | Custom Syntax Highlighting CSS
454 | ========================================================================== */
455 | /* CodeMirror theme by Michael Kaminsky (https://github.com/mkaminsky11)
456 | ========================================================================== */
457 | .cm-s-default .CodeMirror-gutters,
458 | .cm-s-default.CodeMirror {
459 | background-color: #282a36!important;
460 | color: #f8f8f2!important;
461 | border: none
462 | }
463 | .cm-s-default .CodeMirror-gutters {
464 | color: #282a36!important
465 | }
466 | .cm-s-default .CodeMirror-cursor {
467 | border-left: solid thin #f8f8f0!important
468 | }
469 | .cm-s-default .CodeMirror-linenumber {
470 | color: #6d8a88!important
471 | }
472 | .cm-s-default .CodeMirror-selected {
473 | background: rgba(255, 255, 255, .1)!important
474 | }
475 | .cm-s-default .CodeMirror-line::selection,
476 | .cm-s-dracula .CodeMirror-line > span::selection,
477 | .cm-s-dracula .CodeMirror-line > span > span::selection {
478 | background: rgba(255, 255, 255, .1)!important
479 | }
480 | .cm-s-default .CodeMirror-line::-moz-selection,
481 | .cm-s-dracula .CodeMirror-line > span::-moz-selection,
482 | .cm-s-dracula .CodeMirror-line > span > span::-moz-selection {
483 | background: rgba(255, 255, 255, .1)!important
484 | }
485 | .cm-s-default span.cm-comment {
486 | color: #6272a4!important
487 | }
488 | .cm-s-default span.cm-string,
489 | .cm-s-dracula span.cm-string-2 {
490 | color: #f1fa8c!important
491 | }
492 | .cm-s-default span.cm-number {
493 | color: #bd93f9!important
494 | }
495 | .cm-s-default span.cm-variable {
496 | color: #50fa7b!important
497 | }
498 | .cm-s-default span.cm-variable-2 {
499 | color: #fff!important
500 | }
501 | .cm-s-default span.cm-def {
502 | color: #50fa7b!important
503 | }
504 | .cm-s-default span.cm-operator {
505 | color: #ff79c6!important
506 | }
507 | .cm-s-default span.cm-keyword {
508 | color: #ff79c6!important
509 | }
510 | .cm-s-default span.cm-atom {
511 | color: #bd93f9!important
512 | }
513 | .cm-s-default span.cm-meta {
514 | color: #f8f8f2!important
515 | }
516 | .cm-s-default span.cm-tag {
517 | color: #ff79c6!important
518 | }
519 | .cm-s-default span.cm-attribute {
520 | color: #50fa7b!important
521 | }
522 | .cm-s-default span.cm-qualifier {
523 | color: #50fa7b!important
524 | }
525 | .cm-s-default span.cm-property {
526 | color: #66d9ef!important
527 | }
528 | .cm-s-default span.cm-builtin {
529 | color: #50fa7b!important
530 | }
531 | .cm-s-default span.cm-variable-3,
532 | .cm-s-dracula span.cm-type {
533 | color: #ffb86c!important
534 | }
535 | .cm-s-default .CodeMirror-activeline-background {
536 | background: rgba(255, 255, 255, .1)!important
537 | }
538 | .cm-s-default .CodeMirror-matchingbracket {
539 | text-decoration: underline;
540 | color: #fff!important
541 | }
542 | /* HighlightJS theme by Denis Ciccale
543 | ========================================================================== */
544 | if custom-hljs-css {
545 | .hljs {
546 | display: block;
547 | overflow-x: auto;
548 | background: #282a36
549 | }
550 | .hljs-built_in,
551 | .hljs-link,
552 | .hljs-section,
553 | .hljs-selector-tag {
554 | color: #8be9fd
555 | }
556 | .hljs-keyword {
557 | color: #ff79c6
558 | }
559 | .hljs,
560 | .hljs-subst {
561 | color: #f8f8f2
562 | }
563 | .hljs-attr,
564 | .hljs-meta-keyword,
565 | .hljs-title {
566 | font-style: italic;
567 | color: #50fa7b
568 | }
569 | .hljs-addition,
570 | .hljs-bullet,
571 | .hljs-meta,
572 | .hljs-name,
573 | .hljs-string,
574 | .hljs-symbol,
575 | .hljs-template-tag,
576 | .hljs-template-variable,
577 | .hljs-type,
578 | .hljs-variable {
579 | color: #f1fa8c
580 | }
581 | .hljs-comment,
582 | .hljs-deletion,
583 | .hljs-quote {
584 | color: #6272a4
585 | }
586 | .hljs-doctag,
587 | .hljs-keyword,
588 | .hljs-literal,
589 | .hljs-name,
590 | .hljs-section,
591 | .hljs-selector-tag,
592 | .hljs-strong,
593 | .hljs-title,
594 | .hljs-type {
595 | font-weight: 700
596 | }
597 | .hljs-literal,
598 | .hljs-number {
599 | color: #bd93f9
600 | }
601 | .hljs-emphasis {
602 | font-style: italic
603 | }
604 | }
605 | }
606 |
607 | @-moz-document domain("askubuntu.com"),
608 | domain("mathoverflow.net"),
609 | domain("serverfault.com"),
610 | domain("stackapps.com"),
611 | regexp(".*stackexchange.com.*"),
612 | domain("stackmod.com"),
613 | domain("stackmod.blog"),
614 | domain("stackoverflow.blog"),
615 | domain("stackoverflowbusiness.com"),
616 | domain("stackoverflowteams.com"),
617 | domain("superuser.com"),
618 | domain("tex-talk.net"),
619 | domain("thesffblog.com") {
620 |
621 | /**
622 | * Adaptation for StackExchange sites without a dark theme
623 | **/
624 | body {
625 | background: none !important;
626 | --theme-primary-color: var(--blue-400)!important;
627 |
628 | --theme-primary-025: var(--blue-050)!important;
629 | --theme-primary-050: var(--blue-050)!important;
630 | --theme-primary-075: var(--blue-050)!important;
631 | --theme-primary-100: var(--blue-100)!important;
632 | --theme-primary-150: var(--blue-200)!important;
633 | --theme-primary-200: var(--blue-200)!important;
634 | --theme-primary-300: var(--blue-300)!important;
635 | --theme-primary-350: var(--blue-300)!important;
636 | --theme-primary-400: var(--blue-400)!important;
637 | --theme-primary-500: var(--blue-500)!important;
638 | --theme-primary-600: var(--blue-600)!important;
639 | --theme-primary-700: var(--blue-700)!important;
640 | --theme-primary-800: var(--blue-800)!important;
641 | --theme-primary-900: var(--blue-900)!important;
642 |
643 | --theme-background-color: var(--white)!important;
644 | --theme-content-background-color: var(--white)!important;
645 | --theme-content-border-color: var(--white)!important;
646 |
647 | --theme-tag-background-color: var(--powder-400)!important;
648 | --theme-tag-color: var(--powder-700)!important;
649 | --theme-tag-border-color: var(--powder-100)!important;
650 |
651 | --theme-link-color: var(--blue-400)!important;
652 | --theme-post-title-color: var(--blue-400)!important;
653 | }
654 |
655 | /**
656 | * Additional improvements of the SE theme
657 | **/
658 | body,
659 | header,
660 | .left-sidebar--sticky-container {
661 | background: var(--white)!important;
662 | }
663 |
664 | .s-topbar {
665 | box-shadow: 0px 0px var(--su8) black!important;
666 | }
667 |
668 | .s-btn {
669 | --_bu-filled-bs: none!important;
670 | }
671 |
672 | /* Turning the yellow of watched tags int a color less violent */
673 | .s-post-summary__watched {
674 | background: var(--blue-050)!important;
675 | }
676 |
677 | .s-post-summary__ignored {
678 | --black-500: var(--blue-100)!important;
679 | background-color: var(--powder-100-transparent)!important;
680 | }
681 |
682 | /* SE uses an `.s-btn__link` under "Custom Filters", but an `.s-btn__filled`
683 | under "Ignored Tags". The following is a work-around to make these buttons
684 | look alike, styling the button under "Custom Filters" in the same way */
685 | .s-sidebarwidget--content .s-btn__link {
686 | background-color: var(--_bu-filled-bg) !important;
687 | border: 1px solid var(--_bu-filled-bc) !important;
688 |
689 | border-radius: var(--su2)!important;
690 | padding: var(--su8)!important;
691 | /* the button under "Ignored Tags" has `.mx_auto`, centering it in the box. */
692 | margin-left: auto;
693 | margin-right: auto;
694 | }
695 |
696 | .s-sidebarwidget--content .s-btn__link:active {
697 | --theme-button-filled-active-border-color: var(--theme-primary-600);
698 | }
699 |
700 | .s-sidebarwidget--content .s-btn__link:selected {
701 | --theme-button-filled-selected-color: var(--theme-primary-900);
702 | --theme-button-filled-selected-background-color: var(--theme-primary-200);
703 | --theme-button-filled-selected-border-color: var(--theme-primary-800);
704 | }
705 | .s-sidebarwidget--content .s-btn__lin:hover {
706 | --theme-button-filled-hover-background-color: var(--theme-primary-100);
707 | }
708 |
709 | /* Removing the noisy yellow from Featured Meta */
710 | .s-sidebarwidget.s-sidebarwidget__yellow {
711 | --_sw-bc: var(--theme-background-color) !important;
712 | background-color: var(--theme-background-color) !important;
713 | }
714 |
715 | .s-sidebarwidget.s-sidebarwidget__yellow .s-sidebarwidget--header {
716 | background-color: var(--black-025)!important;
717 | }
718 |
719 | /* Marking Overlaying Elements */
720 | body {
721 | --popover-box-shadow: var(--su1) var(--su1) var(--su16) var(--theme-primary-color) !important;
722 | }
723 |
724 | .s-popover,
725 | .message,
726 | #onetrust-banner-sdk,
727 | .topbar-dialog .s-modal--dialog {
728 | box-shadow: var(--popover-box-shadow)!important;
729 | border: none!important;
730 | }
731 | }
--------------------------------------------------------------------------------