diff --git a/scripts/shared-hugo-scripts b/scripts/shared-hugo-scripts
index 2d2779600..5953f6328 160000
--- a/scripts/shared-hugo-scripts
+++ b/scripts/shared-hugo-scripts
@@ -1 +1 @@
-Subproject commit 2d2779600c9f4d05ef369002b6743142c0ee1fea
+Subproject commit 5953f6328890791de07b571e6a990ae239694693
diff --git a/site/layouts/partials/jumbotron.html b/site/layouts/partials/jumbotron.html
index 0a679e244..23feb775d 100644
--- a/site/layouts/partials/jumbotron.html
+++ b/site/layouts/partials/jumbotron.html
@@ -54,7 +54,7 @@
inkscape:groupmode="layer"
inkscape:label="switch_outline_svg_final_white"
transform="matrix(1.3333333,0,0,-1.3333333,0,784.29333)">image/svg+xml
\ No newline at end of file
diff --git a/src/js/hero.js b/src/js/hero.js
index 9b406ae4f..db1bc22a5 100644
--- a/src/js/hero.js
+++ b/src/js/hero.js
@@ -15,14 +15,6 @@ if (navbar) {
}
// Handle random switch colors
-const leftJoycon = document.getElementById('LeftJoy');
-const rightJoycon = document.getElementById('RightJoy');
-const colors = ['orangered', 'deepskyblue', 'yellow', 'deeppink', 'lime', 'gray'];
-
-if (leftJoycon) {
- leftJoycon.classList.add('switch-' + colors[Math.floor(Math.random() * colors.length)]);
-}
-
-if (rightJoycon) {
- rightJoycon.classList.add('switch-' + colors[Math.floor(Math.random() * colors.length)]);
-}
+const colors = ["orangered", "deepskyblue", "yellow", "deeppink", "lime", "gray"];
+document.body.classList.add("switch-left-" + colors[Math.floor(Math.random() * colors.length)]);
+document.body.classList.add("switch-right-" + colors[Math.floor(Math.random() * colors.length)]);
diff --git a/src/scss/yuzu/yuzu.scss b/src/scss/yuzu/yuzu.scss
index 6eb283496..29276bc5a 100644
--- a/src/scss/yuzu/yuzu.scss
+++ b/src/scss/yuzu/yuzu.scss
@@ -7,9 +7,26 @@ $switch-gray: #828282;
@each $name, $color in ("orangered", $switch-orangered), ("deepskyblue", $switch-deepskyblue),
("yellow", $switch-yellow), ("deeppink", $switch-deeppink), ("lime", $switch-lime), ("gray", $switch-gray) {
- .switch-#{$name} path {
- // The normal coloring for the .svg is inline, so we cannot override it normally.
- stroke: $color !important;
+ .switch-left-#{$name} {
+ #jumbotron-leftjoy path {
+ // The normal coloring for the .svg is inline, so we cannot override it normally.
+ stroke: $color !important;
+ }
+
+ #logo-leftjoy path, #logo-u1 path {
+ fill: $color !important;
+ }
+ }
+
+ .switch-right-#{$name} {
+ #jumbotron-rightjoy path {
+ // The normal coloring for the .svg is inline, so we cannot override it normally.
+ stroke: $color !important;
+ }
+
+ #logo-rightjoy path, #logo-u2 path {
+ fill: $color !important;
+ }
}
}