Skip to content

Commit e9591d7

Browse files
ReenigneArcherReenigneArcher
committed
Add theme-aware styles and commit graph tweaks
Introduce theme-aware admonition title colors and simplify admonition map: split light/dark title backgrounds and remove per-admonition title colors from $admonitions (/_sass/admonition.scss). Add CSS variables and rules for commit activity bars and theme-aware icon filters, language logos, and ReadTheDocs icon shadows in _sass/styles.scss. Extend giscus.css with light/dark primer variables and theme-specific loading images to match site theming. Update assets/js/projects.js to use CSS classes (commit-bar-empty / commit-bar-active), attach an intensity data attribute for bar coloring, and add a readthedocs-icon class to the docs image (removing inline filter and hover JS). Also rename pygment_highlights_dark.css.bak -> pygment_highlights_dark.css. These changes improve theme compatibility and move visual logic from JS to CSS for easier styling and hover handling.
1 parent bcd9265 commit e9591d7

File tree

5 files changed

+224
-43
lines changed

5 files changed

+224
-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: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,15 @@
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+
--commit-activity-color: rgba(64, 196, 99, 0.7);
22+
23+
/* Light theme icon filters */
24+
--icon-filter: brightness(0.4) saturate(100%);
25+
--readthedocs-icon-filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(0%) hue-rotate(180deg) brightness(93%) contrast(90%);
1726
}
1827

1928
[data-bs-theme="dark"] {
@@ -29,6 +38,15 @@
2938
--admonition-text: #18191a;
3039
--circular-progress-border: #2b3035;
3140
--circular-progress-bg: #2b3035;
41+
42+
/* Dark theme commit activity colors */
43+
--commit-activity-empty: rgba(255, 255, 255, 0.1);
44+
--commit-activity-empty-hover: rgba(255, 255, 255, 0.2);
45+
--commit-activity-color: rgba(64, 196, 99, 0.9);
46+
47+
/* Dark theme icon filters */
48+
--icon-filter: brightness(1) saturate(100%);
49+
--readthedocs-icon-filter: brightness(0) saturate(100%) invert(72%) sepia(89%) saturate(455%) hue-rotate(358deg) brightness(103%) contrast(104%);
3250
}
3351

3452
body {
@@ -275,6 +293,42 @@ table tr:nth-child(2n) {
275293
color: var(--hover-col);
276294
}
277295

296+
/* Language icons - add shadow in light mode for visibility */
297+
.language-logo {
298+
filter: var(--icon-filter);
299+
}
300+
301+
[data-bs-theme="light"] .language-logo {
302+
filter: var(--icon-filter) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
303+
}
304+
305+
/* ReadTheDocs icon - theme-aware color */
306+
.readthedocs-icon {
307+
filter: var(--readthedocs-icon-filter);
308+
}
309+
310+
[data-bs-theme="light"] .readthedocs-icon {
311+
filter: var(--readthedocs-icon-filter) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
312+
}
313+
314+
/* Commit activity graph bars */
315+
.commit-bar-empty {
316+
background-color: var(--commit-activity-empty);
317+
}
318+
319+
.commit-bar-empty:hover {
320+
background-color: var(--commit-activity-empty-hover);
321+
}
322+
323+
.commit-bar-active {
324+
background-color: var(--commit-activity-color);
325+
}
326+
327+
.commit-bar-active:hover {
328+
opacity: 1;
329+
background-color: rgba(64, 196, 99, 1);
330+
}
331+
278332
/* gamepad selector cards */
279333
.gamepad-selector-card {
280334
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: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -123,23 +123,17 @@ $(document).ready(function(){
123123
let bar = document.createElement("div")
124124
let height = maxCommits > 0 ? (week.total / maxCommits) * 100 : 0
125125

126+
bar.className = week.total === 0 ? 'commit-bar-empty' : 'commit-bar-active'
126127
bar.style.cssText = `
127128
flex: 1;
128129
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) + ')'};
130130
height: ${Math.max(height, 10)}%;
131131
border-radius: 1px;
132132
transition: all 0.2s ease;
133133
`
134+
bar.dataset.intensity = (0.3 + (height / 100) * 0.7).toFixed(2)
134135
bar.title = `${week.total} commits this week`
135136

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-
})
143137

144138
activity_container.appendChild(bar)
145139
}
@@ -225,12 +219,12 @@ $(document).ready(function(){
225219
repo_data_row.appendChild(docs_link)
226220

227221
let docs_link_image = document.createElement("img")
222+
docs_link_image.className = "readthedocs-icon"
228223
docs_link_image.src = "https://cdn.jsdelivr.net/npm/simple-icons@v15/icons/readthedocs.svg"
229224
docs_link_image.alt = "ReadTheDocs"
230225
docs_link_image.title = "ReadTheDocs"
231226
docs_link_image.style.width = "24px"
232227
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%)"
234228
docs_link.prepend(docs_link_image)
235229
}
236230
}

0 commit comments

Comments
 (0)