Support Center
diff --git a/_sass/admonition.scss b/_sass/admonition.scss
index 300dd149..f0b59d64 100644
--- a/_sass/admonition.scss
+++ b/_sass/admonition.scss
@@ -1,33 +1,51 @@
// credit: https://www.adamsdesk.com/posts/admonitions-jekyll
$primary-color: #fc0;
$primary-bgcolor: rgba(55.59%, 44.41%, 0%, .4);
+
+// Light theme admonition title colors
+$admonitions-light:
+ ('attention', '#ffebee')
+ ('caution', '#fff3e0')
+ ('danger', '#ffebee')
+ ('error', '#ffebee')
+ ('hint', '#e8f5e9')
+ ('important', '#fff3e0')
+ ('note', '#e3f2fd')
+ ('seealso', '#e3f2fd')
+ ('tip', '#e8f5e9')
+ ('todo', '#f5f5f5')
+ ('warning', '#fff3e0')
+;
+
+// Dark theme admonition title colors
+$admonitions-dark:
+ ('attention', '#564444')
+ ('caution', '#564b3c')
+ ('danger', '#564444')
+ ('error', '#564444')
+ ('hint', '#294040')
+ ('important', '#433a38')
+ ('note', '#293d52')
+ ('seealso', '#293d52')
+ ('tip', '#294040')
+ ('todo', '#3a3a3a')
+ ('warning', '#564b3c')
+;
+
$admonitions:
- //class (type), icon filename, icon/border color, title bg color
+ //class (type), icon filename, icon/border color
// TODO: Can we use font-awesome directly without keeping the svg files in our repo?
- ('attention', 'exclamation-triangle-solid.svg', '#ff5252', '#564444')
- ('caution', 'bolt-solid.svg', '#ff9100', '#564b3c')
- ('danger', 'bolt-solid.svg', '#ff5252', '#564444')
- ('error', 'times-circle-solid.svg', '#ff5252', '#564444')
- ('hint', 'question-circle-solid.svg', '#00c953', '#294040')
- ('important', 'fire-solid.svg', '#ff9100', '#433a38')
- ('note', 'pen-solid.svg', '#00b0ff', '#293d52')
- ('seealso', 'info-circle-solid.svg', '#00b0ff', '#293d52')
- ('tip', 'info-circle-solid.svg', '#00c953', '#294040')
- ('todo', 'pen-solid.svg')
- ('warning', 'exclamation-triangle-solid.svg', '#ff9100', '#564b3c')
-
- //('note', 'pen-solid.svg')
- //('abstract', 'align-left-solid.svg')
- //('info', 'info-circle-solid.svg', '#00b0ff', '#293d52')
- //('tip', 'fire-solid.svg', '#ff9100', '#433a38')
- //('success', 'check-circle-solid.svg', '#00c953', '#294040')
- //('question', 'question-circle-solid.svg', '#00b8d4', '#293e4e')
- //('warning', 'exclamation-triangle-solid.svg', '#ff9100', '#564b3c')
- //('failure', 'times-circle-solid.svg', '#ff5252', '#564444')
- //('danger', 'bolt-solid.svg', '#ff1744', '#563e43')
- //('bug', 'bug-solid.svg', '#f50057', '#553c45')
- //('example', 'list-ol-solid.svg', '#9e9e9e', '#4c4c4c')
- //('quote', 'quote-right-solid.svg', '#9e9e9e', '#4c4c4c')
+ ('attention', 'exclamation-triangle-solid.svg', '#ff5252')
+ ('caution', 'bolt-solid.svg', '#ff9100')
+ ('danger', 'bolt-solid.svg', '#ff5252')
+ ('error', 'times-circle-solid.svg', '#ff5252')
+ ('hint', 'question-circle-solid.svg', '#00c953')
+ ('important', 'fire-solid.svg', '#ff9100')
+ ('note', 'pen-solid.svg', '#00b0ff')
+ ('seealso', 'info-circle-solid.svg', '#00b0ff')
+ ('tip', 'info-circle-solid.svg', '#00c953')
+ ('todo', 'pen-solid.svg', '#9e9e9e')
+ ('warning', 'exclamation-triangle-solid.svg', '#ff9100')
;
.admonition {
margin: 1.5625em 0;
@@ -47,6 +65,12 @@ $admonitions:
font-weight: 700;
line-height: 3rem;
}
+
+// Light theme - keep title text dark
+[data-bs-theme="light"] .admonition .admonition-title {
+ color: #212529;
+}
+
.admonition-title::before {
margin-right: .5rem;
width: 1.2rem;
@@ -58,17 +82,12 @@ $admonitions:
background-color: $primary-color;
vertical-align: text-bottom;
}
-@each $name, $icon, $icon-color, $title-color in $admonitions {
+@each $name, $icon, $icon-color in $admonitions {
@if $icon-color {
.admonition.#{$name} {
border-left-color: #{$icon-color};
}
}
- @if $title-color {
- .admonition.#{$name} .admonition-title {
- background-color: #{$title-color};
- }
- }
.admonition.#{$name} .admonition-title::before {
-webkit-mask: url("/assets/img/icons/#{$icon}") no-repeat 50% 50%;
mask: url("/assets/img/icons/#{$icon}") no-repeat 50% 50%;
@@ -77,3 +96,17 @@ $admonitions:
}
}
}
+
+// Apply light theme title backgrounds
+@each $name, $light-bg in $admonitions-light {
+ [data-bs-theme="light"] .admonition.#{$name} .admonition-title {
+ background-color: #{$light-bg};
+ }
+}
+
+// Apply dark theme title backgrounds
+@each $name, $dark-bg in $admonitions-dark {
+ [data-bs-theme="dark"] .admonition.#{$name} .admonition-title {
+ background-color: #{$dark-bg};
+ }
+}
diff --git a/_sass/circular-progress.scss b/_sass/circular-progress.scss
index db1db843..482878ec 100644
--- a/_sass/circular-progress.scss
+++ b/_sass/circular-progress.scss
@@ -16,7 +16,7 @@
width: 100%;
height: 100%;
border-radius: 50%;
- border: 5px solid #2b3035;
+ border: 5px solid var(--circular-progress-border);
position: absolute;
top: 0;
left: 0;
@@ -69,7 +69,7 @@
width: 80%;
height: 80%;
border-radius: 50%;
- background: #2b3035;
+ background: var(--circular-progress-bg);
display: flex;
flex-direction: column;
justify-content: center;
diff --git a/_sass/styles.scss b/_sass/styles.scss
index e6aca98b..93bf1d4b 100644
--- a/_sass/styles.scss
+++ b/_sass/styles.scss
@@ -1,11 +1,56 @@
@import "admonition";
+/* Theme-specific variables */
+:root {
+ /* Light theme shadows and backgrounds */
+ --card-hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+ --card-primary-shadow: 0 0 10px rgba(13, 110, 253, 0.2);
+ --card-primary-hover-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
+ --card-primary-bg: rgba(13, 110, 253, 0.08);
+
+ /* Light theme element colors */
+ --pagination-bg: #e9ecef;
+ --pagination-text: #495057;
+ --admonition-text: #212529;
+ --circular-progress-border: #dee2e6;
+ --circular-progress-bg: #e9ecef;
+
+ /* Light theme commit activity colors */
+ --commit-activity-empty: rgba(0, 0, 0, 0.08);
+ --commit-activity-empty-hover: rgba(0, 0, 0, 0.15);
+
+ /* Light theme icon filters */
+ --readthedocs-icon-filter: brightness(0) saturate(100%) invert(48%) sepia(13%) saturate(0%) hue-rotate(180deg) brightness(93%) contrast(90%);
+}
+
+[data-bs-theme="dark"] {
+ /* Dark theme shadows and backgrounds */
+ --card-hover-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+ --card-primary-shadow: 0 0 10px rgba(13, 110, 253, 0.3);
+ --card-primary-hover-shadow: 0 4px 12px rgba(13, 110, 253, 0.5);
+ --card-primary-bg: rgba(13, 110, 253, 0.15);
+
+ /* Dark theme element colors */
+ --pagination-bg: #111111;
+ --pagination-text: #e4e4e4;
+ --admonition-text: #18191a;
+ --circular-progress-border: #2b3035;
+ --circular-progress-bg: #2b3035;
+
+ /* Dark theme commit activity colors */
+ --commit-activity-empty: rgba(255, 255, 255, 0.1);
+ --commit-activity-empty-hover: rgba(255, 255, 255, 0.2);
+
+ /* Dark theme icon filters */
+ --readthedocs-icon-filter: brightness(0) saturate(100%) invert(72%) sepia(89%) saturate(455%) hue-rotate(358deg) brightness(103%) contrast(104%);
+}
+
body {
font-family: 'Open Sans', sans-serif;
}
.box-error, .box-note, .box-warning {
- color: #18191a;
+ color: var(--admonition-text);
}
.avatar-img {
@@ -47,8 +92,8 @@ code {
/* page navigation buttons */
.pagination .page-item .page-link {
- background-color: #111111;
- color: #e4e4e4;
+ background-color: var(--pagination-bg);
+ color: var(--pagination-text);
}
/* shrink logo when navbar shrinks, instead of hiding it */
@@ -144,42 +189,173 @@ table tr:nth-child(2n) {
background-color: var(--footer-col);
}
-.list-group-item.bg-dark {
- border-color: var(--navbar-col);
+/* License entry styling */
+.list-group {
+ --bs-list-group-bg: var(--navbar-col);
}
-.list-group-item.bg-dark .text-muted {
+/* License entry styling */
+.license-entry-item {
+ background-color: var(--navbar-col);
color: var(--text-col);
+ border-color: var(--navbar-col);
+}
+
+.license-entry-text-muted {
+ color: var(--footer-text-col);
}
-.list-group-item.bg-dark a {
+.license-entry-link {
+ color: var(--link-col);
text-decoration: none;
}
-.list-group-item.bg-dark a:hover {
+.license-entry-link:hover {
+ color: var(--hover-col);
text-decoration: underline;
}
-/* list groups */
-.list-group {
- --bs-list-group-bg: var(--navbar-col);
+/* License card styling */
+.license-card {
+ background-color: var(--navbar-col);
+ color: var(--text-col);
+}
+
+/* Gamepad info cards */
+.gamepad-info-card {
+ background-color: var(--navbar-col);
+ color: var(--text-col);
+}
+
+.gamepad-info-table {
+ color: var(--text-col);
+}
+
+.gamepad-info-table th,
+.gamepad-info-table td {
+ border-color: var(--footer-col);
+}
+
+.gamepad-raw-data {
+ background-color: var(--footer-col);
+ color: var(--text-col);
+}
+
+/* Stick visualization */
+.stick-circle {
+ width: 120px;
+ height: 120px;
+ border: 2px solid var(--navbar-border-col);
+ border-radius: 50%;
+}
+
+.stick-position {
+ width: 16px;
+ height: 16px;
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+}
+
+.stick-line-vertical {
+ width: 2px;
+ height: 100%;
+ background-color: var(--navbar-border-col);
+ left: 50%;
+ top: 0;
+}
+
+.stick-line-horizontal {
+ width: 100%;
+ height: 2px;
+ background-color: var(--navbar-border-col);
+ left: 0;
+ top: 50%;
+}
+
+/* Project card styling */
+.project-card-link {
+ color: var(--text-col);
+}
+
+.project-card-link:hover {
+ color: var(--link-col);
+}
+
+.project-nav-link {
+ color: var(--text-col);
+}
+
+.project-nav-link:hover {
+ color: var(--hover-col);
+}
+
+/* Support card link styling */
+.support-card-link {
+ color: var(--text-col);
+}
+
+.support-card-link:hover {
+ color: var(--link-col);
+}
+
+/* Language icons - add shadow in light mode for visibility */
+[data-bs-theme="light"] .language-logo {
+ filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 1));
+}
+
+/* ReadTheDocs icon - theme-aware color */
+.readthedocs-icon {
+ filter: var(--readthedocs-icon-filter);
+}
+
+[data-bs-theme="light"] .readthedocs-icon {
+ filter: var(--readthedocs-icon-filter) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
+}
+
+/* Commit activity graph bars */
+.commit-bar-empty {
+ background-color: var(--commit-activity-empty);
+}
+
+.commit-bar-empty:hover {
+ background-color: var(--commit-activity-empty-hover);
+}
+
+.commit-bar-active {
+ background-color: rgb(64, 196, 99);
+}
+
+.commit-bar-active:hover {
+ opacity: 1 !important;
}
/* gamepad selector cards */
.gamepad-selector-card {
transition: all 0.2s ease-in-out;
user-select: none;
+ background-color: var(--navbar-col);
+ color: var(--text-col);
}
-.gamepad-selector-card:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+.gamepad-selector-card.border-secondary {
+ background-color: var(--footer-col);
}
.gamepad-selector-card.border-primary {
- box-shadow: 0 0 10px rgba(13, 110, 253, 0.3);
+ background-color: var(--card-primary-bg);
+ box-shadow: var(--card-primary-shadow);
+}
+
+.gamepad-selector-card:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--card-hover-shadow);
}
.gamepad-selector-card.border-primary:hover {
- box-shadow: 0 4px 12px rgba(13, 110, 253, 0.5);
+ box-shadow: var(--card-primary-hover-shadow);
+}
+
+/* Override Bootstrap's text-muted to use theme colors */
+.text-muted {
+ color: var(--footer-text-col) !important;
}
diff --git a/assets/css/giscus.css b/assets/css/giscus.css
index c793723b..592d21e7 100644
--- a/assets/css/giscus.css
+++ b/assets/css/giscus.css
@@ -2,7 +2,97 @@
* Copyright (c) 2018 GitHub Inc.
* https://github.com/primer/primitives/blob/main/LICENSE
*/
-main {
+
+/* Light theme variables */
+:root {
+ --color-prettylights-syntax-comment: #6a737d;
+ --color-prettylights-syntax-constant: #005cc5;
+ --color-prettylights-syntax-entity: #6f42c1;
+ --color-prettylights-syntax-storage-modifier-import: #24292e;
+ --color-prettylights-syntax-entity-tag: #22863a;
+ --color-prettylights-syntax-keyword: #d73a49;
+ --color-prettylights-syntax-string: #032f62;
+ --color-prettylights-syntax-variable: #e36209;
+ --color-prettylights-syntax-brackethighlighter-unmatched: #b31d28;
+ --color-prettylights-syntax-invalid-illegal-text: #fafbfc;
+ --color-prettylights-syntax-invalid-illegal-bg: #b31d28;
+ --color-prettylights-syntax-carriage-return-text: #fafbfc;
+ --color-prettylights-syntax-carriage-return-bg: #d73a49;
+ --color-prettylights-syntax-string-regexp: #22863a;
+ --color-prettylights-syntax-markup-list: #735c0f;
+ --color-prettylights-syntax-markup-heading: #005cc5;
+ --color-prettylights-syntax-markup-italic: #24292e;
+ --color-prettylights-syntax-markup-bold: #24292e;
+ --color-prettylights-syntax-markup-deleted-text: #b31d28;
+ --color-prettylights-syntax-markup-deleted-bg: #ffeef0;
+ --color-prettylights-syntax-markup-inserted-text: #22863a;
+ --color-prettylights-syntax-markup-inserted-bg: #f0fff4;
+ --color-prettylights-syntax-markup-changed-text: #e36209;
+ --color-prettylights-syntax-markup-changed-bg: #ffebda;
+ --color-prettylights-syntax-markup-ignored-text: #f6f8fa;
+ --color-prettylights-syntax-markup-ignored-bg: #005cc5;
+ --color-prettylights-syntax-meta-diff-range: #6f42c1;
+ --color-prettylights-syntax-brackethighlighter-angle: #6a737d;
+ --color-prettylights-syntax-sublimelinter-gutter-mark: #d1d5da;
+ --color-prettylights-syntax-constant-other-reference-link: #032f62;
+ --color-btn-text: #24292e;
+ --color-btn-bg: #fafbfc;
+ --color-btn-border: rgba(27,31,35,0.15);
+ --color-btn-shadow: 0 1px 0 rgba(27,31,35,0.04);
+ --color-btn-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
+ --color-btn-hover-bg: #f3f4f6;
+ --color-btn-hover-border: rgba(27,31,35,0.15);
+ --color-btn-active-bg: #edeff2;
+ --color-btn-active-border: rgba(27,31,35,0.15);
+ --color-btn-selected-bg: #e9ecef;
+ --color-btn-primary-text: #fff;
+ --color-btn-primary-bg: #2da44e;
+ --color-btn-primary-border: rgba(27,31,35,0.15);
+ --color-btn-primary-shadow: 0 1px 0 rgba(27,31,35,0.1);
+ --color-btn-primary-inset-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
+ --color-btn-primary-hover-bg: #2c974b;
+ --color-btn-primary-hover-border: rgba(27,31,35,0.15);
+ --color-btn-primary-selected-bg: #2c974b;
+ --color-btn-primary-selected-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
+ --color-btn-primary-disabled-text: rgba(255,255,255,0.8);
+ --color-btn-primary-disabled-bg: #94d3a2;
+ --color-btn-primary-disabled-border: rgba(27,31,35,0.15);
+ --color-action-list-item-default-hover-bg: rgba(208,215,222,0.32);
+ --color-segmented-control-bg: #f6f8fa;
+ --color-segmented-control-button-bg: #ffffff;
+ --color-segmented-control-button-selected-border: #e1e4e8;
+ --color-fg-default: #24292e;
+ --color-fg-muted: #57606a;
+ --color-fg-subtle: #6a737d;
+ --color-canvas-default: #ffffff;
+ --color-canvas-overlay: #ffffff;
+ --color-canvas-inset: #f6f8fa;
+ --color-canvas-subtle: #f6f8fa;
+ --color-border-default: #d0d7de;
+ --color-border-muted: #d8dee4;
+ --color-neutral-muted: rgba(175,184,193,0.2);
+ --color-accent-fg: #0969da;
+ --color-accent-emphasis: #0969da;
+ --color-accent-muted: rgba(84,174,255,0.4);
+ --color-accent-subtle: #ddf4ff;
+ --color-success-fg: #1a7f37;
+ --color-attention-fg: #9a6700;
+ --color-attention-muted: rgba(212,167,44,0.4);
+ --color-attention-subtle: #fff8c5;
+ --color-danger-fg: #cf222e;
+ --color-danger-muted: rgba(255,129,130,0.4);
+ --color-danger-subtle: #ffebe9;
+ --color-primer-shadow-inset: inset 0 1px 0 rgba(208,215,222,0.2);
+ --color-scale-gray-7: #d0d7de;
+ --color-scale-blue-8: #0969da;
+
+ /*! Extensions from @primer/css/alerts/flash.scss */
+ --color-social-reaction-bg-hover: var(--color-scale-gray-7);
+ --color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8)
+}
+
+/* Dark theme variables */
+[data-bs-theme="dark"] main {
--color-prettylights-syntax-comment: #8b949e;
--color-prettylights-syntax-constant: #79c0ff;
--color-prettylights-syntax-entity: #d2a8ff;
@@ -89,10 +179,20 @@ main {
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8)
}
-main .pagination-loader-container {
+/* Dark theme images */
+[data-bs-theme="dark"] main .pagination-loader-container {
background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg)
}
-main .gsc-loading-image {
+[data-bs-theme="dark"] main .gsc-loading-image {
background-image: url(https://github.githubassets.com/images/mona-loading-dark.gif)
}
+
+/* Light theme images */
+main .pagination-loader-container {
+ background-image: url(https://github.com/images/modules/pulls/progressive-disclosure-line.svg)
+}
+
+main .gsc-loading-image {
+ background-image: url(https://github.githubassets.com/images/mona-loading-default.gif)
+}
diff --git a/assets/css/pygment_highlights.css b/assets/css/pygment_highlights.css
deleted file mode 100644
index 04330731..00000000
--- a/assets/css/pygment_highlights.css
+++ /dev/null
@@ -1,79 +0,0 @@
-/* https://github.com/richleland/pygments-css */
-.highlight .hll { background-color: #333333 }
-.highlight { background: #111111; color: #ffffff }
-.highlight .c { color: #008800; font-style: italic; background-color: #0f140f } /* Comment */
-.highlight .err { color: #ffffff } /* Error */
-.highlight .esc { color: #ffffff } /* Escape */
-.highlight .g { color: #ffffff } /* Generic */
-.highlight .k { color: #fb660a; font-weight: bold } /* Keyword */
-.highlight .l { color: #ffffff } /* Literal */
-.highlight .n { color: #ffffff } /* Name */
-.highlight .o { color: #ffffff } /* Operator */
-.highlight .x { color: #ffffff } /* Other */
-.highlight .p { color: #ffffff } /* Punctuation */
-.highlight .ch { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Hashbang */
-.highlight .cm { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Multiline */
-.highlight .cp { color: #ff0007; font-weight: bold; font-style: italic; background-color: #0f140f } /* Comment.Preproc */
-.highlight .cpf { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.PreprocFile */
-.highlight .c1 { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Single */
-.highlight .cs { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Special */
-.highlight .gd { color: #ffffff } /* Generic.Deleted */
-.highlight .ge { color: #ffffff } /* Generic.Emph */
-.highlight .gr { color: #ffffff } /* Generic.Error */
-.highlight .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
-.highlight .gi { color: #ffffff } /* Generic.Inserted */
-.highlight .go { color: #444444; background-color: #888888 } /* Generic.Output */
-.highlight .gp { color: #ffffff } /* Generic.Prompt */
-.highlight .gs { color: #ffffff } /* Generic.Strong */
-.highlight .gu { color: #ffffff; font-weight: bold } /* Generic.Subheading */
-.highlight .gt { color: #ffffff } /* Generic.Traceback */
-.highlight .kc { color: #fb660a; font-weight: bold } /* Keyword.Constant */
-.highlight .kd { color: #fb660a; font-weight: bold } /* Keyword.Declaration */
-.highlight .kn { color: #fb660a; font-weight: bold } /* Keyword.Namespace */
-.highlight .kp { color: #fb660a } /* Keyword.Pseudo */
-.highlight .kr { color: #fb660a; font-weight: bold } /* Keyword.Reserved */
-.highlight .kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */
-.highlight .ld { color: #ffffff } /* Literal.Date */
-.highlight .m { color: #0086f7; font-weight: bold } /* Literal.Number */
-.highlight .s { color: #0086d2 } /* Literal.String */
-.highlight .na { color: #ff0086; font-weight: bold } /* Name.Attribute */
-.highlight .nb { color: #ffffff } /* Name.Builtin */
-.highlight .nc { color: #ffffff } /* Name.Class */
-.highlight .no { color: #0086d2 } /* Name.Constant */
-.highlight .nd { color: #ffffff } /* Name.Decorator */
-.highlight .ni { color: #ffffff } /* Name.Entity */
-.highlight .ne { color: #ffffff } /* Name.Exception */
-.highlight .nf { color: #ff0086; font-weight: bold } /* Name.Function */
-.highlight .nl { color: #ffffff } /* Name.Label */
-.highlight .nn { color: #ffffff } /* Name.Namespace */
-.highlight .nx { color: #ffffff } /* Name.Other */
-.highlight .py { color: #ffffff } /* Name.Property */
-.highlight .nt { color: #fb660a; font-weight: bold } /* Name.Tag */
-.highlight .nv { color: #fb660a } /* Name.Variable */
-.highlight .ow { color: #ffffff } /* Operator.Word */
-.highlight .w { color: #888888 } /* Text.Whitespace */
-.highlight .mb { color: #0086f7; font-weight: bold } /* Literal.Number.Bin */
-.highlight .mf { color: #0086f7; font-weight: bold } /* Literal.Number.Float */
-.highlight .mh { color: #0086f7; font-weight: bold } /* Literal.Number.Hex */
-.highlight .mi { color: #0086f7; font-weight: bold } /* Literal.Number.Integer */
-.highlight .mo { color: #0086f7; font-weight: bold } /* Literal.Number.Oct */
-.highlight .sa { color: #0086d2 } /* Literal.String.Affix */
-.highlight .sb { color: #0086d2 } /* Literal.String.Backtick */
-.highlight .sc { color: #0086d2 } /* Literal.String.Char */
-.highlight .dl { color: #0086d2 } /* Literal.String.Delimiter */
-.highlight .sd { color: #0086d2 } /* Literal.String.Doc */
-.highlight .s2 { color: #0086d2 } /* Literal.String.Double */
-.highlight .se { color: #0086d2 } /* Literal.String.Escape */
-.highlight .sh { color: #0086d2 } /* Literal.String.Heredoc */
-.highlight .si { color: #0086d2 } /* Literal.String.Interpol */
-.highlight .sx { color: #0086d2 } /* Literal.String.Other */
-.highlight .sr { color: #0086d2 } /* Literal.String.Regex */
-.highlight .s1 { color: #0086d2 } /* Literal.String.Single */
-.highlight .ss { color: #0086d2 } /* Literal.String.Symbol */
-.highlight .bp { color: #ffffff } /* Name.Builtin.Pseudo */
-.highlight .fm { color: #ff0086; font-weight: bold } /* Name.Function.Magic */
-.highlight .vc { color: #fb660a } /* Name.Variable.Class */
-.highlight .vg { color: #fb660a } /* Name.Variable.Global */
-.highlight .vi { color: #fb660a } /* Name.Variable.Instance */
-.highlight .vm { color: #fb660a } /* Name.Variable.Magic */
-.highlight .il { color: #0086f7; font-weight: bold } /* Literal.Number.Integer.Long */
diff --git a/assets/css/pygment_highlights_dark.css b/assets/css/pygment_highlights_dark.css
new file mode 100644
index 00000000..ebdb88b9
--- /dev/null
+++ b/assets/css/pygment_highlights_dark.css
@@ -0,0 +1,81 @@
+/* https://github.com/richleland/pygments-css */
+[data-bs-theme="dark"] {
+ .highlight .hll { background-color: #333333 }
+ .highlight { background: #111111; color: #ffffff }
+ .highlight .c { color: #008800; font-style: italic; background-color: #0f140f } /* Comment */
+ .highlight .err { color: #ffffff } /* Error */
+ .highlight .esc { color: #ffffff } /* Escape */
+ .highlight .g { color: #ffffff } /* Generic */
+ .highlight .k { color: #fb660a; font-weight: bold } /* Keyword */
+ .highlight .l { color: #ffffff } /* Literal */
+ .highlight .n { color: #ffffff } /* Name */
+ .highlight .o { color: #ffffff } /* Operator */
+ .highlight .x { color: #ffffff } /* Other */
+ .highlight .p { color: #ffffff } /* Punctuation */
+ .highlight .ch { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Hashbang */
+ .highlight .cm { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Multiline */
+ .highlight .cp { color: #ff0007; font-weight: bold; font-style: italic; background-color: #0f140f } /* Comment.Preproc */
+ .highlight .cpf { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.PreprocFile */
+ .highlight .c1 { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Single */
+ .highlight .cs { color: #008800; font-style: italic; background-color: #0f140f } /* Comment.Special */
+ .highlight .gd { color: #ffffff } /* Generic.Deleted */
+ .highlight .ge { color: #ffffff } /* Generic.Emph */
+ .highlight .gr { color: #ffffff } /* Generic.Error */
+ .highlight .gh { color: #ffffff; font-weight: bold } /* Generic.Heading */
+ .highlight .gi { color: #ffffff } /* Generic.Inserted */
+ .highlight .go { color: #444444; background-color: #888888 } /* Generic.Output */
+ .highlight .gp { color: #ffffff } /* Generic.Prompt */
+ .highlight .gs { color: #ffffff } /* Generic.Strong */
+ .highlight .gu { color: #ffffff; font-weight: bold } /* Generic.Subheading */
+ .highlight .gt { color: #ffffff } /* Generic.Traceback */
+ .highlight .kc { color: #fb660a; font-weight: bold } /* Keyword.Constant */
+ .highlight .kd { color: #fb660a; font-weight: bold } /* Keyword.Declaration */
+ .highlight .kn { color: #fb660a; font-weight: bold } /* Keyword.Namespace */
+ .highlight .kp { color: #fb660a } /* Keyword.Pseudo */
+ .highlight .kr { color: #fb660a; font-weight: bold } /* Keyword.Reserved */
+ .highlight .kt { color: #cdcaa9; font-weight: bold } /* Keyword.Type */
+ .highlight .ld { color: #ffffff } /* Literal.Date */
+ .highlight .m { color: #0086f7; font-weight: bold } /* Literal.Number */
+ .highlight .s { color: #0086d2 } /* Literal.String */
+ .highlight .na { color: #ff0086; font-weight: bold } /* Name.Attribute */
+ .highlight .nb { color: #ffffff } /* Name.Builtin */
+ .highlight .nc { color: #ffffff } /* Name.Class */
+ .highlight .no { color: #0086d2 } /* Name.Constant */
+ .highlight .nd { color: #ffffff } /* Name.Decorator */
+ .highlight .ni { color: #ffffff } /* Name.Entity */
+ .highlight .ne { color: #ffffff } /* Name.Exception */
+ .highlight .nf { color: #ff0086; font-weight: bold } /* Name.Function */
+ .highlight .nl { color: #ffffff } /* Name.Label */
+ .highlight .nn { color: #ffffff } /* Name.Namespace */
+ .highlight .nx { color: #ffffff } /* Name.Other */
+ .highlight .py { color: #ffffff } /* Name.Property */
+ .highlight .nt { color: #fb660a; font-weight: bold } /* Name.Tag */
+ .highlight .nv { color: #fb660a } /* Name.Variable */
+ .highlight .ow { color: #ffffff } /* Operator.Word */
+ .highlight .w { color: #888888 } /* Text.Whitespace */
+ .highlight .mb { color: #0086f7; font-weight: bold } /* Literal.Number.Bin */
+ .highlight .mf { color: #0086f7; font-weight: bold } /* Literal.Number.Float */
+ .highlight .mh { color: #0086f7; font-weight: bold } /* Literal.Number.Hex */
+ .highlight .mi { color: #0086f7; font-weight: bold } /* Literal.Number.Integer */
+ .highlight .mo { color: #0086f7; font-weight: bold } /* Literal.Number.Oct */
+ .highlight .sa { color: #0086d2 } /* Literal.String.Affix */
+ .highlight .sb { color: #0086d2 } /* Literal.String.Backtick */
+ .highlight .sc { color: #0086d2 } /* Literal.String.Char */
+ .highlight .dl { color: #0086d2 } /* Literal.String.Delimiter */
+ .highlight .sd { color: #0086d2 } /* Literal.String.Doc */
+ .highlight .s2 { color: #0086d2 } /* Literal.String.Double */
+ .highlight .se { color: #0086d2 } /* Literal.String.Escape */
+ .highlight .sh { color: #0086d2 } /* Literal.String.Heredoc */
+ .highlight .si { color: #0086d2 } /* Literal.String.Interpol */
+ .highlight .sx { color: #0086d2 } /* Literal.String.Other */
+ .highlight .sr { color: #0086d2 } /* Literal.String.Regex */
+ .highlight .s1 { color: #0086d2 } /* Literal.String.Single */
+ .highlight .ss { color: #0086d2 } /* Literal.String.Symbol */
+ .highlight .bp { color: #ffffff } /* Name.Builtin.Pseudo */
+ .highlight .fm { color: #ff0086; font-weight: bold } /* Name.Function.Magic */
+ .highlight .vc { color: #fb660a } /* Name.Variable.Class */
+ .highlight .vg { color: #fb660a } /* Name.Variable.Global */
+ .highlight .vi { color: #fb660a } /* Name.Variable.Instance */
+ .highlight .vm { color: #fb660a } /* Name.Variable.Magic */
+ .highlight .il { color: #0086f7; font-weight: bold } /* Literal.Number.Integer.Long */
+}
diff --git a/assets/js/gamepad-tester.js b/assets/js/gamepad-tester.js
index ecad6797..cccac4da 100644
--- a/assets/js/gamepad-tester.js
+++ b/assets/js/gamepad-tester.js
@@ -17,6 +17,24 @@ document.addEventListener('DOMContentLoaded', function() {
return;
}
+ // Watch for theme changes to update button images
+ const themeObserver = new MutationObserver(function(mutations) {
+ mutations.forEach(function(mutation) {
+ if (mutation.type === 'attributes' && mutation.attributeName === 'data-bs-theme') {
+ // Theme changed, reinitialize buttons with new color scheme
+ if (activeGamepadIndex !== null) {
+ initGamepadButtons();
+ }
+ }
+ });
+ });
+
+ // Start observing theme changes on the document element
+ themeObserver.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ['data-bs-theme']
+ });
+
// Setup gamepad event listeners
window.addEventListener("gamepadconnected", function(e) {
gamepads[e.gamepad.index] = e.gamepad;
@@ -105,10 +123,8 @@ document.addEventListener('DOMContentLoaded', function() {
// Mark active gamepad card
if (isActive) {
card.classList.add('border-primary');
- card.style.backgroundColor = 'rgba(13, 110, 253, 0.15)';
} else {
card.classList.add('border-secondary');
- card.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
}
const cardBody = document.createElement('div');
@@ -120,12 +136,12 @@ document.addEventListener('DOMContentLoaded', function() {
cardBody.innerHTML = `
-
+
-
${typeInfo.name}
-
Index: ${index}
-
${gamepadInfo.buttons.length} buttons, ${gamepadInfo.axes.length} axes
+
${typeInfo.name}
+
Index: ${index}
+
${gamepadInfo.buttons.length} buttons, ${gamepadInfo.axes.length} axes
${isActive ? '
Active' : ''}
@@ -160,12 +176,17 @@ document.addEventListener('DOMContentLoaded', function() {
const controllerType = gamepadHelper.detectControllerType(gamepad.id);
+ // Detect current theme - use Black icons for light theme, White icons for dark theme
+ const isDarkTheme = document.documentElement.dataset.bsTheme === 'dark';
+ const colorScheme = isDarkTheme ? 'White' : 'Black';
+
for (let i = 0; i < gamepad.buttons.length; i++) {
const buttonName = gamepadHelper.getButtonName(controllerType, i);
const buttonImagePath = gamepadHelper.getButtonImagePath(
controllerType,
i,
`https://cdn.jsdelivr.net/npm/@lizardbyte/gamepad-helper@${gamepadHelperVersion}/assets/img/gamepads/`,
+ colorScheme
);
const buttonDiv = document.createElement('div');
diff --git a/assets/js/projects.js b/assets/js/projects.js
index 1bfaf0bd..34871547 100644
--- a/assets/js/projects.js
+++ b/assets/js/projects.js
@@ -72,11 +72,11 @@ $(document).ready(function(){
banner_link.append(banner)
let card_body = document.createElement("div")
- card_body.className = "card-body text-white p-4 rounded-0"
+ card_body.className = "card-body p-4 rounded-0"
card.appendChild(card_body)
let card_title_link = document.createElement("a")
- card_title_link.className = "text-decoration-none link-light crowdin-ignore"
+ card_title_link.className = "text-decoration-none project-card-link crowdin-ignore"
card_title_link.href = sorted[repo]['html_url']
card_title_link.target = "_blank"
card_body.appendChild(card_title_link)
@@ -122,24 +122,19 @@ $(document).ready(function(){
for (let week of commitActivity) {
let bar = document.createElement("div")
let height = maxCommits > 0 ? (week.total / maxCommits) * 100 : 0
+ let intensity = 0.3 + (height / 100) * 0.7
+ bar.className = week.total === 0 ? 'commit-bar-empty' : 'commit-bar-active'
bar.style.cssText = `
flex: 1;
min-width: 2px;
- background-color: ${week.total === 0 ? 'rgba(255,255,255,0.1)' : 'rgba(64, 196, 99, ' + (0.3 + (height / 100) * 0.7) + ')'};
height: ${Math.max(height, 10)}%;
border-radius: 1px;
transition: all 0.2s ease;
+ opacity: ${week.total === 0 ? 1 : intensity};
`
bar.title = `${week.total} commits this week`
- // Add hover effect
- bar.addEventListener('mouseenter', function() {
- this.style.backgroundColor = week.total === 0 ? 'rgba(255,255,255,0.2)' : 'rgba(64, 196, 99, 1)'
- })
- bar.addEventListener('mouseleave', function() {
- this.style.backgroundColor = week.total === 0 ? 'rgba(255,255,255,0.1)' : 'rgba(64, 196, 99, ' + (0.3 + (height / 100) * 0.7) + ')'
- })
activity_container.appendChild(bar)
}
@@ -158,7 +153,7 @@ $(document).ready(function(){
card_footer.appendChild(repo_data_row)
let github_link = document.createElement("a")
- github_link.className = "nav-link text-white ms-3"
+ github_link.className = "nav-link project-nav-link ms-3"
github_link.href = sorted[repo]['html_url']
github_link.target = "_blank"
repo_data_row.appendChild(github_link)
@@ -178,7 +173,7 @@ $(document).ready(function(){
})
let star_link = document.createElement("a")
- star_link.className = "nav-link nav-link-sm text-white ms-3 crowdin-ignore"
+ star_link.className = "nav-link nav-link-sm project-nav-link ms-3 crowdin-ignore"
star_link.href = `https://star-history.com/#${sorted[repo]['full_name']}`
star_link.target = "_blank"
star_link.textContent = window.formatNumber(sorted[repo]['stargazers_count'])
@@ -189,7 +184,7 @@ $(document).ready(function(){
star_link.prepend(star_link_image)
let fork_link = document.createElement("a")
- fork_link.className = "nav-link nav-link-sm text-white ms-3 crowdin-ignore"
+ fork_link.className = "nav-link nav-link-sm project-nav-link ms-3 crowdin-ignore"
fork_link.href = `https://github.com/${sorted[repo]['full_name']}/network/members`
fork_link.target = "_blank"
fork_link.textContent = window.formatNumber(sorted[repo]['forks'])
@@ -225,12 +220,12 @@ $(document).ready(function(){
repo_data_row.appendChild(docs_link)
let docs_link_image = document.createElement("img")
+ docs_link_image.className = "readthedocs-icon"
docs_link_image.src = "https://cdn.jsdelivr.net/npm/simple-icons@v15/icons/readthedocs.svg"
docs_link_image.alt = "ReadTheDocs"
docs_link_image.title = "ReadTheDocs"
docs_link_image.style.width = "24px"
docs_link_image.style.height = "24px"
- docs_link_image.style.filter = "brightness(0) saturate(100%) invert(72%) sepia(89%) saturate(455%) hue-rotate(358deg) brightness(103%) contrast(104%)"
docs_link.prepend(docs_link_image)
}
}
diff --git a/assets/js/roadmap.js b/assets/js/roadmap.js
index b462a82e..4577002d 100644
--- a/assets/js/roadmap.js
+++ b/assets/js/roadmap.js
@@ -42,7 +42,7 @@ document.addEventListener('DOMContentLoaded', function() {
});
const cardBody = document.createElement('div');
- cardBody.className = 'card-body text-white p-4 rounded-0';
+ cardBody.className = 'card-body p-4 rounded-0';
// Issue title
const titleEl = document.createElement('h5');
diff --git a/gamepad-tester.html b/gamepad-tester.html
index 6c40d656..3beba87b 100644
--- a/gamepad-tester.html
+++ b/gamepad-tester.html
@@ -33,13 +33,13 @@
Gamepad Tester
-
+
-
+
| ID | - |
|---|
| Index | - |
|---|
@@ -57,7 +57,7 @@ Gamepad Info
-
+
@@ -110,7 +110,7 @@
Vibration Test
-
+
@@ -121,7 +121,7 @@
Buttons
-
+
@@ -132,7 +132,7 @@
Axes
-
+
@@ -141,20 +141,20 @@
Sticks
@@ -164,12 +164,12 @@
Right
-
diff --git a/licenses.html b/licenses.html
index 832ce01f..97bb20ca 100644
--- a/licenses.html
+++ b/licenses.html
@@ -10,7 +10,7 @@
Licenses & Attributions
This website makes use of the following third-party tools, libraries, and resources.
-
+
diff --git a/support.html b/support.html
index 67e3a80d..5376837a 100644
--- a/support.html
+++ b/support.html
@@ -25,7 +25,7 @@
-
Reddit
diff --git a/third-party/beautiful-jekyll b/third-party/beautiful-jekyll
index e91cd3f5..733489a0 160000
--- a/third-party/beautiful-jekyll
+++ b/third-party/beautiful-jekyll
@@ -1 +1 @@
-Subproject commit e91cd3f58fd780573346aec4a9d073f7de0513d2
+Subproject commit 733489a0ab516df118554636fa274569611602da