feat: css colorscheme for global & universal colors

4 files changed, 66 insertions, 52 deletions

diff --git a/404.html b/404.html
index df220ba..2ea2b27 100644
--- a/404.html
+++ b/404.html
@@ -7,6 +7,7 @@
     <meta name="description" content="ArKa - unknown page">
 
     <!-- Style -->
+	<link rel="stylesheet" href="ArKa-Web/assets/style/colorscheme.css">
     <link rel="stylesheet" href="ArKa-Web/assets/style/style.css">
     <link rel="shortcut icon" href="ArKa-Web/assets/favicon/favicon.ico" type="image/x-icon">
     
diff --git a/assets/style/colorscheme.css b/assets/style/colorscheme.css
new file mode 100644
index 0000000..2db7aff
--- /dev/null
+++ b/assets/style/colorscheme.css
@@ -0,0 +1,64 @@
+/* colorscheme css, here is defined all colors, night / light mode colors
+
+/* Root */
+:root 
+{
+
+    /* Dark mode */
+    --dark-bg: #191919;
+    --dark-text: #BBBBBB;
+    --dark-link: #191919;
+    --dark-link-bg: #f08080;
+    --dark-title: #f08080;
+	--dark-quote-border: #fbc4ab; /* Quotebar color */
+	--dark-quote-bg: #3D3D3D;
+
+    /* Light mode */
+    --light-bg: #ffdab9;
+    --light-text: #191919;
+    --light-link: #191919;
+    --light-link-bg: #DE6E7C;
+    --light-title: #DE6E7C;
+	--light-quote-border: #6a040f; /* Quotebar color */
+	--light-quote-bg: #F9AD8A;
+
+    /* Default (will automatically be crushed by light/dark mode detection )*/
+    --bg-color: var(--dark-bg);
+    --text-color: var(--dark-text);
+    --link-color: var(--dark-link);
+    --link-bg-color: var(--dark-link-bg);
+	--title-color: var(--dark-title);
+    --quote-border: var(--dark-quote-border);
+	--quote-bg: var(--dark-quote-bg);
+}
+
+/* Night mode */
+@media (prefers-color-scheme: dark) 
+{
+    :root 
+    {
+	--bg-color: var(--dark-bg);
+    --text-color: var(--dark-text);
+    --link-color: var(--dark-link);
+    --link-bg-color: var(--dark-link-bg);
+    --title-color: var(--dark-title);
+    --quote-border: var(--dark-quote-border);
+	--quote-bg: var(--dark-quote-bg);
+    }
+}
+
+/* Day mode */
+@media (prefers-color-scheme: light)
+{
+    :root
+    {
+	--bg-color: var(--light-bg);
+    --text-color: var(--light-text);
+    --link-color: var(--light-link);
+    --link-bg-color: var(--light-link-bg);
+    --title-color: var(--light-title);
+    --quote-border: var(--light-quote-border);
+	--quote-bg: var(--light-quote-bg);
+    }
+}
+
diff --git a/assets/style/style.css b/assets/style/style.css
index 9725528..ee7964a 100644
--- a/assets/style/style.css
+++ b/assets/style/style.css
@@ -1,29 +1,3 @@
-/* Root */
-:root 
-{
-    /* Dark mode */
-    --dark-bg: #191919;
-    --dark-text: #BBBBBB;
-    --dark-link: #191919;
-    --dark-link-bg: #f08080;
-    --dark-title: #f08080;
-
-    /* Light mode */
-    --light-bg: #ffdab9;
-    --light-text: #191919;
-    --light-link: #191919;
-    --light-link-bg: #DE6E7C;
-    --light-title: #DE6E7C;
-
-    /* Default mode */
-    --bg-color: var(--dark-bg);
-    --text-color: var(--dark-text);
-    --link-color: var(--dark-link);
-    --link-bg-color: var(--dark-link-bg);
-    --title-color: var(--dark-title);
-}
-
-
 /* Page default disposition */
 body 
 {
@@ -163,29 +137,3 @@ main div.h1-content {
 		gap: 0.5rem;
     }
 }
-
-/* Night mode */
-@media (prefers-color-scheme: dark) 
-{
-    :root 
-    {
-		--bg-color: var(--dark-bg);
-		--text-color: var(--dark-text);
-		--link-color: var(--dark-link);
-		--link-bg-color: var(--dark-link-bg);
-		--title-color: var(--dark-title);
-    }
-}
-
-/* Day mode */
-@media (prefers-color-scheme: light)
-{
-    :root
-    {
-		--bg-color: var(--light-bg);
-		--text-color: var(--light-text);
-		--link-color: var(--light-link);
-		--link-bg-color: var(--light-link-bg);
-		--title-color: var(--light-title);
-    }
-}
diff --git a/index.html b/index.html
index 7765d8b..a26e28a 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
     <meta property="og:description" content="ArKa main page">
 
     <!-- Style -->
+	<link rel="stylesheet" href="assets/style/colorscheme.css">
     <link rel="stylesheet" href="assets/style/style.css">
     <link rel="shortcut icon" href="assets/favicon/favicon.ico" type="image/x-icon">