Commit c106f4a h

Pat Ambrosio · 26-09-04 23:35

Set the theme control in the contrast mark, and at a readable size

Changes: 5 files +38 -14

Changes (Side-by-Side)

Raw

commit c106f4a10a5aa6d4807b73b48b9c54561d27b67e
Author: Pat Ambrosio <cp.ambrosio@gmail.com>
Date:   Fri Sep 4 23:35:02 2026 +0800

    Set the theme control in the contrast mark, and at a readable size
    
    The sun stood for one of the two states rather than for the choice
    between them; U+25D0, the half-filled circle, is the mark that
    conventionally means contrast. The variation selector stays: without
    &#xFE0E; a platform may render the glyph as a colour emoji, which is not
    what a control set in the page's own type should look like.
    
    It was also genuinely small, not a stale stylesheet -- .9em is 14.4px
    against a 16px body, and a geometric glyph reads smaller than a letter
    set at the same size. 1.15em with line-height 1, and the padding squared
    so the button does not come out wider than it is tall around a round
    mark. All four layouts carry the control and all four are changed.

diff --git a/share/jenny/layout/404.sh b/share/jenny/layout/404.sh
index efd2cae..bb98ae7 100755
--- a/share/jenny/layout/404.sh
+++ b/share/jenny/layout/404.sh
@@ -78,9 +78,14 @@ cat << _EOF_
         background: none;
         border: 1px solid var(--border);
         color: var(--text-primary);
-        padding: .4em .6em;
+        /* A geometric glyph reads smaller than a letter set at the same size,
+           and .9em left the control noticeably small against the type it
+           sits beside. Padding is square so the button does not come out
+           wider than it is tall around a round mark. */
+        padding: .35em .45em;
         cursor: pointer;
-        font-size: .9em;
+        font-size: 1.15em;
+        line-height: 1;
         text-decoration: none;
         text-transform: uppercase;
       }
@@ -123,7 +128,7 @@ cat << _EOF_
     </script>
   </head>
   <body>
-    <a href="#" class="theme-toggle" aria-label="Toggle dark mode">&#x263C;&#xFE0E;</a>
+    <a href="#" class="theme-toggle" aria-label="Toggle dark mode">&#x25D0;&#xFE0E;</a>
     <header><a href="/">$(html_escape "${BLOG_TITLE:-}")</a></header>
     <div class="notfound">
       <p class="code">404</p>
diff --git a/share/jenny/layout/index.sh b/share/jenny/layout/index.sh
index 6e3c218..68f1faf 100755
--- a/share/jenny/layout/index.sh
+++ b/share/jenny/layout/index.sh
@@ -210,9 +210,14 @@ cat << _EOF_
         background: none;
         border: 1px solid var(--border);
         color: var(--text-primary);
-        padding: .4em .6em;
+        /* A geometric glyph reads smaller than a letter set at the same size,
+           and .9em left the control noticeably small against the type it
+           sits beside. Padding is square so the button does not come out
+           wider than it is tall around a round mark. */
+        padding: .35em .45em;
         cursor: pointer;
-        font-size: .9em;
+        font-size: 1.15em;
+        line-height: 1;
         text-decoration: none;
         text-transform: uppercase;
       }
@@ -254,7 +259,7 @@ cat << _EOF_
     </script>
   </head>
   <body>
-    <a href="#" class="theme-toggle" aria-label="Toggle dark mode">&#x263C;&#xFE0E;</a>
+    <a href="#" class="theme-toggle" aria-label="Toggle dark mode">&#x25D0;&#xFE0E;</a>
     <header><a href="$URL_PREFIX/"$([ -z "${TAGNAME:-}" ] && [ -z "${PAGE_NUM:-}" ] && echo ' class="current"')>$(html_escape "${BLOG_TITLE:-}")</a>
       $(if [ "${TAGNAME:-}" ]; then echo "&#x2192;&#xFE0E; TAG: <a href=\"$URL_PREFIX/tag/$TAGNAME/\"$([ -z "${PAGE_NUM:-}" ] && echo ' class="current"')>$(html_escape "${TAGNAME:-}")</a>"; fi)
       $(if [ "${PAGE_NUM:-}" ]; then echo "&#x2192;&#xFE0E; <a href=\"$URL_PREFIX$([ -n "${TAGNAME:-}" ] && echo "/tag/$TAGNAME")/page/$PAGE_NUM.html\" class=\"current\">Page $PAGE_NUM</a>"; fi)
