dark/light theme fix; css naming

ppatrzyk · Jun 21, 2024 · c20f20f · c20f20f
1 parent b15af40
commit c20f20f
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 20 deletions.
diff --git a/README.md b/README.md
@@ -90,6 +90,6 @@ List:
 
 ## Acknowledgements
 
-- Reports styling is made possible by great frontend libs [pico](https://github.com/picocss/pico) and [prism](https://github.com/PrismJS/prism)
+- frontend: [pico](https://github.com/picocss/pico), [prism](https://github.com/PrismJS/prism), [tabler-icons](https://github.com/tabler/tabler-icons)
 - [SO discussion that inspired this project](https://stackoverflow.com/questions/60297105/python-write-both-commands-and-their-output-to-a-file)
 - [pyreport](https://github.com/joblib/pyreport) - similar but long abandoned project
diff --git a/src/merkury/templates/assets/merkury-themes.js b/src/merkury/templates/assets/merkury-themes.js
@@ -1,14 +1,13 @@
 function change_theme() {
+    var theme = document.getElementById("dark-light-mode").checked ? "light" : "dark";
     var html = document.getElementsByTagName("html")[0];
     var prism_dark = document.getElementById("prism-dark");
     var prism_light = document.getElementById("prism-light");
-    var current_theme = html.getAttribute("data-theme");
-    if (current_theme == "dark") {
-        html.setAttribute("data-theme", "light")
+    html.setAttribute("data-theme", theme);
+    if (theme == "light") {
         prism_light.removeAttribute("media")
         prism_dark.setAttribute("media", "max-width: 1px")
     } else {
-        html.setAttribute("data-theme", "dark")
         prism_dark.removeAttribute("media")
         prism_light.setAttribute("media", "max-width: 1px")
     }

diff --git a/src/merkury/templates/assets/merkury.css b/src/merkury/templates/assets/merkury.css
@@ -1,22 +1,26 @@
 :root {
   font-family: system-ui, sans-serif;
+  --pico-line-height: 1.5;
 }
-.code-block {
+.merkury-code-block {
   margin-bottom: 2em;
 }
-.foot {
+.merkury-foot {
   text-align: center;
   padding-top: 0 !important;
 }
-.head {
+.merkury-head {
   padding-top: 4em;
 }
+#dark-light-mode {
+  margin: 0;
+}
 {% if toc %}
 @media (min-width:992px) {
-  .container {
+  .merkury-container {
     width: 80%;
   }
-  aside {
+  .merkury-toc {
     position: sticky;
     align-self: start;
     top: 0;
@@ -33,7 +37,7 @@
 }
 {% else %}
 @media (min-width:992px) {
-  .container {
+  .merkury-container {
     width: 67%;
   }
 }

diff --git a/src/merkury/templates/template.html b/src/merkury/templates/template.html
@@ -15,26 +15,30 @@
     <script>{% include "assets/merkury-themes.js" %}</script>
 </head>
 <body>
-    <nav class="container head">
+    <nav class="container merkury-container merkury-head">
         <ul>
             <li>
                 <hgroup>
                     <h1>{{ title }}</h1>
-                    <h3>{{ timestamp }}</h3>
+                    <p>{{ timestamp }}</p>
                 </hgroup>
             </li>
         </ul>
         <ul>
-            <li><button class="secondary" onclick="change_theme()">Dark/Light</button></li>
+            <li>
+                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-moon"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
+                <input type="checkbox" id="dark-light-mode" name="dark-light-mode" role="switch" onchange="change_theme()">
+                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-sun"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
+            </li>
         </ul>
     </nav>
-    <main class="container">
+    <main class="container merkury-container">
         {% if toc %}
-            <aside>
+            <aside class="merkury-toc">
                 <nav>
                     <h2>Contents</h2>
                     <div>
-                        <ol>
+                        <ul>
                         {% for chunk in chunks %}
                             <li><a href="#merkury-chunk-{{ chunk.number }}">
                             {% if chunk.title is not none %}
@@ -44,14 +48,14 @@ <h2>Contents</h2>
                             {% endif %}
                             </a></li>
                         {% endfor %}
-                        </ol>
+                        </ul>
                     </div>
                 </nav>
             </aside>
         {% endif %}
         <div role="document">
         {% for chunk in chunks %}
-            <div class="code-block" id="merkury-chunk-{{ chunk.number }}">
+            <div class="merkury-code-block" id="merkury-chunk-{{ chunk.number }}">
             {% if chunk.title is not none %}
                 <h2>{{ chunk.title }}</h2>
             {% endif %}
@@ -73,7 +77,7 @@ <h2>{{ chunk.title }}</h2>
         {% endfor %}
         </div>
     </main>
-    <footer class="container foot">
+    <footer class="container merkury-container merkury-foot">
         <small>
             <p>Script <em>{{ file_name }}</em> triggered by {{ author }} on {{ timestamp }}, ran in {{ duration }}ms</p>
             <p>Report generated with <a target="_blank" href="https://github.com/ppatrzyk/merkury">merkury</a> v{{ version }}.</p>