Theme the tab bar in Safari 15 beta

Author: philwareham

src/docs/design-patterns.html

@@ -22,6 +22,8 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="manifest" href="/site.webmanifest">
     <meta name="color-scheme" content="dark light">
+    <meta name="theme-color" content="#ffda44" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#363d44" media="(prefers-color-scheme: dark)">
 
     <link rel="canonical" href="https://textpattern.com/design-patterns.html">
 

src/mockups/blog-article.html

@@ -19,6 +19,8 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="manifest" href="/site.webmanifest">
     <meta name="color-scheme" content="dark light">
+    <meta name="theme-color" content="#ffda44" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#363d44" media="(prefers-color-scheme: dark)">
 
     <script defer src="../assets/js/app.js"></script>
     <link rel="canonical" href="https://textpattern.com/mockups/blog-article.html">

src/mockups/blog-landing.html

@@ -19,6 +19,8 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="manifest" href="/site.webmanifest">
     <meta name="color-scheme" content="dark light">
+    <meta name="theme-color" content="#ffda44" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#363d44" media="(prefers-color-scheme: dark)">
 
     <script defer src="../assets/js/app.js"></script>
     <link rel="canonical" href="https://textpattern.com/mockups/blog-landing.html">

src/mockups/documentation-example.html

@@ -19,6 +19,8 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="manifest" href="/site.webmanifest">
     <meta name="color-scheme" content="dark light">
+    <meta name="theme-color" content="#ffda44" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#363d44" media="(prefers-color-scheme: dark)">
 
     <script defer src="../assets/js/app.js"></script>
     <link rel="canonical" href="https://textpattern.com/mockups/documentation-example.html">

src/mockups/error.html

@@ -18,6 +18,8 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="manifest" href="/site.webmanifest">
     <meta name="color-scheme" content="dark light">
+    <meta name="theme-color" content="#ffda44" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#363d44" media="(prefers-color-scheme: dark)">
 
     <script defer src="../assets/js/app.js"></script>
 </head>

src/mockups/get-started.html

@@ -19,6 +19,8 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="manifest" href="/site.webmanifest">
     <meta name="color-scheme" content="dark light">
+    <meta name="theme-color" content="#ffda44" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#363d44" media="(prefers-color-scheme: dark)">
 
     <script defer src="../assets/js/app.js"></script>
     <link rel="canonical" href="https://textpattern.com/mockups/get-started.html">

src/mockups/index.html

@@ -21,6 +21,8 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="manifest" href="/site.webmanifest">
     <meta name="color-scheme" content="dark light">
+    <meta name="theme-color" content="#ffda44" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#363d44" media="(prefers-color-scheme: dark)">
 
     <script defer src="../assets/js/app.js"></script>
     <link rel="canonical" href="https://textpattern.com/mockups/index.html">

src/mockups/showcase-article.html

@@ -19,6 +19,8 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="manifest" href="/site.webmanifest">
     <meta name="color-scheme" content="dark light">
+    <meta name="theme-color" content="#ffda44" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#363d44" media="(prefers-color-scheme: dark)">
 
     <script defer src="../assets/js/app.js"></script>
     <link rel="canonical" href="https://textpattern.com/mockups/blog-article.html">

src/mockups/showcase-landing.html

@@ -19,6 +19,8 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">
     <link rel="manifest" href="/site.webmanifest">
     <meta name="color-scheme" content="dark light">
+    <meta name="theme-color" content="#ffda44" media="(prefers-color-scheme: light)">
+    <meta name="theme-color" content="#363d44" media="(prefers-color-scheme: dark)">
 
     <script defer src="../assets/js/app.js"></script>
     <link rel="canonical" href="https://textpattern.com/mockups/showcase-landing.html">

src/templates/forms/misc/head.txp

@@ -11,7 +11,8 @@
 <link rel="manifest" href="/site.webmanifest">
 <link rel="alternate" type="application/rss+xml" title="RSS feed" href="<txp:site_url />rss">
 <meta name="color-scheme" content="dark light">
-<meta name="theme-color" content="#ffda44">
+<meta name="theme-color" content="#ffda44" media="(prefers-color-scheme: light)">
+<meta name="theme-color" content="#363d44" media="(prefers-color-scheme: dark)">
 <meta name="generator" content="Textpattern CMS">
 <meta name="application-name" content="Textpattern">
 <script defer src="https://textpattern.com/assets/js/app.@@timestamp.js"></script>