✨ feat: introduce skins to customise the theme (#105)

sass/skins/blue.scss

@@ -0,0 +1,7 @@
+:root {
+    --primary-color: #3271E7; // Contrast ratio: 4.51:1
+}
+
+[data-theme='dark'] {
+    --primary-color: #6cacff; // Contrast ratio: 7.05:1
+}

sass/skins/evangelion.scss

@@ -0,0 +1,9 @@
+// Evangelion Unit-02.
+:root {
+    --primary-color: #d12e36;  // Contrast ratio: 5.05:1
+}
+
+// Evangelion Unit-01.
+[data-theme='dark'] {
+    --primary-color: #c09bd9;  // Contrast
+}

sass/skins/indigo_ingot.scss

@@ -0,0 +1,7 @@
+:root {
+    --primary-color: #1460bd; // Contrast ratio: 6.1:1
+}
+
+[data-theme='dark'] {
+    --primary-color: #e6c212; // Contrast ratio: 9.48:1
+}

sass/skins/lavender.scss

@@ -0,0 +1,7 @@
+:root {
+    --primary-color: #9055d8;  // Contrast ratio: 4.69:1
+}
+
+[data-theme='dark'] {
+    --primary-color: #cba2e8;  // Contrast ratio: 7.74:1
+}

sass/skins/lowcontrast_orange.scss

@@ -0,0 +1,12 @@
+// WARNING! This skin, in light theme, may not provide optimal contrast for readability
+// and might not be suitable for users with certain types of visual impairment.
+// Furthermore, low contrast will affect your Google Lighthouse rating.
+// For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+
+:root {
+    --primary-color: #f56a00; // Contrast ratio: 3.02:1. Not very accessible.
+}
+
+[data-theme='dark'] {
+    --primary-color: #ec984f; // Contrast ratio: 7.19:1. Accessible.
+}

sass/skins/lowcontrast_peach.scss

@@ -0,0 +1,12 @@
+// WARNING! This skin, in light theme, may not provide optimal contrast for readability
+// and might not be suitable for users with certain types of visual impairment.
+// Furthermore, low contrast will affect your Google Lighthouse rating.
+// For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+
+:root {
+    --primary-color: #ffa057; // Contrast ratio: 2.01:1. Not very accessible.
+}
+
+[data-theme='dark'] {
+    --primary-color: #ffab7f; // Contrast ratio: 8.93:1. Accessible.
+}

sass/skins/lowcontrast_pink.scss

@@ -0,0 +1,12 @@
+// WARNING! This skin, in light theme, may not provide optimal contrast for readability
+// and might not be suitable for users with certain types of visual impairment.
+// Furthermore, low contrast will affect your Google Lighthouse rating.
+// For more information on web accessibility: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
+
+:root {
+    --primary-color: #ee59d2; // Contrast ratio: 3:1. Not very accessible.
+}
+
+[data-theme='dark'] {
+    --primary-color: #f49ee9; // Contrast ratio: 9.87:1. Accessible.
+}

sass/skins/mint.scss

@@ -0,0 +1,7 @@
+:root {
+    --primary-color: #00804d;  // Contrast ratio: 5:1
+}
+
+[data-theme='dark'] {
+    --primary-color: #00b86e;  // Contrast ratio: 6.34:1
+}

sass/skins/monochrome.scss

@@ -0,0 +1,7 @@
+:root {
+    --primary-color: #727272;  // Contrast ratio: 4.81:1
+}
+
+[data-theme='dark'] {
+    --primary-color: #b3b3b3;  // Contrast ratio: 7.86:1
+}

sass/skins/red.scss

@@ -0,0 +1,7 @@
+:root {
+    --primary-color: #ca4963; // Contrast ratio: 4.52:1.
+}
+
+[data-theme='dark'] {
+    --primary-color: #ea535f; // Contrast ratio: 4.63:1.
+}

sass/skins/sakura.scss

@@ -0,0 +1,7 @@
+:root {
+    --primary-color: #D33C5C;  // Contrast ratio: 4.61:1
+}
+
+[data-theme='dark'] {
+    --primary-color: #fabed2;  // Contrast ratio: 10.48:1
+}

sass/skins/teal.scss

@@ -0,0 +1,12 @@
+// This file is never loaded; it's serves as reference for the default skin (in main.scss).
+// When creating your own skin, you can use https://webaim.org/resources/contrastchecker/
+// to verify the accessibility and readability of your colourscheme.
+// The light background is #fff and the dark background is #1f1f1f.
+
+:root {
+    --primary-color: #087e96; // Contrast ratio: 4.73:1
+}
+
+[data-theme='dark'] {
+    --primary-color: #91e0ee;  // Contrast ratio: 11.06:1
+}