Skip to content

Commit f1c1884

Browse files
ReenigneArcherReenigneArcher
committed
Add theme-aware styles and commit graph tweaks
Introduce light/dark theme support and visual improvements across styles and scripts. - _sass/admonition.scss: Add light/dark background color maps for admonition titles, refactor $admonitions tuple to remove per-type title color, and apply theme-specific title backgrounds; keep title text dark in light theme. - _sass/styles.scss: Add CSS variables and styles for theme-aware commit activity colors, icon filters (ReadTheDocs), language icon shadows, and commit bar classes (.commit-bar-empty/.commit-bar-active). - assets/css/giscus.css: Add Primer-based color variables for light/dark themes and swap loading/pagination images per theme. - assets/js/projects.js: Use dedicated commit-bar classes, compute intensity/opacity for active bars, and add ReadTheDocs icon class instead of inline filter style. - assets/css/pygment_highlights_dark.css: rename from .bak to active file. These changes improve theme compatibility, accessibility, and maintainability of admonitions, commit activity visualization, and external icons.
1 parent bcd9265 commit f1c1884

File tree

5 files changed

+216
-43
lines changed

5 files changed

+216
-43
lines changed

‎_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/styles.scss‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,13 @@
1414
--admonition-text: #212529;
1515
--circular-progress-border: #dee2e6;
1616
--circular-progress-bg: #e9ecef;
17+
18+
/* Light theme commit activity colors */
19+
--commit-activity-empty: rgba(0, 0, 0, 0.08);
20+
--commit-activity-empty-hover: rgba(0, 0, 0, 0.15);
21+
22+
/* Light theme icon filters */
23+
--readthedocs-icon-filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(0%) hue-rotate(180deg) brightness(93%) contrast(90%);
1724
}
1825

1926
[data-bs-theme="dark"] {
@@ -29,6 +36,13 @@
2936
--admonition-text: #18191a;
3037
--circular-progress-border: #2b3035;
3138
--circular-progress-bg: #2b3035;
39+
40+
/* Dark theme commit activity colors */
41+
--commit-activity-empty: rgba(255, 255, 255, 0.1);
42+
--commit-activity-empty-hover: rgba(255, 255, 255, 0.2);
43+
44+
/* Dark theme icon filters */
45+
--readthedocs-icon-filter: brightness(0) saturate(100%) invert(72%) sepia(89%) saturate(455%) hue-rotate(358deg) brightness(103%) contrast(104%);
3246
}
3347

