feat: show when theme is overwritten by prefers-color-scheme

dist/docs/script.js

@@ -1,2 +1,2 @@
-"use strict";var e=window,t=new URLSearchParams(e.location.search),n="undefined"!=typeof CSS&&CSS.supports("color","var(--clr)"),s="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/",i={"dark.min.css":1.4,"dark.standalone.min.css":1.31,"dark-legacy.min.css":2.487,"dark-legacy.standalone.min.css":1.16,"light.min.css":1.4,"light.standalone.min.css":1.3,"light-legacy.min.css":.178+1.16+1.15,"light-legacy.standalone.min.css":1.15},r=function(e){var t=e.theme,n=e.isLegacy?"-legacy":"",s=e.isStandalone?".standalone":"";return"".concat(t).concat(n).concat(s,".min.css")},a=function(e){var t=e.theme,n=e.isLegacy,i=e.isStandalone,a=r({theme:t,isLegacy:n,isStandalone:i}),o='<link rel="stylesheet" href="'.concat(s).concat(a,'">');return!n||i?o:(function(e){var t=e.theme,n=e.isLegacy,i=e.isStandalone,a="dark"===t?"light":"dark",o=r({theme:a,isLegacy:n,isStandalone:i});return'\n\x3c!-- Preload the required stylesheets (optional) --\x3e\n<link rel="preload" as="style" href="'.concat(s).concat(r({theme:t,isLegacy:n,isStandalone:i}),'">\n<link rel="preload" as="style" href="').concat(s).concat(o,'" media="(prefers-color-scheme: ').concat(a,')">')}({theme:t,isLegacy:n,isStandalone:!0})+"\n\n"+o).trim()},o={_productHunt:document.querySelector("#js-producthunt"),_stylesheet:document.querySelector("#js-stylesheet"),_removeStartupStylesheet:function(){var e=document.head.querySelector("#js-startup-stylesheet");e&&document.head.removeChild(e);var t=o;t._stylesheet.removeEventListener("load",t._removeStartupStylesheet)},_updateProductHunt:function(e){this._productHunt.src=this._productHunt.src.replace(/dark|light/,e)},_updateStylesheet:function(e){this._stylesheet.href="../"+e},init:function(e,t){this._stylesheet.addEventListener("load",this._removeStartupStylesheet),this.update(e,t)},update:function(e,t){var n=e.isStandalone?e.theme:t||e.theme;this._updateStylesheet(r(e)),this._updateProductHunt(n)}},c=function(t,n){var s=e.matchMedia("(prefers-color-scheme: ".concat(t,")"));s.addListener(function(e){return n(e.matches)}),n(s.matches)},l=t.get("theme"),h={theme:/^(dark|light)$/.test(l)?l:"dark",isLegacy:t.has("legacy")||!n,isStandalone:t.has("standalone")};new e.Vue({el:"#installation",filters:{capitalize:function(e){return e.charAt(0).toUpperCase()+e.slice(1)}},data:{versionOptions:h,preferedColorScheme:null,copyStatus:null},computed:{selectedVersion:function(){return{fileName:r(this.versionOptions),fileSize:(e=this.versionOptions,i[r(e)]||0).toFixed(2),fileSnippet:a(this.versionOptions)};var e}},created:function(){var e=this;c("dark",function(t){return t&&(e.preferedColorScheme="dark")}),c("light",function(t){return t&&(e.preferedColorScheme="light")}),o.init(this.versionOptions,this.preferedColorScheme)},methods:{copyToClipboard:function(){var t=this;Promise.resolve().then(function(){return e.clipboard.writeText(t.selectedVersion.fileSnippet)}).then(function(){return t.copyStatus="success"}).catch(function(){return t.copyStatus="failed"}),setTimeout(function(){return t.copyStatus=null},1e3)}},watch:{preferedColorScheme:function(e){o.update(this.versionOptions,e)},versionOptions:{deep:!0,handler:function(e){o.update(e,this.preferedColorScheme)}}}}),(0,e.faviconModeSwitcher.default)([{element:'link[rel="shortcut icon"]',href:{dark:"./icons/light-favicon.ico"}},{element:'link[rel="icon"][sizes="16x16"]',href:{dark:"./icons/light-favicon-16x16.png"}},{element:'link[rel="icon"][sizes="32x32"]',href:{dark:"./icons/light-favicon-32x32.png"}}]);
+"use strict";var e=window,t=new URLSearchParams(e.location.search),n="undefined"!=typeof CSS&&CSS.supports("color","var(--clr)"),i="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/",r={"dark.min.css":1.4,"dark.standalone.min.css":1.31,"dark-legacy.min.css":2.487,"dark-legacy.standalone.min.css":1.16,"light.min.css":1.4,"light.standalone.min.css":1.3,"light-legacy.min.css":.178+1.16+1.15,"light-legacy.standalone.min.css":1.15},s=function(e){var t=e.theme,n=e.isLegacy?"-legacy":"",i=e.isStandalone?".standalone":"";return"".concat(t).concat(n).concat(i,".min.css")},o=function(e){var t=e.theme,n=e.isLegacy,r=e.isStandalone,o=s({theme:t,isLegacy:n,isStandalone:r}),a='<link rel="stylesheet" href="'.concat(i).concat(o,'">');return!n||r?a:(function(e){var t=e.theme,n=e.isLegacy,r=e.isStandalone,o="dark"===t?"light":"dark",a=s({theme:o,isLegacy:n,isStandalone:r});return'\n\x3c!-- Preload the required stylesheets (optional) --\x3e\n<link rel="preload" as="style" href="'.concat(i).concat(s({theme:t,isLegacy:n,isStandalone:r}),'">\n<link rel="preload" as="style" href="').concat(i).concat(a,'" media="(prefers-color-scheme: ').concat(o,')">')}({theme:t,isLegacy:n,isStandalone:!0})+"\n\n"+a).trim()},a={_productHunt:document.querySelector("#js-producthunt"),_stylesheet:document.querySelector("#js-stylesheet"),_removeStartupStylesheet:function(){var e=document.head.querySelector("#js-startup-stylesheet");e&&document.head.removeChild(e);var t=a;t._stylesheet.removeEventListener("load",t._removeStartupStylesheet)},_updateProductHunt:function(e){this._productHunt.src=this._productHunt.src.replace(/dark|light/,e)},_updateStylesheet:function(e){this._stylesheet.href="../"+e},init:function(e,t){this._stylesheet.addEventListener("load",this._removeStartupStylesheet),this.update(e,t)},update:function(e,t){var n=e.isStandalone?e.theme:t||e.theme;this._updateStylesheet(s(e)),this._updateProductHunt(n)}},c=function(t,n){var i=e.matchMedia("(prefers-color-scheme: ".concat(t,")"));i.addListener(function(e){return n(e.matches)}),n(i.matches)},l=t.get("theme"),h={theme:/^(dark|light)$/.test(l)?l:"dark",isLegacy:t.has("legacy")||!n,isStandalone:t.has("standalone")};new e.Vue({el:"#installation",filters:{capitalize:function(e){return e.charAt(0).toUpperCase()+e.slice(1)}},data:{versionOptions:h,preferedColorScheme:null,copyStatus:null},computed:{isOverwritten:function(){var e=this.versionOptions,t=e.isStandalone,n=e.theme;return!(t||!this.preferedColorScheme)&&n!==this.preferedColorScheme},selectedVersion:function(){return{fileName:s(this.versionOptions),fileSize:(e=this.versionOptions,r[s(e)]||0).toFixed(2),fileSnippet:o(this.versionOptions)};var e}},created:function(){var e=this;c("dark",function(t){return t&&(e.preferedColorScheme="dark")}),c("light",function(t){return t&&(e.preferedColorScheme="light")}),a.init(this.versionOptions,this.preferedColorScheme)},methods:{getTooltipMessage:function(e){return this.versionOptions.theme===e&&this.isOverwritten?"Your theme selection is currently overwritten by the theme setting on your device.":"Selected theme can be overwritten by theme setting on user's device."},copyToClipboard:function(){var t=this;Promise.resolve().then(function(){return e.clipboard.writeText(t.selectedVersion.fileSnippet)}).then(function(){return t.copyStatus="success"}).catch(function(){return t.copyStatus="failed"}),setTimeout(function(){return t.copyStatus=null},1e3)}},watch:{preferedColorScheme:function(e){a.update(this.versionOptions,e)},versionOptions:{deep:!0,handler:function(e){a.update(e,this.preferedColorScheme)}}}}),(0,e.faviconModeSwitcher.default)([{element:'link[rel="shortcut icon"]',href:{dark:"./icons/light-favicon.ico"}},{element:'link[rel="icon"][sizes="16x16"]',href:{dark:"./icons/light-favicon-16x16.png"}},{element:'link[rel="icon"][sizes="32x32"]',href:{dark:"./icons/light-favicon-32x32.png"}}]);
 //# sourceMappingURL=script.js.map