diff --git a/share/jenny/layout/page.sh b/share/jenny/layout/page.sh
index f3fb1b2..54ea40a 100755
--- a/share/jenny/layout/page.sh
+++ b/share/jenny/layout/page.sh
@@ -1041,9 +1041,14 @@ cat << _EOF_
           background: none;
           border: 1px solid var(--border-breadcrumb);
           color: var(--text-primary);
-          padding: .4em .6em;
+          /* A geometric glyph reads smaller than a letter set at the same size,
+             and .9em left the control noticeably small against the type it
+             sits beside. Padding is square so the button does not come out
+             wider than it is tall around a round mark. */
+          padding: .35em .45em;
           cursor: pointer;
-          font-size: .9em;
+          font-size: 1.15em;
+          line-height: 1;
           text-decoration: none;
           text-transform: uppercase;
         }
@@ -1444,7 +1449,7 @@ cat << _EOF_
       </script>
     </head>
     <body>
-      <a href="#" class="theme-toggle" aria-label="Toggle dark mode">&#x263C;&#xFE0E;</a>
+      <a href="#" class="theme-toggle" aria-label="Toggle dark mode">&#x25D0;&#xFE0E;</a>
       <header><a href="$URL_PREFIX/"$([ -z "${PAGE_CRUMBS:-}" ] && echo ' class="current"')>$(html_escape "${BLOG_TITLE:-}")</a>$(crumbs)</header>
       <article>
         <div class="page-wrapper">
diff --git a/share/jenny/layout/post.sh b/share/jenny/layout/post.sh
index 42d9f1e..dd2f46c 100755
--- a/share/jenny/layout/post.sh
+++ b/share/jenny/layout/post.sh
@@ -862,9 +862,14 @@ cat << _EOF_
           background: none;
           border: 1px solid var(--border-light);
           color: var(--text-primary);
-          padding: .4em .6em;
+          /* A geometric glyph reads smaller than a letter set at the same size,
+             and .9em left the control noticeably small against the type it
+             sits beside. Padding is square so the button does not come out
+             wider than it is tall around a round mark. */
+          padding: .35em .45em;
           cursor: pointer;
-          font-size: .9em;
+          font-size: 1.15em;
+          line-height: 1;
           text-decoration: none;
           text-transform: uppercase;
         }
@@ -1216,7 +1221,7 @@ cat << _EOF_
       </script>
     </head>
     <body>
-      <a href="#" class="theme-toggle" aria-label="Toggle dark mode">&#x263C;&#xFE0E;</a>
+      <a href="#" class="theme-toggle" aria-label="Toggle dark mode">&#x25D0;&#xFE0E;</a>
       <!-- No breadcrumb on a post. Its own segment would be the slug, which
            usually restates the title sitting directly beneath it -- and making
            that read well would mean choosing titles that differ from their
diff --git a/test/regressions.sh b/test/regressions.sh
index fc0eb81..0c76397 100755
--- a/test/regressions.sh
+++ b/test/regressions.sh
@@ -2079,8 +2079,12 @@ assert_file_contains "$dm/.dist/index.html" 'class="theme-toggle"'
 assert_file_contains "$dm/.dist/index.html" 'aria-label="Toggle dark mode"'
 
 it "the toggle button uses an entity glyph, not raw Unicode"
-assert_file_not_contains "$dm/.dist/index.html" '☀'
-assert_file_contains "$dm/.dist/index.html" '&#x263C;&#xFE0E;'
+# U+25D0, the half-filled circle that conventionally means contrast. The
+# variation selector matters as much as the codepoint: without &#xFE0E; a
+# platform is free to render the mark as a colour emoji, which is not what a
+# control set in the page's own type should look like.
+assert_file_not_contains "$dm/.dist/index.html" '◐'
+assert_file_contains "$dm/.dist/index.html" '&#x25D0;&#xFE0E;'
 
 it "the theme script applies data-theme and uses localStorage"
 assert_file_contains "$dm/.dist/index.html" 'data-theme'