3448
body {
@@ -275,6 +289,37 @@ table tr:nth-child(2n) {
275289
color: var(--hover-col);
276290
}
277291

292+
/* Language icons - add shadow in light mode for visibility */
293+
[data-bs-theme="light"] .language-logo {
294+
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4));
295+
}
296+
297+
/* ReadTheDocs icon - theme-aware color */
298+
.readthedocs-icon {
299+
filter: var(--readthedocs-icon-filter);
300+
}
301+
302+
[data-bs-theme="light"] .readthedocs-icon {
303+
filter: var(--readthedocs-icon-filter) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
304+
}
305+
306+
/* Commit activity graph bars */
307+
.commit-bar-empty {
308+
background-color: var(--commit-activity-empty);
309+
}
310+
311+
.commit-bar-empty:hover {
312+
background-color: var(--commit-activity-empty-hover);
313+
}
314+
315+
.commit-bar-active {
316+
background-color: rgb(64, 196, 99);
317+
}
318+
319+
.commit-bar-active:hover {
320+
opacity: 1 !important;
321+
}
322+
278323
/* gamepad selector cards */
279324
.gamepad-selector-card {
280325
transition: all 0.2s ease-in-out;

‎assets/css/giscus.css‎

Lines changed: 103 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,97 @@
22
* Copyright (c) 2018 GitHub Inc.
33
* https://github.com/primer/primitives/blob/main/LICENSE
44
*/
5-
main {
5+
6+
/* Light theme variables */
7+
:root {
8+
--color-prettylights-syntax-comment: #6a737d;
9+
--color-prettylights-syntax-constant: #005cc5;
10+
--color-prettylights-syntax-entity: #6f42c1;
11+
--color-prettylights-syntax-storage-modifier-import: #24292e;
12+
--color-prettylights-syntax-entity-tag: #22863a;
13+
--color-prettylights-syntax-keyword: #d73a49;
14+
--color-prettylights-syntax-string: #032f62;
15+
--color-prettylights-syntax-variable: #e36209;
16+
--color-prettylights-syntax-brackethighlighter-unmatched: #b31d28;
17+
--color-prettylights-syntax-invalid-illegal-text: #fafbfc;
18+
--color-prettylights-syntax-invalid-illegal-bg: #b31d28;
19+
--color-prettylights-syntax-carriage-return-text: #fafbfc;
20+
--color-prettylights-syntax-carriage-return-bg: #d73a49;
21+
--color-prettylights-syntax-string-regexp: #22863a;
22+
--color-prettylights-syntax-markup-list: #735c0f;
23+
--color-prettylights-syntax-markup-heading: #005cc5;
24+
--color-prettylights-syntax-markup-italic: #24292e;
25+
--color-prettylights-syntax-markup-bold: #24292e;
26+
--color-prettylights-syntax-markup-deleted-text: #b31d28;
27+
--color-prettylights-syntax-markup-deleted-bg: #ffeef0;
28+
--color-prettylights-syntax-markup-inserted-text: #22863a;
29+
--color-prettylights-syntax-markup-inserted-bg: #f0fff4;
30+
--color-prettylights-syntax-markup-changed-text: #e36209;
31+
--color-prettylights-syntax-markup-changed-bg: #ffebda;
32+
--color-prettylights-syntax-markup-ignored-text: #f6f8fa;
33+
--color-prettylights-syntax-markup-ignored-bg: #005cc5;
34+
--color-prettylights-syntax-meta-diff-range: #6f42c1;
35+
--color-prettylights-syntax-brackethighlighter-angle: #6a737d;
36+
--color-prettylights-syntax-sublimelinter-gutter-mark: #d1d5da;
37+
--color-prettylights-syntax-constant-other-reference-link: #032f62;
38+
--color-btn-text: #24292e;
39+
--color-btn-bg: #fafbfc;
40+
--color-btn-border: rgba(27,31,35,0.15);
41+
--color-btn-shadow: 0 1px 0 rgba(27,31,35,0.04);
42+
--color-btn-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
43+
--color-btn-hover-bg: #f3f4f6;
44+
--color-btn-hover-border: rgba(27,31,35,0.15);
45+
--color-btn-active-bg: #edeff2;
46+
--color-btn-active-border: rgba(27,31,35,0.15);
47+
--color-btn-selected-bg: #e9ecef;
48+
--color-btn-primary-text: #fff;
49+
--color-btn-primary-bg: #2da44e;
50+
--color-btn-primary-border: rgba(27,31,35,0.15);
51+
--color-btn-primary-shadow: 0 1px 0 rgba(27,31,35,0.1);
52+
--color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
53+
--color-btn-primary-hover-bg: #2c974b;
54+
--color-btn-primary-hover-border: rgba(27,31,35,0.15);
55+
--color-btn-primary-selected-bg: #2c974b;
56+
--color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
57+
--color-btn-primary-disabled-text: rgba(255,255,255,0.8);
58+
--color-btn-primary-disabled-bg: #94d3a2;
59+
--color-btn-primary-disabled-border: rgba(27,31,35,0.15);
60+
--color-action-list-item-default-hover-bg: rgba(208,215,222,0.32);
61+
--color-segmented-control-bg: #f6f8fa;
62+
--color-segmented-control-button-bg: #ffffff;
63+
--color-segmented-control-button-selected-border: #e1e4e8;
64+
--color-fg-default: #24292e;
65+
--color-fg-muted: #57606a;
66+
--color-fg-subtle: #6a737d;
67+
--color-canvas-default: #ffffff;
68+
--color-canvas-overlay: #ffffff;
69+
--color-canvas-inset: #f6f8fa;
70+
--color-canvas-subtle: #f6f8fa;
71+
--color-border-default: #d0d7de;
72+
--color-border-muted: #d8dee4;
73+
--color-neutral-muted: rgba(175,184,193,0.2);
74+
--color-accent-fg: #0969da;
75+
--color-accent-emphasis: #0969da;
76+
--color-accent-muted: rgba(84,174,255,0.4);
77+
--color-accent-subtle: #ddf4ff;
78+
--color-success-fg: #1a7f37;
79+
--color-attention-fg: #9a6700;
80+
--color-attention-muted: rgba(212,167,44,0.4);
81+
--color-attention-subtle: #fff8c5;
82+
--color-danger-fg: #cf222e;
83+
--color-danger-muted: rgba(255,129,130,0.4);
84+
--color-danger-subtle: #ffebe9;
85+
--color-primer-shadow-inset: inset 0 1px 0 rgba(208,215,222,0.2);
86+
--color-scale-gray-7: #d0d7de;
87+
--color-scale-blue-8: #0969da;
88+
89+
/*! Extensions from @primer/css/alerts/flash.scss */
90+
--color-social-reaction-bg-hover: var(--color-scale-gray-7);
91+
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8)
92+
}
93+
94+
/* Dark theme variables */
95+
[data-bs-theme="dark"] main {
696
--color-prettylights-syntax-comment: #8b949e;
797
--color-prettylights-syntax-constant: #79c0ff;
898
--color-prettylights-syntax-entity: #d2a8ff;
@@ -89,10 +179,20 @@ main {
89179
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8)
90180
}
91181

92-
main .pagination-loader-container {
182+
/* Dark theme images */
183+
[data-bs-theme="dark"] main .pagination-loader-container {
93184
background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg)
94185
}
95186

96-
main .gsc-loading-image {
187+
[data-bs-theme="dark"] main .gsc-loading-image {
97188
background-image: url(https://github.githubassets.com/images/mona-loading-dark.gif)
98189
}
190+
191+
/* Light theme images */
192+
main .pagination-loader-container {
193+
background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line.svg)
194+
}
195+
196+
main .gsc-loading-image {
197+
background-image: url(https://github.githubassets.com/images/mona-loading-default.gif)
198+
}

assets/css/pygment_highlights_dark.css.bak renamed to assets/css/pygment_highlights_dark.css

File renamed without changes.

‎assets/js/projects.js‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -122,24 +122,19 @@ $(document).ready(function(){
122122
for (let week of commitActivity) {
123123
let bar = document.createElement("div")
124124
let height = maxCommits > 0 ? (week.total / maxCommits) * 100 : 0
125+
let intensity = 0.3 + (height / 100) * 0.7
125126

127+
bar.className = week.total === 0 ? 'commit-bar-empty' : 'commit-bar-active'
126128
bar.style.cssText = `
127129
flex: 1;
128130
min-width: 2px;
129-
background-color: ${week.total === 0 ? 'rgba(255,255,255,0.1)' : 'rgba(64, 196, 99, ' + (0.3 + (height / 100) * 0.7) + ')'};
130131
height: ${Math.max(height, 10)}%;
131132
border-radius: 1px;
132133
transition: all 0.2s ease;
134+
opacity: ${week.total === 0 ? 1 : intensity};
133135
`
134136
bar.title = `${week.total} commits this week`
135137

136-
// Add hover effect
137-
bar.addEventListener('mouseenter', function() {
138-
this.style.backgroundColor = week.total === 0 ? 'rgba(255,255,255,0.2)' : 'rgba(64, 196, 99, 1)'
139-
})
140-
bar.addEventListener('mouseleave', function() {
141-
this.style.backgroundColor = week.total === 0 ? 'rgba(255,255,255,0.1)' : 'rgba(64, 196, 99, ' + (0.3 + (height / 100) * 0.7) + ')'
142-
})
143138

144139
activity_container.appendChild(bar)
145140
}
@@ -225,12 +220,12 @@ $(document).ready(function(){
225220
repo_data_row.appendChild(docs_link)
226221

227222
let docs_link_image = document.createElement("img")
223+
docs_link_image.className = "readthedocs-icon"
228224
docs_link_image.src = "https://cdn.jsdelivr.net/npm/simple-icons@v15/icons/readthedocs.svg"
229225
docs_link_image.alt = "ReadTheDocs"
230226
docs_link_image.title = "ReadTheDocs"
231227
docs_link_image.style.width = "24px"
232228
docs_link_image.style.height = "24px"
233-
docs_link_image.style.filter = "brightness(0) saturate(100%) invert(72%) sepia(89%) saturate(455%) hue-rotate(358deg) brightness(103%) contrast(104%)"
234229
docs_link.prepend(docs_link_image)
235230
}
236231
}

0 commit comments

Comments
 (0)