dist/docs/style.css

@@ -1,2 +1,2 @@
-html{scroll-behavior:smooth}#js-producthunt{margin-top:1rem}.version-select{overflow:hidden}.version-select__snippet h3{margin:1rem 2.5rem 1rem 0}.version-select__snippet__btn{position:relative;margin:0 2px 0 auto;overflow:visible}.version-select__snippet__btn span{position:absolute;left:-2rem;display:inline-block;transform:scale(1.3)}.version-select__options>label{white-space:pre}.version-select__options>label:first-child{margin-right:1rem}.version-select__options__additional{display:flex;flex-direction:column;margin:1rem 0}.version-select__options__additional>:not(summary){display:block;margin-top:1rem}.version-select__options__additional summary{cursor:pointer;font-weight:600}.version-select__options__additional summary:focus{outline:none}.version-select__options__additional summary:focus span,.version-select__options__additional summary:hover span{text-decoration:underline}.version-select__info{table-layout:fixed}.version-select__info caption{text-align:left}.version-select__info th{border:none;vertical-align:top;width:35%}body>footer{padding-top:2rem;display:flex;justify-content:flex-end;align-items:flex-end}.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.emoji{font-family:Segoe UI Emoji,Apple Color Emoji,Noto Color Emoji,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.translucent{opacity:.4}.tooltip{position:relative;cursor:help}.tooltip:after{content:"";position:absolute;left:0;bottom:-4px;width:100%;border-width:0 0 1.5px;border-style:dotted}.v-enter,.v-leave-to{transform:scale(0)!important}.v-enter-active,.v-leave-active{transition:transform .22s cubic-bezier(.175,.885,.32,1.275)}[v-cloak]>*{display:none}[v-cloak]:after{content:"Version picker is loading..."}
+html{scroll-behavior:smooth}#js-producthunt{margin-top:1rem}.version-select{overflow:hidden}.version-select__snippet h3{margin:1rem 2.5rem 1rem 0}.version-select__snippet__btn{position:relative;margin:0 2px 0 auto;overflow:visible}.version-select__snippet__btn span{position:absolute;left:-2rem;display:inline-block;transform:scale(1.3)}.version-select__options>label{white-space:pre}.version-select__options>label:first-child{margin-right:1rem}.version-select__options__additional{display:flex;flex-direction:column;margin:1rem 0}.version-select__options__additional>:not(summary){display:block;margin-top:1rem}.version-select__options__additional summary{cursor:pointer;font-weight:600}.version-select__options__additional summary:focus{outline:none}.version-select__options__additional summary:focus span,.version-select__options__additional summary:hover span{text-decoration:underline}.version-select__info{table-layout:fixed}.version-select__info caption{text-align:left}.version-select__info th{border:none;vertical-align:top;width:35%}body>footer{padding-top:2rem;display:flex;justify-content:flex-end;align-items:flex-end}.row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.emoji{font-family:Segoe UI Emoji,Apple Color Emoji,Noto Color Emoji,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.opacity-4{opacity:.4}.opacity-7{opacity:.76}.tooltip{position:relative;cursor:help}.tooltip:after{content:"";position:absolute;left:0;bottom:-4px;width:100%;border-width:0 0 1.5px;border-style:dotted}.v-enter,.v-leave-to{transform:scale(0)!important}.v-enter-active,.v-leave-active{transition:transform .22s cubic-bezier(.175,.885,.32,1.275)}[v-cloak]>*{display:none}[v-cloak]:after{content:"Version picker is loading..."}
 /*# sourceMappingURL=style.css.map */

