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
|
---
title: "App Recommendation: Stylus"
date: 2021-05-30T21:17:55+07:00
categories: [blog]
tags: [recommendation, css, custom, stylus, "browser addon"]
---
## No more theme-switcher
So, I dropped the theme switcher to `auto` theme, which means it will switch
theme automagically according to your system setting.
However, if one applies [hardening][ff-config] to Firefox, one will notice that
the feature is broken, and you'll see light theme by default. How would one fix
this?
I have a nice solution: [Stylus][stylus].
Stylus is a browser addon that allows you to write custom CSS. And of course,
it is free software, released under GNU GPL version 3.0! And I love their
privacy policy:
> Unlike other similar extensions, we don't find you to be all that interesting.
> Your questionable browsing history should remain between you and the NSA.
> Stylus collects nothing. Period.
## Applying to my website
I've customized my theme to look a bit like my vim theme, badwolf, but with a
lighter background:
<picture>
<source srcset="images/badwolf-ish.webp" type="image/webp">
<img alt="badwolf-ish theme" src="/images/badwolf-ish.png">
</picture>
Here is the CSS I used:
```css
:root {
--font-color: #eee;
--bg-color: #212121;
--link-color: #0a9dff;
--link-state-color:#ffa724;
--link-state-border-color: rgba(238, 54, 54, 0.5);
--thead-bg-color: #343a40;
--table-border-color: lightgrey;
--nav-bg-color: #242424;
--nav-link-color: #b6b6b6;
--pre-color: #333;
--pre-bg-color: #f1f1f1;
--bq-color: #ccc;
--hr-color: #333;
--pagination-bg-color: #373737;
--pagination-link-color: #b6b6b6;
--post-info-color: #599ada;
--switcher-color: #333;
--switcher-bg-color: #fff;
}
body {
font-family: monospace;
}
h1, h2, h3 {
color: #aeee00;
}
ul li {
list-style: '* '; /* Remove default bullets */
}
ul li::marker {
color: #ffa724;
font-weight: bold;
}
```
The source file could be found on [sourcehut][sauce]
[ff-config]: https://privacytools.io/browsers/#about_config
[stylus]: https://addons.mozilla.org/en-US/firefox/addon/styl-us/
[sauce]: https://git.sr.ht/~huyngo/huyngo.srht.site/tree/master/item/dark.css
|
