From a36bc7a04799466b4375f00795c04027753c30a2 Mon Sep 17 00:00:00 2001 From: Soitora Date: Wed, 26 Jul 2023 20:42:28 +0200 Subject: [PATCH] Make theme colors easier thanks to Stylus --- website/src/.vitepress/theme/styles/base.styl | 19 +++++++++------- .../.vitepress/theme/styles/forks/neko.styl | 22 +++++++++++-------- .../theme/styles/forks/tachiyomi-az.styl | 22 +++++++++++-------- .../theme/styles/forks/tachiyomi-j2k.styl | 22 +++++++++++-------- .../theme/styles/forks/tachiyomi-sy.styl | 22 +++++++++++-------- website/src/forks/neko.md | 2 +- website/src/forks/tachiyomi-az.md | 2 +- website/src/forks/tachiyomi-j2k.md | 2 +- website/src/forks/tachiyomi-sy.md | 2 +- 9 files changed, 67 insertions(+), 48 deletions(-) diff --git a/website/src/.vitepress/theme/styles/base.styl b/website/src/.vitepress/theme/styles/base.styl index 2feec96e..45571574 100644 --- a/website/src/.vitepress/theme/styles/base.styl +++ b/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) } /** diff --git a/website/src/.vitepress/theme/styles/forks/neko.styl b/website/src/.vitepress/theme/styles/forks/neko.styl index e4a23ea9..c0f8fef1 100644 --- a/website/src/.vitepress/theme/styles/forks/neko.styl +++ b/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) } /** diff --git a/website/src/.vitepress/theme/styles/forks/tachiyomi-az.styl b/website/src/.vitepress/theme/styles/forks/tachiyomi-az.styl index dc7f1aeb..96d587f7 100644 --- a/website/src/.vitepress/theme/styles/forks/tachiyomi-az.styl +++ b/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) } /** diff --git a/website/src/.vitepress/theme/styles/forks/tachiyomi-j2k.styl b/website/src/.vitepress/theme/styles/forks/tachiyomi-j2k.styl index c1d9cec7..830d0386 100644 --- a/website/src/.vitepress/theme/styles/forks/tachiyomi-j2k.styl +++ b/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) } /** diff --git a/website/src/.vitepress/theme/styles/forks/tachiyomi-sy.styl b/website/src/.vitepress/theme/styles/forks/tachiyomi-sy.styl index c3b9390d..80792fcc 100644 --- a/website/src/.vitepress/theme/styles/forks/tachiyomi-sy.styl +++ b/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) } /** diff --git a/website/src/forks/neko.md b/website/src/forks/neko.md index b026461a..9b0d723c 100644 --- a/website/src/forks/neko.md +++ b/website/src/forks/neko.md @@ -61,6 +61,6 @@ const members = [ ] - diff --git a/website/src/forks/tachiyomi-az.md b/website/src/forks/tachiyomi-az.md index 18aa5c97..10fddb41 100644 --- a/website/src/forks/tachiyomi-az.md +++ b/website/src/forks/tachiyomi-az.md @@ -79,6 +79,6 @@ const members = [ - diff --git a/website/src/forks/tachiyomi-j2k.md b/website/src/forks/tachiyomi-j2k.md index 778775f6..e40180ff 100644 --- a/website/src/forks/tachiyomi-j2k.md +++ b/website/src/forks/tachiyomi-j2k.md @@ -53,6 +53,6 @@ const members = [ ] - diff --git a/website/src/forks/tachiyomi-sy.md b/website/src/forks/tachiyomi-sy.md index d8164ee9..adae46d6 100644 --- a/website/src/forks/tachiyomi-sy.md +++ b/website/src/forks/tachiyomi-sy.md @@ -69,6 +69,6 @@ const members = [ ] -