Skip to content

Commit 8ef3e2c

Browse files
ReenigneArcherReenigneArcher
authored
feat: add theme switcher (#314)
1 parent 0c152fd commit 8ef3e2c

File tree

15 files changed

+455
-199
lines changed

15 files changed

+455
-199
lines changed

‎_config_theme.yml‎

Lines changed: 32 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -60,18 +60,6 @@ post_search: true
6060
edit_page_button: true
6161
navbar-var-length: true
6262
keywords: "LizardByte,Sunshine,Moonlight,self-hosted,gamestreaming,gamestream,game,streaming,media server"
63-
footer-col: "#242526"
64-
footer-hover-col: "#28a9e6"
65-
footer-link-col: "#dfdfdf"
66-
footer-text-col: "#a8aaa8"
67-
hover-col: "#28a9e6"
68-
link-col: "#28a9e6"
69-
navbar-border-col: "#393a3b"
70-
navbar-col: "#151515"
71-
navbar-text-col: "#e4e6eb"
72-
page-col: "#303436"
73-
text-col: "#e4e4e4"
74-
mobile-theme-col: "#05FF3B"
7563
sass:
7664
sass_dir: _sass
7765
style: compressed
@@ -81,6 +69,8 @@ site-css:
8169
site-js:
8270
- "https://cdn.jsdelivr.net/npm/@lizardbyte/shared-web@2025.326.11214/dist/crowdin.js"
8371
- "/assets/js/crowdin-init.js"
72+
theme-switcher: true
73+
theme-switcher-style: 'button'
8474
gtag: "G-SSW90X5YZX"
8575
giscus:
8676
hostname: giscus.app # Replace with your giscus instance's hostname if self-hosting
@@ -98,6 +88,36 @@ giscus:
9888
lazy-loading: true
9989
date_format: "%B %-d, %Y"
10090

91+
# Light theme colors
92+
page-col: "#f5f5f5"
93+
text-col: "#212529"
94+
link-col: "#28a9e6"
95+
hover-col: "#1c7fb3"
96+
navbar-col: "#e9ecef"
97+
navbar-text-col: "#212529"
98+
navbar-border-col: "#dee2e6"
99+
footer-col: "#e9ecef"
100+
footer-text-col: "#6c757d"
101+
footer-link-col: "#212529"
102+
footer-hover-col: "#28a9e6"
103+
pygments-theme-light: "pygments-styles/ayu-light"
104+
105+
# Dark theme colors
106+
dark-page-col: "#303436"
107+
dark-text-col: "#e4e4e4"
108+
dark-link-col: "#28a9e6"
109+
dark-hover-col: "#28a9e6"
110+
dark-navbar-col: "#151515"
111+
dark-navbar-text-col: "#e4e6eb"
112+
dark-navbar-border-col: "#393a3b"
113+
dark-footer-col: "#242526"
114+
dark-footer-text-col: "#a8aaa8"
115+
dark-footer-link-col: "#dfdfdf"
116+
dark-footer-hover-col: "#28a9e6"
117+
pygments-theme-dark: "pygments-styles/ayu-dark"
118+
119+
mobile-theme-col: "#05FF3B"
120+
101121
# Advanced settings
102122
timezone: "America/New_York"
103123
markdown: kramdown

‎_includes/license-entry.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<li class="list-group-item bg-dark text-white">
1+
<li class="list-group-item license-entry-item">
22
<div class="d-flex justify-content-between align-items-center">
33
<div>
44
<strong>{{ include.item.name }}</strong>
55
{% if include.item.version %}<span class="ms-2 badge bg-secondary">{{ include.item.version }}</span>{% endif %}
6-
<small class="d-block text-muted">
7-
<a href="{{ include.item.url }}" target="_blank" class="text-info">{{ include.item.url }}</a>
6+
<small class="d-block license-entry-text-muted">
7+
<a href="{{ include.item.url }}" target="_blank" class="license-entry-link">{{ include.item.url }}</a>
88
</small>
99
</div>
1010
<span class="badge bg-primary">{{ include.item.license }}</span>

‎_includes/support.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- Support -->
22
<section class="p-5" id="Support">
33
<div class="mx-auto mb-5">
4-
<div class="container shadow border-0 bg-primary rounded-0">
4+
<div class="container shadow border-0 bg-primary text-white rounded-0">
55
<div class="d-table-row g-0">
66
<div class="d-table-cell px-4 align-middle text-center">
77
<h3 class="fw-bolder">Support Center</h3>

‎_sass/admonition.scss‎

Lines changed: 64 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,51 @@
11
// credit: https://www.adamsdesk.com/posts/admonitions-jekyll
22
$primary-color: #fc0;
33
$primary-bgcolor: rgba(55.59%, 44.41%, 0%, .4);
4+
5+
// Light theme admonition title colors
6+
$admonitions-light:
7+
('attention', '#ffebee')
8+
('caution', '#fff3e0')
9+
('danger', '#ffebee')
10+
('error', '#ffebee')
11+
('hint', '#e8f5e9')
12+
('important', '#fff3e0')
13+
('note', '#e3f2fd')
14+
('seealso', '#e3f2fd')
15+
('tip', '#e8f5e9')
16+
('todo', '#f5f5f5')
17+
('warning', '#fff3e0')
18+
;
19+
20+
// Dark theme admonition title colors
21+
$admonitions-dark:
22+
('attention', '#564444')
23+
('caution', '#564b3c')
24+
('danger', '#564444')
25+
('error', '#564444')
26+
('hint', '#294040')
27+
('important', '#433a38')
28+
('note', '#293d52')
29+
('seealso', '#293d52')
30+
('tip', '#294040')
31+
('todo', '#3a3a3a')
32+
('warning', '#564b3c')
33+
;
34+
435
$admonitions:
5-
//class (type), icon filename, icon/border color, title bg color
36+
//class (type), icon filename, icon/border color
637
// TODO: Can we use font-awesome directly without keeping the svg files in our repo?
7-
('attention', 'exclamation-triangle-solid.svg', '#ff5252', '#564444')
8-
('caution', 'bolt-solid.svg', '#ff9100', '#564b3c')
9-
('danger', 'bolt-solid.svg', '#ff5252', '#564444')
10-
('error', 'times-circle-solid.svg', '#ff5252', '#564444')
11-
('hint', 'question-circle-solid.svg', '#00c953', '#294040')
12-
('important', 'fire-solid.svg', '#ff9100', '#433a38')
13-
('note', 'pen-solid.svg', '#00b0ff', '#293d52')
14-
('seealso', 'info-circle-solid.svg', '#00b0ff', '#293d52')
15-
('tip', 'info-circle-solid.svg', '#00c953', '#294040')
16-
('todo', 'pen-solid.svg')
17-
('warning', 'exclamation-triangle-solid.svg', '#ff9100', '#564b3c')
18-
19-
//('note', 'pen-solid.svg')
20-
//('abstract', 'align-left-solid.svg')
21-
//('info', 'info-circle-solid.svg', '#00b0ff', '#293d52')
22-
//('tip', 'fire-solid.svg', '#ff9100', '#433a38')
23-
//('success', 'check-circle-solid.svg', '#00c953', '#294040')
24-
//('question', 'question-circle-solid.svg', '#00b8d4', '#293e4e')
25-
//('warning', 'exclamation-triangle-solid.svg', '#ff9100', '#564b3c')
26-
//('failure', 'times-circle-solid.svg', '#ff5252', '#564444')
27-
//('danger', 'bolt-solid.svg', '#ff1744', '#563e43')
28-
//('bug', 'bug-solid.svg', '#f50057', '#553c45')
29-
//('example', 'list-ol-solid.svg', '#9e9e9e', '#4c4c4c')
30-
//('quote', 'quote-right-solid.svg', '#9e9e9e', '#4c4c4c')
38+
('attention', 'exclamation-triangle-solid.svg', '#ff5252')
39+
('caution', 'bolt-solid.svg', '#ff9100')
40+
('danger', 'bolt-solid.svg', '#ff5252')
41+
('error', 'times-circle-solid.svg', '#ff5252')
42+
('hint', 'question-circle-solid.svg', '#00c953')
43+
('important', 'fire-solid.svg', '#ff9100')
44+
('note', 'pen-solid.svg', '#00b0ff')
45+
('seealso', 'info-circle-solid.svg', '#00b0ff')
46+
('tip', 'info-circle-solid.svg', '#00c953')
47+
('todo', 'pen-solid.svg', '#9e9e9e')
48+
('warning', 'exclamation-triangle-solid.svg', '#ff9100')
3149
;
3250
.admonition {
3351
margin: 1.5625em 0;
@@ -47,6 +65,12 @@ $admonitions:
4765
font-weight: 700;
4866
line-height: 3rem;
4967
}
68+
69+
// Light theme - keep title text dark
70+
[data-bs-theme="light"] .admonition .admonition-title {
71+
color: #212529;
72+
}
73+
5074
.admonition-title::before {
5175
margin-right: .5rem;
5276
width: 1.2rem;
@@ -58,17 +82,12 @@ $admonitions:
5882
background-color: $primary-color;
5983
vertical-align: text-bottom;
6084
}
61-
@each $name, $icon, $icon-color, $title-color in $admonitions {
85+
@each $name, $icon, $icon-color in $admonitions {
6286
@if $icon-color {
6387
.admonition.#{$name} {
6488
border-left-color: #{$icon-color};
6589
}
6690
}
67-
@if $title-color {
68-
.admonition.#{$name} .admonition-title {
69-
background-color: #{$title-color};
70-
}
71-
}
7291
.admonition.#{$name} .admonition-title::before {
7392
-webkit-mask: url("/assets/img/icons/#{$icon}") no-repeat 50% 50%;
7493
mask: url("/assets/img/icons/#{$icon}") no-repeat 50% 50%;
@@ -77,3 +96,17 @@ $admonitions:
7796
}
7897
}
7998
}
99+
100+
// Apply light theme title backgrounds
101+
@each $name, $light-bg in $admonitions-light {
102+
[data-bs-theme="light"] .admonition.#{$name} .admonition-title {
103+
background-color: #{$light-bg};
104+
}
105+
}
106+
107+
// Apply dark theme title backgrounds
108+
@each $name, $dark-bg in $admonitions-dark {
109+
[data-bs-theme="dark"] .admonition.#{$name} .admonition-title {
110+
background-color: #{$dark-bg};
111+
}
112+
}

‎_sass/circular-progress.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
width: 100%;
1717
height: 100%;
1818
border-radius: 50%;
19-
border: 5px solid #2b3035;
19+
border: 5px solid var(--circular-progress-border);
2020
position: absolute;
2121
top: 0;
2222
left: 0;
@@ -69,7 +69,7 @@
6969
width: 80%;
7070
height: 80%;
7171
border-radius: 50%;
72-
background: #2b3035;
72+
background: var(--circular-progress-bg);
7373
display: flex;
7474
flex-direction: column;
7575
justify-content: center;

0 commit comments

Comments
 (0)