Merge pull request #285 from yammmt/update_styles

Bump Bulma from 0.9.4 to 1.0.1
yammmt · Jul 15, 2024 · e324a96 · e324a96
2 parents 670ce59 + 98ede49
commit e324a96
Show file tree

Hide file tree

Showing 12 changed files with 54 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,8 @@
 
 Simple ToDo list based on last date I did.
 
-![index page image](./img/index.jpg)
+![index page image (light)](./img/index_light.png)
+![index page image (dark)](./img/index_dark.png)
 
 ## Purpose
 

diff --git a/img/index.jpg b/img/index.jpg
diff --git a/img/index_dark.png b/img/index_dark.png
diff --git a/img/index_light.png b/img/index_light.png
diff --git a/static/base.html.tera b/static/base.html.tera
@@ -7,6 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}{% endblock title %}</title>
     <link rel="stylesheet" href="/css/mystyles.css">
+    <script src="/js/scripts.js"></script>
     {% endblock head %}
 </head>
 

diff --git a/static/bulma b/static/bulma
diff --git a/static/css/mystyles.css b/static/css/mystyles.css
diff --git a/static/js/scripts.js b/static/js/scripts.js
@@ -0,0 +1,27 @@
+function applyTheme() {
+    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    if (prefersDarkScheme) {
+        let lights = document.querySelectorAll(".is-light");
+        for (let l of lights) {
+            l.classList.remove("is-light");
+            l.classList.add("is-dark");
+        }
+    } else {
+        let darks = document.querySelectorAll(".is-dark");
+        for (let d of darks) {
+            d.classList.remove("is-dark");
+            d.classList.add("is-light");
+        }
+    }
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event#checking_whether_loading_is_already_complete
+if (document.readyState === "loading") {
+    // loading hasn't finished yet
+    document.addEventListener("DOMContentLoaded", applyTheme);
+} else {
+    applyTheme();
+}
+
+window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", applyTheme);
diff --git a/static/label/index.html.tera b/static/label/index.html.tera
@@ -32,7 +32,7 @@
                         {% for label in labels %}
                         <tr>
                             <td>
-                                <button class="button is-outlined" style="background-color: {{ label.color_hex }}" onclick="location.href='/label/{{ label.id }}'">
+                                <button class="button is-outlined label-button" style="background-color: {{ label.color_hex }}" onclick="location.href='/label/{{ label.id }}'">
                                     {{ label.name }}
                                 </button>
                             </td>

diff --git a/static/mystyles.scss b/static/mystyles.scss
@@ -1,19 +1,26 @@
 @charset "utf-8";
 
+@use "bulma/sass/utilities";
+
+@use "bulma/sass/base";
+@use "bulma/sass/elements/button";
+@use "bulma/sass/elements/notification";
+@use "bulma/sass/elements/table";
+@use "bulma/sass/elements/title";
+@use "bulma/sass/form";
+@use "bulma/sass/grid";
+@use "bulma/sass/layout/footer";
+@use "bulma/sass/layout/hero";
+@use "bulma/sass/layout/section";
+@use "bulma/sass/themes";
+
 $section-padding: 1rem 1.5rem;
 
 .table tbody tr td { vertical-align: middle; }
 .button { margin: 0.2em auto; }
 
-@import "bulma/sass/utilities/_all.sass";
-@import "bulma/sass/base/_all.sass";
-@import "bulma/sass/helpers/_all.sass";
-@import "bulma/sass/elements/button.sass";
-@import "bulma/sass/elements/container.sass";
-@import "bulma/sass/elements/notification.sass";
-@import "bulma/sass/elements/table.sass";
-@import "bulma/sass/elements/title.sass";
-@import "bulma/sass/form/_all.sass";
-@import "bulma/sass/grid/_all.sass";
-@import "bulma/sass/layout/hero.sass";
-@import "bulma/sass/layout/section.sass";
+// Use the same font color for both light and dark modes
+// to avoid buttons with inappropriately low contrast.
+//     Note that button's background color is decided by the user.
+.button.label-button { color: black; }
+.tag.label-tag { color: black; }
diff --git a/static/task/bylabel.html.tera b/static/task/bylabel.html.tera
@@ -9,7 +9,7 @@
     <section class="section">
         <div class="container">
             Tasks belong to
-            <span class="tag is-medium" style="background-color: {{ label.color_hex }}">
+            <span class="tag is-medium label-tag" style="background-color: {{ label.color_hex }}">
                 {{ label.name }}
             </span>
 

diff --git a/static/task/index.html.tera b/static/task/index.html.tera
@@ -35,7 +35,7 @@
                                 {% if task.label_id %}
                                 {% for label in labels %}
                                 {% if label.id == task.label_id %}
-                                <button class="button is-outlined" style="background-color: {{ label.color_hex }}" onclick="location.href='/label/{{ task.label_id }}'">
+                                <button class="button is-outlined label-button" style="background-color: {{ label.color_hex }}" onclick="location.href='/label/{{ task.label_id }}'">
                                     {{ label.name }}
                                 </button>
                                 {% break %}