feat: CSS colorscheme file, to help define a global & uniform colorschememain

6 files changed, 73 insertions, 68 deletions

diff --git a/CSS/colorscheme.css b/CSS/colorscheme.css
new file mode 100644
index 0000000..2db7aff
--- /dev/null
+++ b/CSS/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/CSS/default.css b/CSS/default.css
index 3253f7c..4068c7f 100644
--- a/CSS/default.css
+++ b/CSS/default.css
@@ -1,36 +1,4 @@
-/* Default 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);
-}
+/* Default css, default font size, style and color
 
 /* Body */
 body
@@ -51,34 +19,3 @@ h1, h2, h3, h4, h5, h6
 {
     color: var(--title-color);
 }
-
-/* 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/HTML/buttons.html b/HTML/buttons.html
index d2aebf9..41da23c 100644
--- a/HTML/buttons.html
+++ b/HTML/buttons.html
@@ -5,7 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <!-- CSS & Atom -->
+    <!-- CSS -->
+    <link rel="stylesheet" href="../CSS/colorscheme.css">
     <link rel="stylesheet" href="../CSS/default.css">
     <link rel="stylesheet" href="../CSS/button.css">
 
diff --git a/HTML/dropdowns.html b/HTML/dropdowns.html
index 6c921cc..17484da 100644
--- a/HTML/dropdowns.html
+++ b/HTML/dropdowns.html
@@ -5,7 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <!-- CSS & Atom -->
+    <!-- CSS -->
+    <link rel="stylesheet" href="../CSS/colorscheme.css">
     <link rel="stylesheet" href="../CSS/default.css">
     <link rel="stylesheet" href="../CSS/dropdown.css">
 
diff --git a/HTML/inputfields.html b/HTML/inputfields.html
index c2263ae..84b36da 100644
--- a/HTML/inputfields.html
+++ b/HTML/inputfields.html
@@ -5,7 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <!-- CSS & Atom -->
+    <!-- CSS -->
+	<link rel="stylesheet" href="../CSS/colorscheme.css">
     <link rel="stylesheet" href="../CSS/default.css">
     <link rel="stylesheet" href="../CSS/inputfield.css">
 
diff --git a/HTML/quotes-code.html b/HTML/quotes-code.html
index 355f1c9..3927028 100644
--- a/HTML/quotes-code.html
+++ b/HTML/quotes-code.html
@@ -5,7 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <!-- CSS & Atom -->
+    <!-- CSS -->
+	<link rel="stylesheet" href="../CSS/colorscheme.css">
     <link rel="stylesheet" href="../CSS/default.css">
     <link rel="stylesheet" href="../CSS/quote-code.css">