Skip to content

Commit ffbba62

Browse files
the1812the1812
committed
Initial commit
0 parents  commit ffbba62

File tree

7 files changed

+435
-0
lines changed

7 files changed

+435
-0
lines changed

‎.vscode/settings.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"cSpell.words": [
3+
"dizzylab"
4+
]
5+
}

‎README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# dizzylab auto theme
2+
[dizzylab](https://www.dizzylab.net/) 自适应主题, 跟随系统亮/暗设定.
3+
4+
![image](./dizzylab-auto-theme.jpg)
5+
6+
## 安装
7+
> 需要浏览器拥有 [Stylus](https://github.com/openstyles/stylus) 或其他同类插件.
8+
9+
[点击此处](https://cdn.jsdelivr.net/gh/the1812/dizzylab-auto-theme@master/dizzylab.user.css)安装.

‎build.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const fs = require('fs')
2+
const code = fs.readFileSync('dizzylab.css', { encoding: 'utf-8'})
3+
const style = `
4+
/* ==UserStyle==
5+
@name dizzylab auto theme
6+
@description dizzylab 自适应主题
7+
@namespace the1812
8+
@version 1.0.0
9+
@author Grant Howard
10+
@homepageURL https://github.com/the1812/dizzylab-auto-theme/
11+
@supportURL https://github.com/the1812/dizzylab-auto-theme/issues
12+
@updateURL https://cdn.jsdelivr.net/gh/the1812/dizzylab-auto-theme@master/dizzylab.user.css
13+
@license MIT
14+
==/UserStyle== */
15+
16+
@-moz-document domain("www.dizzylab.net") {
17+
${code}
18+
}
19+
`.trim()
20+
fs.writeFileSync('dizzylab.user.css', style)

‎dizzylab-auto-theme.jpg

261 KB
Loading

‎dizzylab.css

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
@media (prefers-color-scheme: light) {
2+
html img[data-lazy][src*="holder_banner.jpg"],
3+
html img[data-src]:not(.lazyloaded) {
4+
filter: invert(1) !important;
5+
}
6+
html .bg-primary {
7+
background-color: #fff !important;
8+
}
9+
html .page-link:focus, html .page-link:hover {
10+
color: #fff !important;
11+
background-color: #343a40 !important;
12+
border-color: #343a40 !important;
13+
}
14+
html .page-item.active .page-link {
15+
border-color: #1a1a1a !important;
16+
}
17+
html .border-bottom {
18+
border-color: #2a2a2a !important;
19+
}
20+
html .slick-dots li button:before,
21+
html .slick-dots li.slick-active button:before,
22+
html .slick-next:before,
23+
html .slick-prev:before {
24+
color: #444 !important;
25+
}
26+
html .border-dark {
27+
border-color: #cfcfd0 !important;
28+
}
29+
html hr {
30+
background-color: transparent !important;
31+
}
32+
html .nav.bg-dark {
33+
background-color: #eee !important;
34+
}
35+
html .nav-pills .nav-link.active,
36+
html .nav-pills .show > .nav-link {
37+
background-color: #ddd !important;
38+
}
39+
html h1,
40+
html h2,
41+
html h3,
42+
html h4,
43+
html h5,
44+
html h6,
45+
html a,
46+
html p,
47+
html .text-white,
48+
html .text-light {
49+
color: #000 !important;
50+
}
51+
html #likes_indicator.badge,
52+
html a[style*=background-color] {
53+
color: #fff !important;
54+
}
55+
html a.text-light:focus, html a.text-light:hover {
56+
color: #000 !important;
57+
}
58+
html .dropdown-item:active, html .dropdown-item.active {
59+
background-color: #eee !important;
60+
}
61+
html .text-muted {
62+
color: #484f54 !important;
63+
}
64+
html .btn:focus {
65+
box-shadow: 0 0 0 0.2rem rgba(82, 88, 93, 0.2) !important;
66+
}
67+
html .btn-dark {
68+
color: #000 !important;
69+
background-color: #eee !important;
70+
border-color: #ddd !important;
71+
}
72+
html .btn-dark:hover {
73+
background-color: #ddd !important;
74+
}
75+
html .btn-dark:not(:disabled):not(.disabled).active, html .btn-dark:not(:disabled):not(.disabled):active {
76+
color: #000 !important;
77+
background-color: #ddd !important;
78+
border-color: #ddd !important;
79+
}
80+
html .btn-outline-light {
81+
color: #000 !important;
82+
border-color: #000 !important;
83+
}
84+
html .card-header,
85+
html .card-body,
86+
html .card {
87+
background-color: transparent !important;
88+
}
89+
html .shadow-sm {
90+
box-shadow: 0 0 0 1px #dfdfdf !important;
91+
}
92+
html .badge-primary,
93+
html .tooltip-inner {
94+
background-color: #eee !important;
95+
color: #000 !important;
96+
}
97+
html .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
98+
html .bs-tooltip-bottom .arrow::before {
99+
border-bottom-color: #eee !important;
100+
}
101+
html .bs-tooltip-auto[x-placement^=top] .arrow::before,
102+
html .bs-tooltip-top .arrow::before {
103+
border-top-color: #eee !important;
104+
}
105+
html .plyr--audio .plyr__controls {
106+
background-color: transparent !important;
107+
color: #000 !important;
108+
}
109+
html .playlist--list {
110+
background-color: #fff !important;
111+
color: #1a1a1a !important;
112+
}
113+
html .playlist--list li {
114+
background-color: transparent !important;
115+
}
116+
html .playlist--list li:hover {
117+
background-color: #ddd !important;
118+
color: #000 !important;
119+
}
120+
html .playlist--list li.active {
121+
background-color: #eee !important;
122+
color: #000 !important;
123+
}
124+
}

‎dizzylab.scss

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
@media (prefers-color-scheme: light) {
2+
html {
3+
img[data-lazy][src*="holder_banner.jpg"],
4+
img[data-src]:not(.lazyloaded) {
5+
filter: invert(1) !important;
6+
}
7+
.bg-primary {
8+
background-color: #fff !important;
9+
}
10+
.page-link {
11+
&:focus,
12+
&:hover {
13+
color: #fff !important;
14+
background-color: #343a40 !important;
15+
border-color: #343a40 !important;
16+
}
17+
}
18+
.page-item.active .page-link {
19+
border-color: #1a1a1a !important;
20+
}
21+
.border-bottom {
22+
border-color: #2a2a2a !important;
23+
}
24+
.slick-dots li button:before,
25+
.slick-dots li.slick-active button:before,
26+
.slick-next:before,
27+
.slick-prev:before {
28+
color: #444 !important;
29+
}
30+
.border-dark {
31+
border-color: #cfcfd0 !important;
32+
}
33+
hr {
34+
background-color: transparent !important;
35+
}
36+
.nav.bg-dark {
37+
background-color: #eee !important;
38+
}
39+
.nav-pills .nav-link.active,
40+
.nav-pills .show > .nav-link {
41+
background-color: #ddd !important;
42+
}
43+
h1,
44+
h2,
45+
h3,
46+
h4,
47+
h5,
48+
h6,
49+
a,
50+
p,
51+
.text-white,
52+
.text-light {
53+
color: #000 !important;
54+
}
55+
#likes_indicator.badge,
56+
a[style*="background-color"] {
57+
color: #fff !important;
58+
}
59+
a.text-light {
60+
&:focus,
61+
&:hover {
62+
color: #000 !important;
63+
}
64+
}
65+
.dropdown-item {
66+
&:active,
67+
&.active {
68+
background-color: #eee !important;
69+
}
70+
}
71+
.text-muted {
72+
color: #484f54 !important;
73+
}
74+
.btn:focus {
75+
box-shadow: 0 0 0 0.2rem rgb(82 88 93 / 20%) !important;
76+
}
77+
.btn-dark {
78+
color: #000 !important;
79+
background-color: #eee !important;
80+
border-color: #ddd !important;
81+
&:hover {
82+
background-color: #ddd !important;
83+
}
84+
&:not(:disabled):not(.disabled) {
85+
&.active,
86+
&:active {
87+
color: #000 !important;
88+
background-color: #ddd !important;
89+
border-color: #ddd !important;
90+
}
91+
}
92+
}
93+
.btn-outline-light {
94+
color: #000 !important;
95+
border-color: #000 !important;
96+
}
97+
.card-header,
98+
.card-body,
99+
.card {
100+
background-color: transparent !important;
101+
}
102+
.shadow-sm {
103+
box-shadow: 0 0 0 1px #dfdfdf !important;
104+
}
105+
.badge-primary,
106+
.tooltip-inner {
107+
background-color: #eee !important;
108+
color: #000 !important;
109+
}
110+
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
111+
.bs-tooltip-bottom .arrow::before {
112+
border-bottom-color: #eee !important;
113+
}
114+
.bs-tooltip-auto[x-placement^="top"] .arrow::before,
115+
.bs-tooltip-top .arrow::before {
116+
border-top-color: #eee !important;
117+
}
118+
.plyr--audio .plyr__controls {
119+
background-color: transparent !important;
120+
color: #000 !important;
121+
}
122+
.playlist--list {
123+
background-color: #fff !important;
124+
color: #1a1a1a !important;
125+
li {
126+
background-color: transparent !important;
127+
&:hover {
128+
background-color: #ddd !important;
129+
color: #000 !important;
130+
}
131+
&.active {
132+
background-color: #eee !important;
133+
color: #000 !important;
134+
}
135+
}
136+
}
137+
}
138+
}

0 commit comments

Comments
 (0)