dist/docs/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA,KACE,sBACF,CAEA,gBACE,eACF,CAEA,gBACE,eACF,CAEA,4BACE,yBACF,CAEA,8BACE,iBAAkB,CAClB,mBAAoB,CACpB,gBACF,CACA,mCACE,iBAAkB,CAClB,UAAW,CACX,oBAAqB,CACrB,oBACF,CAEA,+BACE,eACF,CACA,2CACE,iBACF,CACA,qCACE,YAAa,CACb,qBAAsB,CACtB,aACF,CACA,mDACE,aAAc,CACd,eACF,CACA,6CACE,cAAe,CACf,eACF,CACA,mDACE,YACF,CACA,gHAEE,yBACF,CAGA,sBACE,kBACF,CACA,8BACE,eACF,CACA,yBACE,WAAY,CACZ,kBAAmB,CACnB,SACF,CAEA,YACE,gBAAiB,CACjB,YAAa,CACb,wBAAyB,CACzB,oBACF,CAGA,KACE,YAAa,CACb,cAAe,CACf,kBAAmB,CACnB,6BACF,CAGA,OACE,+LAGF,CACA,aACE,UACF,CACA,SACE,iBAAkB,CAClB,WACF,CACA,eACE,UAAW,CACX,iBAAkB,CAClB,MAAO,CACP,WAAY,CACZ,UAAW,CACX,sBAAuB,CACvB,mBACF,CAGA,qBAEE,4BACF,CACA,gCAEE,2DACF,CACA,YACE,YACF,CACA,gBACE,sCACF","file":"style.css","sourcesContent":["html {\n  scroll-behavior: smooth;\n}\n\n#js-producthunt {\n  margin-top: 1rem;\n}\n\n.version-select {\n  overflow: hidden;\n}\n\n.version-select__snippet h3 {\n  margin: 1rem 2.5rem 1rem 0;\n}\n/* Make the ✔ / ❌ Emoji appear next to the button */\n.version-select__snippet__btn {\n  position: relative;\n  margin: 0 2px 0 auto;\n  overflow: visible;\n}\n.version-select__snippet__btn span {\n  position: absolute;\n  left: -2rem;\n  display: inline-block;\n  transform: scale(1.3);\n}\n\n.version-select__options > label {\n  white-space: pre;\n}\n.version-select__options > label:first-child {\n  margin-right: 1rem;\n}\n.version-select__options__additional {\n  display: flex;\n  flex-direction: column;\n  margin: 1rem 0;\n}\n.version-select__options__additional > *:not(summary) {\n  display: block;\n  margin-top: 1rem;\n}\n.version-select__options__additional summary {\n  cursor: pointer;\n  font-weight: 600;\n}\n.version-select__options__additional summary:focus {\n  outline: none;\n}\n.version-select__options__additional summary:hover span,\n.version-select__options__additional summary:focus span {\n  text-decoration: underline;\n}\n\n/* Fixed layout so columns don't jump when content changes */\n.version-select__info {\n  table-layout: fixed;\n}\n.version-select__info caption {\n  text-align: left;\n}\n.version-select__info th {\n  border: none;\n  vertical-align: top;\n  width: 35%;\n}\n\nbody > footer {\n  padding-top: 2rem;\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n}\n\n/* Used for (Links / ProductHunt) and (Installation / Copy-Button) rows */\n.row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n}\n\n/* Use proper Emoji instead of plain Unicode chars */\n.emoji {\n  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system,\n    BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,\n    Helvetica Neue, sans-serif;\n}\n.translucent {\n  opacity: 0.4;\n}\n.tooltip {\n  position: relative;\n  cursor: help;\n}\n.tooltip::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  bottom: -4px;\n  width: 100%;\n  border-width: 0 0 1.5px;\n  border-style: dotted;\n}\n\n/* For the bounce transitions of code snippet and copy success Emoji */\n.v-enter,\n.v-leave-to {\n  transform: scale(0) !important;\n}\n.v-enter-active,\n.v-leave-active {\n  transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n[v-cloak] > * {\n  display: none;\n}\n[v-cloak]::after {\n  content: 'Version picker is loading...';\n}\n"]}
+{"version":3,"sources":["style.css"],"names":[],"mappings":"AAAA,KACE,sBACF,CAEA,gBACE,eACF,CAEA,gBACE,eACF,CAEA,4BACE,yBACF,CAEA,8BACE,iBAAkB,CAClB,mBAAoB,CACpB,gBACF,CACA,mCACE,iBAAkB,CAClB,UAAW,CACX,oBAAqB,CACrB,oBACF,CAEA,+BACE,eACF,CACA,2CACE,iBACF,CACA,qCACE,YAAa,CACb,qBAAsB,CACtB,aACF,CACA,mDACE,aAAc,CACd,eACF,CACA,6CACE,cAAe,CACf,eACF,CACA,mDACE,YACF,CACA,gHAEE,yBACF,CAGA,sBACE,kBACF,CACA,8BACE,eACF,CACA,yBACE,WAAY,CACZ,kBAAmB,CACnB,SACF,CAEA,YACE,gBAAiB,CACjB,YAAa,CACb,wBAAyB,CACzB,oBACF,CAGA,KACE,YAAa,CACb,cAAe,CACf,kBAAmB,CACnB,6BACF,CAGA,OACE,+LAGF,CACA,WACE,UACF,CACA,WACE,WACF,CACA,SACE,iBAAkB,CAClB,WACF,CACA,eACE,UAAW,CACX,iBAAkB,CAClB,MAAO,CACP,WAAY,CACZ,UAAW,CACX,sBAAuB,CACvB,mBACF,CAGA,qBAEE,4BACF,CACA,gCAEE,2DACF,CACA,YACE,YACF,CACA,gBACE,sCACF","file":"style.css","sourcesContent":["html {\n  scroll-behavior: smooth;\n}\n\n#js-producthunt {\n  margin-top: 1rem;\n}\n\n.version-select {\n  overflow: hidden;\n}\n\n.version-select__snippet h3 {\n  margin: 1rem 2.5rem 1rem 0;\n}\n/* Make the ✔ / ❌ Emoji appear next to the button */\n.version-select__snippet__btn {\n  position: relative;\n  margin: 0 2px 0 auto;\n  overflow: visible;\n}\n.version-select__snippet__btn span {\n  position: absolute;\n  left: -2rem;\n  display: inline-block;\n  transform: scale(1.3);\n}\n\n.version-select__options > label {\n  white-space: pre;\n}\n.version-select__options > label:first-child {\n  margin-right: 1rem;\n}\n.version-select__options__additional {\n  display: flex;\n  flex-direction: column;\n  margin: 1rem 0;\n}\n.version-select__options__additional > *:not(summary) {\n  display: block;\n  margin-top: 1rem;\n}\n.version-select__options__additional summary {\n  cursor: pointer;\n  font-weight: 600;\n}\n.version-select__options__additional summary:focus {\n  outline: none;\n}\n.version-select__options__additional summary:hover span,\n.version-select__options__additional summary:focus span {\n  text-decoration: underline;\n}\n\n/* Fixed layout so columns don't jump when content changes */\n.version-select__info {\n  table-layout: fixed;\n}\n.version-select__info caption {\n  text-align: left;\n}\n.version-select__info th {\n  border: none;\n  vertical-align: top;\n  width: 35%;\n}\n\nbody > footer {\n  padding-top: 2rem;\n  display: flex;\n  justify-content: flex-end;\n  align-items: flex-end;\n}\n\n/* Used for (Links / ProductHunt) and (Installation / Copy-Button) rows */\n.row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n}\n\n/* Use proper Emoji instead of plain Unicode chars */\n.emoji {\n  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', system-ui, -apple-system,\n    BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,\n    Helvetica Neue, sans-serif;\n}\n.opacity-4 {\n  opacity: 0.4;\n}\n.opacity-7 {\n  opacity: 0.76;\n}\n.tooltip {\n  position: relative;\n  cursor: help;\n}\n.tooltip::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  bottom: -4px;\n  width: 100%;\n  border-width: 0 0 1.5px;\n  border-style: dotted;\n}\n\n/* For the bounce transitions of code snippet and copy success Emoji */\n.v-enter,\n.v-leave-to {\n  transform: scale(0) !important;\n}\n.v-enter-active,\n.v-leave-active {\n  transition: transform 220ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n[v-cloak] > * {\n  display: none;\n}\n[v-cloak]::after {\n  content: 'Version picker is loading...';\n}\n"]}

