feat: css colorscheme for global & universal colors

1 files changed, 64 insertions, 0 deletions

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);
+    }
+}
+