Fixed theme switcher, changed \" to ' in build.sh, added .btn class and hover color for it

2026-08-11 00:12:29 +00:00 · 2024-06-05 12:56:59 +00:00
parent c5aab3de19
commit 96eef9616a
3 changed files with 94 additions and 74 deletions
@@ -2,7 +2,7 @@ function loadPage(section, page) {
    let buttons = document.getElementById(section).getElementsByTagName("button");
    let currSel;
    for (let i in buttons) {
-        if (buttons[i].classList?.contains("sel-btn")) {
+        if (buttons[i].classList?.contains("selected")) {
            if (page - 1 == i) return;
            else {
                currSel = buttons[i];
@@ -16,9 +16,9 @@ function loadPage(section, page) {
        .then((data) => {
            document.getElementById(section + "-content").innerHTML = data;
            if (currSel) {
-                currSel.classList.remove("sel-btn");
+                currSel.classList.remove("selected");
            }
-            document.getElementById(section).getElementsByTagName("button")[page - 1].classList.add("sel-btn");
+            document.getElementById(section).getElementsByTagName("button")[page - 1].classList.add("selected");
        });
 }

@@ -27,9 +27,9 @@ function activeSection(section) {

    const targetSection = document.getElementById(section);
    targetSection.style.display = "block";
-    setTimeout(()=>{
-    targetSection.scrollIntoView({ block: "start", behavior: "smooth" });
-    },100)
+    setTimeout(() => {
+        targetSection.scrollIntoView({ block: "start", behavior: "smooth" });
+    }, 100);
 }

 function hideAll() {
@@ -37,18 +37,37 @@ function hideAll() {
        s.style.display = "none";
    });
 }
+const HIDDEN_CLASS = "hidden";

-
-function switchTheme(){
-    let currTheme = document.documentElement.style.getPropertyValue('color-scheme');
-    console.log(currTheme);
-    if (currTheme == "dark") {
-        document.getElementsByClassName("fa-sun")[0].style.display = "none";
-        document.getElementsByClassName("fa-moon")[0].style.display = "block";
-        document.documentElement.style.setProperty('color-scheme', 'light');
+function hideThemeSwitcher(currentTheme) {
+    if (currentTheme == "dark") {
+        document.getElementById("dark-icon")?.classList.add(HIDDEN_CLASS);
+        document.getElementById("light-icon")?.classList.remove(HIDDEN_CLASS);
    } else {
-        document.getElementsByClassName("fa-moon")[0].style.display = "none";
-        document.getElementsByClassName("fa-sun")[0].style.display = "block";
-        document.documentElement.style.setProperty('color-scheme', 'dark');
+        document.getElementById("light-icon")?.classList.add(HIDDEN_CLASS);
+        document.getElementById("dark-icon")?.classList.remove(HIDDEN_CLASS);
    }
-}
+}
+function getCurrentTheme() {
+    const fromProperty = document.documentElement.style.getPropertyValue("color-scheme");
+    if (fromProperty) return fromProperty;
+    const prefersTheme = window.matchMedia("(prefers-color-scheme: dark)") ? "dark" : "light";
+    return prefersTheme;
+}
+
+function setTheme(newTheme) {
+    document.documentElement.style.setProperty("color-scheme", newTheme);
+    hideThemeSwitcher(newTheme);
+}
+
+function switchTheme() {
+    let currentTheme = getCurrentTheme();
+    console.debug("Start theme switching to " + currentTheme + " theme");
+    setTheme(currentTheme == "dark" ? "light" : "dark");
+}
+
+function initColorTheme() {
+    const currentTheme = getCurrentTheme();
+    console.debug("Current theme is " + currentTheme + "");
+    setTheme(currentTheme);
+}
@@ -22,14 +22,14 @@


 write_section_header(){
-  echo "<h2 class=\"clickable s$1\" onclick=\"activeSection('$2')\" >" >> $3
+  echo "<h2 class='clickable s$1' onclick='activeSection(\"$2\")' >" >> $3
  echo "$2" | tr a-z A-Z  >> $3
  echo "</h2>" >> $3
 }

 write_img(){
-  echo "  <a target=\"_blank\" href=\"$1\">
-<img loading=\"lazy\" src=\"$1\" alt=\"$1\" width=\"200\"></a>" >> $2
+  echo "  <a target='_blank' href='$1'>
+<img loading='lazy' src='$1' alt='$1' width='200'></a>" >> $2
 }

 rm *.html
@@ -37,32 +37,30 @@ rm *.html
 touch ./index.html

 echo "<!DOCTYPE html>
-<html lang=\"en\">
+<html lang='en'>

 <head>
-  <meta charset=\"utf-8\">
+  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
-  <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\">
+  <link rel='stylesheet' type='text/css' href='style.css'>
  <title>Gruvbox wallpapers</title>
-  <script src='app.js'></script>
-  <script src="https://kit.fontawesome.com/13865d7982.js" crossorigin="anonymous"></script>
+  <script src='app.js' defer></script>
+  <script src="https://kit.fontawesome.com/13865d7982.js" crossorigin="anonymous" defer></script>
 </head>

 <body>
-  <div class=\"float-btns\">
-    <button onclick=\"location.href='https://github.com/AngelJumbo/gruvbox-wallpapers'\" class=\"float-btn clickable\" >
+  <div class='float-btns'>
+    <a href='https://github.com/AngelJumbo/gruvbox-wallpapers' target='_blank' class='btn float-btn' title='Source code' >
      <span>
-        <i class=\"fa-brands fa-github\"></i>
+        <i class='fa-brands fa-github'></i>
+      </span>
+    </a>
+    <button onclick='switchTheme()' class='btn float-btn' title='Switch theme'>
+      <span>
+        <i id='light-icon' class='fa-solid fa-sun'></i>
+        <i id='dark-icon' class='fa-solid fa-moon'></i>
      </span>
    </button>
-    <br />
-    <button onclick=switchTheme() class=\"float-btn clickable\">
-      <span>
-        <i class=\"fa-solid fa-sun\" ></i>
-        <i class=\"fa-solid fa-moon\" style=\"display:none\"></i>
-      </span>
-    </button>
-
  </div>

  <h1>Gruvbox Wallpapers</h1>" > ./index.html
@@ -85,16 +83,16 @@ do
  subhtml="${section}_page${page}.html"
  touch ./$subhtml

-  echo "<div class='section' id=\"$section\">" >> ./index.html
+  echo "<div class='section' id='$section'>" >> ./index.html

-  echo "<div class=\"pager\">" >> ./index.html
+  echo "<div class='pager'>" >> ./index.html
  countImgs=$(find "$subdir" -type f | wc -l)
  countImgs=$((countImgs - 1))
  for i in $(seq 1 $((( $countImgs / $maxPerPage)+1))); do
-    echo "<button class=\"clickable\" onclick=\"loadPage('$section', $i)\">$i</button>" >> ./index.html
+    echo "<button class='btn pager-btn' onclick='loadPage('$section', $i)'>$i</button>" >> ./index.html
  done
  echo "</div>" >> ./index.html
-  echo "<div  id=\"$section-content\">" >> ./index.html
+  echo "<div  id='$section-content'>" >> ./index.html
  echo "<div class='c'>" >> ./$subhtml
  for wallpaper in ${subdir}/*
  do
@@ -128,18 +126,14 @@ done
 echo "<script>
  window.onload = () => {" >> ./index.html
 echo "hideAll();" >> ./index.html
+echo "initColorTheme();" >> ./index.html
 for section in "${sections[@]}"; do
  echo "    loadPage('$section', 1);" >> ./index.html
 done

 echo "
-  activeSection(\"${sections[0]}\");
-  if(!window.matchMedia(\"(prefers-color-scheme: dark)\").matches){
-    document.getElementsByClassName(\"fa-sun\")[0].style.display = \"none\";
-    document.getElementsByClassName(\"fa-moon\")[0].style.display = \"block\";
-  }
+  activeSection('${sections[0]}');
 }
-
 </script>" >> ./index.html


@@ -8,6 +8,7 @@
  --fg-color-reverse: light-dark(#fbf1c7, #282828);

  --bg-color-3: light-dark(#bdae93, #665c54);
+  --bg-color-3-switch: light-dark(#665c54, #bdae93);
  --bg-color-hard: light-dark(#f9f5d7, #1d2021);
  --gray: light-dark(#7c6f64, #a89984);
 }
@@ -19,8 +20,9 @@ body {
  font-family: "Curier New", monospace;
 }

-*:not( i ) {
+* {
  color: var(--fg-color);
+  border: none;
 }

 h1,
@@ -87,27 +89,33 @@ img:hover {
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 5px;
-  /*border-radius: 8px; */
  color: var(--fg-color-reverse);
-  /*display: flex;
-  justify-content: center;*/
  text-align: center;
 }

-.pager button {
+.btn {
+  cursor: pointer;
  background-color: var(--bg-color-reverse);
-  border: none;
  color: var(--fg-color-reverse);
+
+  /* Horizontal and vertical center content */
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    background-color: var(--bg-color-3-switch);
+  }
+}
+
+.btn.pager-btn {
  padding: 10px 20px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
  font-size: 16px;
  font-weight: 900;
  margin: 4px 2px;
-  cursor: pointer;

-  &.sel-btn {
+  &.selected {
    background-color: var(--bg-color);
    color: var(--fg-color);

@@ -125,26 +133,25 @@ img:hover {
  display: none;
 }

-.float-btns{
+.float-btns {
  position: fixed;
-  /*top: 80%;*/
-  bottom: 10px;
-  right: 35px;
+  bottom: 1rem;
+  right: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }

-.float-btn{
-  background-color: var(--bg-color-reverse);
-  border: none;
-  color: var(--fg-color-reverse);
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
+.btn.float-btn {
  height: 2.5rem;
  width: 2.5rem;
-  margin-bottom: 10px;
+  font-size: 1.5rem;
+
+  & i {
+    color: var(--fg-color-reverse);
+  }
 }

-.float-btn span{
-  font-size: 1.5rem;
-  color: var(--fg-color-reverse);
-}
+.hidden {
+  display: none !important;
+}