Make theme colors easier thanks to Stylus

website/src/.vitepress/theme/styles/base.styl

@@ -6,15 +6,18 @@
  * Colors
  * -------------------------------------------------------------------------- */
 
+// Assign theme color
+$themeColor = #818cf8
+
 :root {
-	--vp-c-brand: #818cf8
-	--vp-c-brand-light: #a0a8f9
-	--vp-c-brand-lighter: #c0c5fb
-	--vp-c-brand-lightest: #dfe2fd
-	--vp-c-brand-dark: #6069ba
-	--vp-c-brand-darker: #40467c
-	--vp-c-brand-darkest: #20233e
-	--vp-c-brand-dimm: rgba(100, 108, 255, 0.08)
+	--vp-c-brand: $themeColor
+	--vp-c-brand-light: tint($themeColor, 20%)
+	--vp-c-brand-lighter: tint($themeColor, 40%)
+	--vp-c-brand-lightest: tint($themeColor, 60%)
+	--vp-c-brand-dark: shade($themeColor, 25%)
+	--vp-c-brand-darker: shade($themeColor, 50%)
+	--vp-c-brand-darkest: shade($themeColor, 75%)
+	--vp-c-brand-dimm: alpha($themeColor, 0.08)
 }
 
 /**

website/src/.vitepress/theme/styles/forks/neko.styl

@@ -1,3 +1,6 @@
+// Assign theme color
+$themeColor = #ff6884
+
 .page-neko {
 	.VPHero {
 		h1 {
@@ -20,23 +23,24 @@
 	}
 
 	::selection {
-		background: rgba(255, 109, 137, 0.2)
+		background: alpha($themeColor, 0.2)
 	}
 }
 
+
 /**
  * Colors
  * -------------------------------------------------------------------------- */
 
 :root .page-neko {
-	--vp-c-brand: #ff6884 !important
-	--vp-c-brand-light: #ff8da2
-	--vp-c-brand-lighter: #ffb3c1
-	--vp-c-brand-lightest: #ffd9e0
-	--vp-c-brand-dark: #bf4e63
-	--vp-c-brand-darker: #7f3442
-	--vp-c-brand-darkest: #3f1a21
-	--vp-c-brand-dimm: rgba(255, 109, 137, 0.08)
+	--vp-c-brand: $themeColor
+	--vp-c-brand-light: tint($themeColor, 20%)
+	--vp-c-brand-lighter: tint($themeColor, 40%)
+	--vp-c-brand-lightest: tint($themeColor, 60%)
+	--vp-c-brand-dark: shade($themeColor, 25%)
+	--vp-c-brand-darker: shade($themeColor, 50%)
+	--vp-c-brand-darkest: shade($themeColor, 75%)
+	--vp-c-brand-dimm: alpha($themeColor, 0.08)
 }
 
 /**

website/src/.vitepress/theme/styles/forks/tachiyomi-az.styl

@@ -1,3 +1,6 @@
+// Assign theme color
+$themeColor = #ffcc4d
+
 .page-tachiyomi-az {
 	.VPHero {
 		h1 {
@@ -20,23 +23,24 @@
 	}
 
 	::selection {
-		background: rgba(255, 204, 77, 0.2)
+		background: alpha($themeColor, 0.2)
 	}
 }
 
+
 /**
  * Colors
  * -------------------------------------------------------------------------- */
 
 :root .page-tachiyomi-az {
-	--vp-c-brand: #ffcc4d
-	--vp-c-brand-light: #ffd879
-	--vp-c-brand-lighter: #ffe5a6
-	--vp-c-brand-lightest: #fff2d2
-	--vp-c-brand-dark: #bf9939
-	--vp-c-brand-darker: #7f6626
-	--vp-c-brand-darkest: #3f3313
-	--vp-c-brand-dimm: rgba(255, 204, 77, 0.08)
+	--vp-c-brand: $themeColor
+	--vp-c-brand-light: tint($themeColor, 20%)
+	--vp-c-brand-lighter: tint($themeColor, 40%)
+	--vp-c-brand-lightest: tint($themeColor, 60%)
+	--vp-c-brand-dark: shade($themeColor, 25%)
+	--vp-c-brand-darker: shade($themeColor, 50%)
+	--vp-c-brand-darkest: shade($themeColor, 75%)
+	--vp-c-brand-dimm: alpha($themeColor, 0.08)
 }
 
 /**

website/src/.vitepress/theme/styles/forks/tachiyomi-j2k.styl

@@ -1,3 +1,6 @@
+// Assign theme color
+$themeColor = #0952af
+
 .page-tachiyomi-j2k {
 	.VPHero {
 		h1 {
@@ -20,23 +23,24 @@
 	}
 
 	::selection {
-		background: rgba(9, 82, 175, 0.2)
+		background: alpha($themeColor, 0.2)
 	}
 }
 
+
 /**
  * Colors
  * -------------------------------------------------------------------------- */
 
 :root .page-tachiyomi-j2k {
-	--vp-c-brand: #0952af
-	--vp-c-brand-light: #467dc3
-	--vp-c-brand-lighter: #84a8d7
-	--vp-c-brand-lightest: #c1d3eb
-	--vp-c-brand-dark: #063d83
-	--vp-c-brand-darker: #042957
-	--vp-c-brand-darkest: #02142b
-	--vp-c-brand-dimm: rgba(9, 82, 175, 0.08)
+	--vp-c-brand: $themeColor
+	--vp-c-brand-light: tint($themeColor, 20%)
+	--vp-c-brand-lighter: tint($themeColor, 40%)
+	--vp-c-brand-lightest: tint($themeColor, 60%)
+	--vp-c-brand-dark: shade($themeColor, 25%)
+	--vp-c-brand-darker: shade($themeColor, 50%)
+	--vp-c-brand-darkest: shade($themeColor, 75%)
+	--vp-c-brand-dimm: alpha($themeColor, 0.08)
 }
 
 /**

website/src/.vitepress/theme/styles/forks/tachiyomi-sy.styl

@@ -1,3 +1,6 @@
+// Assign theme color
+$themeColor = #ce2828
+
 .page-tachiyomi-sy {
 	.VPHero {
 		h1 {
@@ -20,23 +23,24 @@
 	}
 
 	::selection {
-		background: rgba(206, 40, 40, 0.2)
+		background: alpha($themeColor, 0.2)
 	}
 }
 
+
 /**
  * Colors
  * -------------------------------------------------------------------------- */
 
 :root .page-tachiyomi-sy {
-	--vp-c-brand: #ce2828
-	--vp-c-brand-light: #da5d5d
-	--vp-c-brand-lighter: #e69393
-	--vp-c-brand-lightest: #f2c9c9
-	--vp-c-brand-dark: #9a1e1e
-	--vp-c-brand-darker: #671414
-	--vp-c-brand-darkest: #330a0a
-	--vp-c-brand-dimm: rgba(206, 40, 40, 0.08)
+	--vp-c-brand: $themeColor
+	--vp-c-brand-light: tint($themeColor, 20%)
+	--vp-c-brand-lighter: tint($themeColor, 40%)
+	--vp-c-brand-lightest: tint($themeColor, 60%)
+	--vp-c-brand-dark: shade($themeColor, 25%)
+	--vp-c-brand-darker: shade($themeColor, 50%)
+	--vp-c-brand-darkest: shade($themeColor, 75%)
+	--vp-c-brand-dimm: alpha($themeColor, 0.08)
 }
 
 /**

website/src/forks/neko.md

@@ -61,6 +61,6 @@ const members = [
 ]
 </script>
 
-<style>
+<style lang="stylus">
 	@import "../.vitepress/theme/styles/forks/neko.styl"
 </style>

website/src/forks/tachiyomi-az.md

@@ -79,6 +79,6 @@ const members = [
   </div>
 </div>
 
-<style>
+<style lang="stylus">
 	@import "../.vitepress/theme/styles/forks/tachiyomi-az.styl"
 </style>

website/src/forks/tachiyomi-j2k.md

@@ -53,6 +53,6 @@ const members = [
 ]
 </script>
 
-<style>
+<style lang="stylus">
 	@import "../.vitepress/theme/styles/forks/tachiyomi-j2k.styl"
 </style>

website/src/forks/tachiyomi-sy.md

@@ -69,6 +69,6 @@ const members = [
 ]
 </script>
 
-<style>
+<style lang="stylus">
 	@import "../.vitepress/theme/styles/forks/tachiyomi-sy.styl"
 </style>