From 94ee809f9ec4b7a47fd8c56857eee6cd7e48bfa1 Mon Sep 17 00:00:00 2001
From: Botond Hende <nettingman@gmail.com>
Date: Sun, 8 Sep 2024 01:00:53 +0200
Subject: added extra theme

---
 assets/css/blog.css      | 41 +++++++++++++++++++++++++++++++++++++----
 assets/image/balloon.svg |  1 +
 assets/js/theme.js       |  6 +++++-
 3 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 assets/image/balloon.svg

(limited to 'assets')

diff --git a/assets/css/blog.css b/assets/css/blog.css
index ddee44f..a7385e2 100644
--- a/assets/css/blog.css
+++ b/assets/css/blog.css
@@ -16,7 +16,7 @@
     }
 }
 
-[used-theme="light"] {
+[data-theme="light"] {
     --term-fg: #515151;
     --term-bg: #f3f3f3;
     --term-black: #8e8e8e;
@@ -33,16 +33,49 @@
     }
 }
 
+[data-theme="pink"] {
+    --term-fg: #c61c72;
+    --term-bg: #f8b9ce;
+    --term-black: #960052;
+    --term-red: #ff001e;
+    --term-green: #6fd800;
+    --term-yellow: #fcf6a6;
+    --term-blue: #00aff4;
+    --term-magenta: #a8005b;
+    --term-cyan: #00dad5;
+    --term-white: #f3f3f3;
+
+    .filter-yellow {
+        filter: brightness(0) saturate(100%) invert(95%) sepia(12%) saturate(1428%) hue-rotate(334deg) brightness(108%) contrast(98%);
+    }
+}
+
 a[class*="theme-selector"] {
     color: var(--term-green);
 }
 
-html:not([used-theme]) .theme-selector-dark,
-html[used-theme="dark"] .theme-selector-dark,
-html[used-theme="light"] .theme-selector-light {
+
+html:not([data-theme]) .theme-selector-dark,
+html[data-theme="dark"] .theme-selector-dark,
+html[data-theme="light"] .theme-selector-light,
+html[data-theme="pink"] .theme-selector-pink,
+html:not([data-extended-theme]) .theme-extender-target {
     display: none;
 }
 
+.theme-extender {
+    color: var(--term-fg);
+    font-weight: normal;
+}
+
+.theme-extender:hover {
+    text-decoration: none;
+}
+
+html:not([data-extended-theme]) .theme-extender {
+    color: var(--term-bg);
+}
+
 header, .icon-text {
     display: flex;
     flex-flow: row;
diff --git a/assets/image/balloon.svg b/assets/image/balloon.svg
new file mode 100644
index 0000000..62584c0
--- /dev/null
+++ b/assets/image/balloon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="#00dad5" d="M13.16 12.74L14 14h-1.5c-.15 2.71-.5 5.41-1 8.08l-1-.16c.5-2.62.84-5.26 1-7.92H10l.84-1.26C8.64 11.79 7 8.36 7 6a5 5 0 0 1 5-5a5 5 0 0 1 5 5c0 2.36-1.64 5.79-3.84 6.74"/></svg>
\ No newline at end of file
diff --git a/assets/js/theme.js b/assets/js/theme.js
index ffb6d48..9f1660c 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -1,5 +1,5 @@
 "use strict"
-const THEME_KEY = "used-theme";
+const THEME_KEY = "data-theme";
 
 function updateTheme() {
     let theme = localStorage.getItem(THEME_KEY);
@@ -13,4 +13,8 @@ function setTheme(theme) {
     updateTheme();
 }
 
+function setThemeExtend() {
+    document.documentElement.setAttribute("data-extended-theme", "true")
+}
+
 updateTheme();
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2