Refactored theme-color implementation to support palette switches

squidfunk · Dec 11, 2022 · 944180d · 944180d
1 parent 1408c29
commit 944180d
Show file tree

Hide file tree

Showing 12 changed files with 46 additions and 144 deletions.
diff --git a/docs/customization.md b/docs/customization.md
@@ -113,7 +113,6 @@ assets may also be put in the `overrides` directory:
 │  ├─ nav.html                         # Main navigation
 │  ├─ nav-item.html                    # Main navigation item
 │  ├─ pagination.html                  # Pagination (used for blog)
-│  ├─ palette.html                     # Color palette
 │  ├─ post.html                        # Blog post excerpt
 │  ├─ search.html                      # Search interface
 │  ├─ social.html                      # Social links

diff --git a/...assets/javascripts/bundle.ce0331ff.min.js → ...assets/javascripts/bundle.c0285e69.min.js b/...assets/javascripts/bundle.ce0331ff.min.js → ...assets/javascripts/bundle.c0285e69.min.js
diff --git a/...ts/javascripts/bundle.ce0331ff.min.js.map → ...ts/javascripts/bundle.c0285e69.min.js.map b/...ts/javascripts/bundle.ce0331ff.min.js.map → ...ts/javascripts/bundle.c0285e69.min.js.map
diff --git a/material/assets/stylesheets/extra.27126f53.min.css b/material/assets/stylesheets/extra.27126f53.min.css
diff --git a/material/assets/stylesheets/extra.27126f53.min.css.map b/material/assets/stylesheets/extra.27126f53.min.css.map
diff --git a/material/assets/stylesheets/extra.73715943.min.css b/material/assets/stylesheets/extra.73715943.min.css
diff --git a/material/assets/stylesheets/extra.73715943.min.css.map b/material/assets/stylesheets/extra.73715943.min.css.map
diff --git a/material/base.html b/material/base.html
@@ -38,13 +38,6 @@
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.2505c338.min.css' | url }}">
-        {% if palette.primary %}
-          {% import "partials/palette.html" as map %}
-          {% set primary = map.primary(
-            palette.primary | replace(" ", "-") | lower
-          ) %}
-          <meta name="theme-color" content="{{ primary }}">
-        {% endif %}
       {% endif %}
       {% include "partials/icons.html" %}
     {% endblock %}
@@ -81,8 +74,10 @@
     {% if not palette is mapping %}
       {% set palette = palette | first %}
     {% endif %}
-    {% set scheme = palette.scheme | d("default", true) %}
-    <body dir="{{ direction }}" data-md-color-scheme="{{ scheme | replace(' ', '-') }}" data-md-color-primary="{{ palette.primary | replace(' ', '-') }}" data-md-color-accent="{{ palette.accent | replace(' ', '-') }}">
+    {% set scheme  = palette.scheme  | d("default", true) %}
+    {% set primary = palette.primary | d("", true) %}
+    {% set accent  = palette.accent  | d("", true) %}
+    <body dir="{{ direction }}" data-md-color-scheme="{{ scheme | replace(' ', '-') }}" data-md-color-primary="{{ primary | replace(' ', '-') }}" data-md-color-accent="{{ accent | replace(' ', '-') }}">
   {% else %}
     <body dir="{{ direction }}">
   {% endif %}
@@ -239,13 +234,13 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.ce0331ff.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.c0285e69.min.js' | url }}"></script>
       {% for path in config.extra_javascript %}
         <script src="{{ path | url }}"></script>
       {% endfor %}
     {% endblock %}
     {% if page.meta and page.meta.ᴴₒᴴₒᴴₒ %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/extra.27126f53.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/extra.73715943.min.css' | url }}">
       <script src="{{ 'assets/javascripts/extra/bundle.f719a234.min.js' | url }}" defer></script>
     {% endif %}
   </body>

diff --git a/material/partials/palette.html b/material/partials/palette.html
diff --git a/src/assets/javascripts/components/palette/index.ts b/src/assets/javascripts/components/palette/index.ts
@@ -37,8 +37,12 @@ import {
 } from "rxjs"
 
 import { getElements } from "~/browser"
+import { h } from "~/utilities"
 
-import { Component } from "../_"
+import {
+  Component,
+  getComponentElement
+} from "../_"
 
 /* ----------------------------------------------------------------------------
  * Types
@@ -112,6 +116,10 @@ export function watchPalette(
 export function mountPalette(
   el: HTMLElement
 ): Observable<Component<Palette>> {
+  const meta = h("meta", { name: "theme-color" })
+  document.head.appendChild(meta)
+
+  /* Mount component on subscription */
   return defer(() => {
     const push$ = new Subject<Palette>()
     push$.subscribe(palette => {
@@ -132,6 +140,23 @@ export function mountPalette(
       __md_set("__palette", palette)
     })
 
+    /* Update theme-color meta tag */
+    push$
+      .pipe(
+        map(() => {
+          const header = getComponentElement("header")
+          const { backgroundColor } = window.getComputedStyle(header)
+
+          /* Return color in hexadecimal format */
+          return `#${
+            backgroundColor.match(/\d+/g)!
+              .map(value => (+value).toString(16).padStart(2, "0"))
+              .join("")
+          }`
+        })
+      )
+        .subscribe(color => meta.content = color)
+
     /* Revert transition durations after color switch */
     push$.pipe(observeOn(asyncScheduler))
       .subscribe(() => {

diff --git a/src/base.html b/src/base.html
@@ -82,15 +82,6 @@
           rel="stylesheet"
           href="{{ 'assets/stylesheets/palette.css' | url }}"
         />
-
-        <!-- Theme-color meta tag for Android -->
-        {% if palette.primary %}
-          {% import "partials/palette.html" as map %}
-          {% set primary = map.primary(
-            palette.primary | replace(" ", "-") | lower
-          ) %}
-          <meta name="theme-color" content="{{ primary }}" />
-        {% endif %}
       {% endif %}
 
       <!-- Custom icons -->
@@ -159,12 +150,14 @@
     {% if not palette is mapping %}
       {% set palette = palette | first %}
     {% endif %}
-    {% set scheme = palette.scheme | d("default", true) %}
+    {% set scheme  = palette.scheme  | d("default", true) %}
+    {% set primary = palette.primary | d("", true) %}
+    {% set accent  = palette.accent  | d("", true) %}
     <body
       dir="{{ direction }}"
       data-md-color-scheme="{{ scheme | replace(' ', '-') }}"
-      data-md-color-primary="{{ palette.primary | replace(' ', '-') }}"
-      data-md-color-accent="{{ palette.accent | replace(' ', '-') }}"
+      data-md-color-primary="{{ primary | replace(' ', '-') }}"
+      data-md-color-accent="{{ accent | replace(' ', '-') }}"
     >
   {% else %}
     <body dir="{{ direction }}">