diff --git a/content/_scss/darkmode-style.scss b/content/_scss/color-styles.scss
similarity index 100%
rename from content/_scss/darkmode-style.scss
rename to content/_scss/color-styles.scss
diff --git a/content/_scss/flixel-colors.scss b/content/_scss/flixel-colors.scss
index 719f3a070..15ad22447 100644
--- a/content/_scss/flixel-colors.scss
+++ b/content/_scss/flixel-colors.scss
@@ -1,5 +1,5 @@
 $flixel-dark-blue: #3b43ff;
-$flixel-yello: #ffbf37;
+$flixel-yellow: #ffbf37;
 $flixel-red: #ff2346;
 $flixel-green: #00b92b;
-$flxiel-light-blue: #0bc8ff;
+$flixel-light-blue: #0bc8ff;
diff --git a/content/_scss/style.scss b/content/_scss/style.scss
index 08074a6a4..ea65a2de6 100644
--- a/content/_scss/style.scss
+++ b/content/_scss/style.scss
@@ -2,7 +2,7 @@
 @import "./mixins/helpers.scss";
 @import "./footer.scss";
 @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
-@import "./darkmode-style.scss";
+@import "./color-styles.scss";
 @import "./flixel-colors.scss";
 
 * {
@@ -257,29 +257,29 @@ a.header-anchor::before {
 .title:before {
 	background-image: -webkit-linear-gradient(
 		left,
-		#ffbf37 0%,
-		#ffbf37 20%,
-		#ff2346 20%,
-		#ff2346 40%,
-		#00b92b 40%,
-		#00b92b 60%,
-		#3b43ff 60%,
-		#3b43ff 80%,
-		#0bc8ff 80%,
-		#0bc8ff 100%
+		$flixel-yellow 0%,
+		$flixel-yellow 20%,
+		$flixel-red 20%,
+		$flixel-red 40%,
+		$flixel-green 40%,
+		$flixel-green 60%,
+		$flixel-dark-blue 60%,
+		$flixel-dark-blue 80%,
+		$flixel-light-blue 80%,
+		$flixel-light-blue 100%
 	);
 	background-image: -moz-linear-gradient(
 		left center,
-		#ffbf37 0%,
-		#ffbf37 20%,
-		#ff2346 20%,
-		#ff2346 40%,
-		#00b92b 40%,
-		#00b92b 60%,
-		#3b43ff 60%,
-		#3b43ff 80%,
-		#0bc8ff 80%,
-		#0bc8ff 100%
+		$flixel-yellow 0%,
+		$flixel-yellow 20%,
+		$flixel-red 20%,
+		$flixel-red 40%,
+		$flixel-green 40%,
+		$flixel-green 60%,
+		$flixel-dark-blue 60%,
+		$flixel-dark-blue 80%,
+		$flixel-light-blue 80%,
+		$flixel-light-blue 100%
 	);
 	bottom: -6px;
 	content: "";