docs/script.js

@@ -139,6 +139,12 @@ new w.Vue({
     copyStatus: null,
   },
   computed: {
+    /** @returns {boolean} */
+    isOverwritten() {
+      const { isStandalone, theme } = this.versionOptions
+      if (isStandalone || !this.preferedColorScheme) return false
+      return theme !== this.preferedColorScheme
+    },
     /** @returns {{ fileName: string, fileSize: string, fileSnippet: string }} */
     selectedVersion() {
       return {
@@ -155,6 +161,11 @@ new w.Vue({
     externalElements.init(this.versionOptions, this.preferedColorScheme)
   },
   methods: {
+    getTooltipMessage(/** @type {Theme} */ theme) {
+      if (this.versionOptions.theme === theme && this.isOverwritten) {
+        return 'Your theme selection is currently overwritten by the theme setting on your device.'
+      } else return "Selected theme can be overwritten by theme setting on user's device."
+    },
     copyToClipboard() {
       Promise.resolve()
         .then(() => w.clipboard.writeText(this.selectedVersion.fileSnippet))

docs/style.css

@@ -87,9 +87,12 @@ body > footer {
     BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
     Helvetica Neue, sans-serif;
 }
-.translucent {
+.opacity-4 {
   opacity: 0.4;
 }
+.opacity-7 {
+  opacity: 0.76;
+}
 .tooltip {
   position: relative;
   cursor: help;

docs/versionpicker.html

@@ -22,20 +22,24 @@
       Dark theme&nbsp;<span class="emoji">🌙</span>
       <span
         v-if="!versionOptions.isStandalone"
-        class="tooltip emoji translucent"
-        title="Selected theme may be overwritten by theme settings on user's device"
+        class="tooltip emoji opacity-4"
+        :class="{'opacity-7': versionOptions.theme === 'dark' && isOverwritten}"
+        :title="getTooltipMessage('dark')"
+      >
+        / ☀</span
       >
-        / ☀</span>
     </label>
     <label>
       <input type="radio" value="light" name="theme" v-model="versionOptions.theme" />
       Light theme&nbsp;<span class="emoji">☀</span>
       <span
         v-if="!versionOptions.isStandalone"
-        class="tooltip emoji translucent"
-        title="Selected theme may be overwritten by theme settings on user's device"
+        class="tooltip emoji opacity-4"
+        :class="{'opacity-7': versionOptions.theme === 'light' && isOverwritten}"
+        :title="getTooltipMessage('light')"
+      >
+        / 🌙</span
       >
-        / 🌙</span>
     </label>
     <details class="version-select__options__additional">
       <summary><span>Additional options</span></summary>
@@ -48,7 +52,6 @@
         Support Internet Explorer and other legacy browsers?
       </label>
     </details>
-
   </form>
 
   <table class="version-select__info">
@@ -77,23 +80,22 @@
             <span
               v-if="versionOptions.theme === 'dark'"
               class="emoji"
-              title="Selected theme may be overwritten by theme settings on user's device"
+              :title="getTooltipMessage('dark')"
             >
-              🌙<span class="translucent"> / ☀</span>
+              🌙<span class="opacity-4" :class="{'opacity-7': isOverwritten}"> / ☀</span>
             </span>
-            <span
-              v-else
-              class="emoji"
-              title="Selected theme may be overwritten by theme settings on user's device"
-            >
-              ☀ <span class="translucent"> / 🌙</span>
+            <span v-else class="emoji" :title="getTooltipMessage('light')">
+              ☀ <span class="opacity-4" :class="{'opacity-7': isOverwritten}"> / 🌙</span>
             </span>
 
             Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings.
             (detected via <code>prefers-color-scheme</code>)
 
             <template v-if="preferedColorScheme">
-              <br />Your device is currently set to {{ preferedColorScheme }} mode.
+              <br />
+              <span :style="'text-decoration: ' + (isOverwritten ? 'underline' : 'none')">
+                Your device is currently set to {{ preferedColorScheme }} mode.
+              </span>
             </template>
           </template>
         </td>
@@ -106,7 +108,8 @@
           </template>
           <template v-else>
             All current browsers (<a href="https://caniuse.com/#feat=css-variables"
-              >support for CSS Custom Properties</a>)
+              >support for CSS Custom Properties</a
+            >)
           </template>
         </td>
       </tr>