fix flash of light theme on load

src/css/base.css

@@ -22,6 +22,7 @@ body {
   font-family: var(--body-font-family);
   line-height: var(--body-line-height);
   margin: 0;
+  tab-size: 4;
   word-wrap: anywhere; /* aka overflow-wrap; used when hyphens are disabled or aren't sufficient */
 }
 

src/css/vendor/asciidoctor-tabs.css

@@ -44,12 +44,12 @@
   content: none;
 }
 
+.doc .tabs:not(.is-loading) .tablist > ul li {
+  transition: background-color 200ms ease-in-out, color 100ms linear;
+}
+
 .doc .tabpanel {
   background-color: initial;
   border: 0;
   padding: 0;
 }
-
-html.theme-set .doc .tabs .tablist > ul li {
-  transition: background-color 200ms ease-in-out, color 100ms linear;
-}

src/js/07-switch-theme.js

@@ -0,0 +1,35 @@
+/*
+ * Copyright 2021 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+;(function () {
+  'use strict'
+
+  activateSwitch(document.getElementById('switch-theme-checkbox'))
+
+  function activateSwitch (control) {
+    if (!control) return
+    control.checked = document.documentElement.classList.contains('dark-theme')
+    control.addEventListener('change', onThemeChange.bind(control))
+  }
+
+  function onThemeChange () {
+    document.documentElement.classList.toggle('dark-theme', this.checked)
+    saveTheme(this.checked ? 'dark' : 'light')
+  }
+
+  function saveTheme (theme) {
+    window.localStorage && window.localStorage.setItem('theme', theme)
+  }
+})()

src/partials/footer-scripts.hbs

@@ -1,7 +1,6 @@
 <script id="site-script" src="{{{uiRootPath}}}/js/site.js" data-ui-root-path="{{{uiRootPath}}}"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/highlight.js"></script>
 <script async src="{{{uiRootPath}}}/js/vendor/{{#if (asciidocExtensionRegistered '@asciidoctor/tabs')}}asciidoctor{{else}}spring{{/if}}-tabs.js"></script>
-<script src="{{{uiRootPath}}}/js/vendor/switchtheme.js"></script>
 {{#if env.ALGOLIA_API_KEY}}
 <script async id="search-script" src="{{{uiRootPath}}}/js/vendor/docsearch.js"{{#if env.ALGOLIA_APP_ID}} data-app-id="{{env.ALGOLIA_APP_ID}}"{{/if}} data-api-key="{{env.ALGOLIA_API_KEY}}" data-index-name="{{env.ALGOLIA_INDEX_NAME}}" data-input-selector="#search-input"></script>
 {{/if}}

src/partials/head-styles.hbs

@@ -1,3 +1,8 @@
+    <script>
+!function (theme) {
+  if (theme === 'dark') document.documentElement.classList.add('dark-theme')
+}(localStorage && localStorage.getItem('theme') || (matchMedia('(prefers-color-scheme: dark)') && 'dark'))
+    </script>
     <link rel="stylesheet" href="{{{uiRootPath}}}/css/site.css">
     <link rel="stylesheet" href="{{{uiRootPath}}}/css/vendor/{{#if (asciidocExtensionRegistered '@asciidoctor/tabs')}}asciidoctor{{else}}spring{{/if}}-tabs.css">
     <link rel="stylesheet" href="{{{uiRootPath}}}/css/vendor/docsearch.css">