Add icons to color theme selector

Author: georgedoescode

src/css/tailwind.css

@@ -108,6 +108,41 @@ footer p a:focus {
 }
 
 
+/* Color theme selector */
+.color-theme-selector-wrapper {
+  --padding-inline: 0.5rem;
+  --icon-size: 1rem;
+
+  @apply invisible;
+  @apply relative w-32 h-8 flex items-center;
+  @apply rounded-default border border-gray-200 dark:border-transparent;
+  @apply bg-white;
+  @apply text-black;
+}
+
+.color-theme-selector-wrapper-icon {
+  width: var(--icon-size);
+  max-height: 100%;
+  margin-left: var(--padding-inline);
+}
+
+.color-theme-selector-wrapper::after {
+  position:absolute;
+  top: 50%;
+  right: var(--padding-inline);
+  transform: translateY(-50%);
+  content: "";
+  width: var(--icon-size);
+  height: var(--icon-size);
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+.color-theme-selector-wrapper select {
+  @apply absolute w-full flex items-center bg-transparent;
+  appearance: none;
+  padding-left: calc(var(--icon-size) + var(--padding-inline) + 0.5rem);
+}
+
 .videowrapper {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 */

src/js/color-theme.js

@@ -3,20 +3,34 @@ const colorThemeSelector = document.querySelector(
   "[data-color-theme-selector]"
 );
 const colorThemeSelectorInput = colorThemeSelector.querySelector("select");
+const colorThemeSelectorInputIcon = colorThemeSelector.querySelector('.color-theme-selector-wrapper-icon');
+const colorThemeSelectorInputIconSrc = colorThemeSelectorInputIcon.querySelector('use');
 const storedTheme = localStorage.theme;
 
+function setInputIcon(type) {
+  if(type === 'dark') {
+    colorThemeSelectorInputIconSrc.setAttribute('xlink:href', '#icon-color-theme-dark');
+  } else if(type === 'light') {
+    colorThemeSelectorInputIconSrc.setAttribute('xlink:href', '#icon-color-theme-light');
+  } else {
+    colorThemeSelectorInputIconSrc.setAttribute('xlink:href', '#icon-color-theme-system');
+  } 
+}
+
 function setInputState(storedTheme) {
   if (!!storedTheme) {
     colorThemeSelectorInput.querySelector(
       `[value="${storedTheme}"]`
     ).selected = true;
 
+    setInputIcon(storedTheme);
+
     htmlElement.classList.add(storedTheme);
   }
 }
 
 function displayThemeSelector() {
-  colorThemeSelector.classList.remove("invisible");
+  colorThemeSelector.style.visibility = 'visible';
 }
 
 function toggleThemeClass(type) {
@@ -53,15 +67,23 @@ function updateTheme(type) {
   switch (type) {
     case "dark":
       toggleThemeClass("dark");
+
+      setInputIcon('dark');
+
       localStorage.theme = "dark";
       break;
     case "light":
       toggleThemeClass("light");
+
+      setInputIcon('light');
+
       localStorage.theme = "light";
       break;
     default:
       toggleThemeClass("system");
 
+      setInputIcon('system');
+
       localStorage.removeItem("theme");
       break;
   }

src/site/_includes/components/color-theme-selector.njk

@@ -1,7 +1,10 @@
 <div class="flex justify-end p-4">
-  <label class="color-theme-selector-wrapper inline-flex invisible" data-color-theme-selector>
+  <label class="color-theme-selector-wrapper" data-color-theme-selector>
+    <svg class="color-theme-selector-wrapper-icon fill-current" role="img" focusable="false">
+      <use xlink:href="#icon-color-theme-system"></use>
+    </svg>
     <span class="sr-only">Color theme</span>
-    <select class="text-black py-1 px-2 rounded-default border border-gray-200 dark:border-transparent bg-white">
+    <select>
       <option selected value="system">System</option>
       <option value="dark">Dark</option>
       <option value="light">Light</option>

src/site/_includes/layouts/base.njk

@@ -93,6 +93,9 @@ ogimage: "/img/og/default-og-image.png"
         <symbol id="icon-home" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M18.672,11H17v6c0,0.445-0.194,1-1,1h-4v-6H8v6H4c-0.806,0-1-0.555-1-1v-6H1.328c-0.598,0-0.47-0.324-0.06-0.748L9.292,2.22C9.487,2.018,9.743,1.918,10,1.908c0.257,0.01,0.513,0.109,0.708,0.312l8.023,8.031C19.142,10.676,19.27,11,18.672,11z"></path></symbol>
         <symbol id="icon-twitter" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M17.316,6.246c0.008,0.162,0.011,0.326,0.011,0.488c0,4.99-3.797,10.742-10.74,10.742c-2.133,0-4.116-0.625-5.787-1.697c0.296,0.035,0.596,0.053,0.9,0.053c1.77,0,3.397-0.604,4.688-1.615c-1.651-0.031-3.046-1.121-3.526-2.621c0.23,0.043,0.467,0.066,0.71,0.066c0.345,0,0.679-0.045,0.995-0.131c-1.727-0.348-3.028-1.873-3.028-3.703c0-0.016,0-0.031,0-0.047c0.509,0.283,1.092,0.453,1.71,0.473c-1.013-0.678-1.68-1.832-1.68-3.143c0-0.691,0.186-1.34,0.512-1.898C3.942,5.498,6.725,7,9.862,7.158C9.798,6.881,9.765,6.594,9.765,6.297c0-2.084,1.689-3.773,3.774-3.773c1.086,0,2.067,0.457,2.756,1.191c0.859-0.17,1.667-0.484,2.397-0.916c-0.282,0.881-0.881,1.621-1.66,2.088c0.764-0.092,1.49-0.293,2.168-0.594C18.694,5.051,18.054,5.715,17.316,6.246z"></path></symbol>
         <symbol id="icon-github" preserveAspectRatio="xMidYMid meet" viewBox="0 0 20 20"><path d="M13.18,11.309c-0.718,0-1.3,0.807-1.3,1.799c0,0.994,0.582,1.801,1.3,1.801s1.3-0.807,1.3-1.801C14.479,12.116,13.898,11.309,13.18,11.309z M17.706,6.626c0.149-0.365,0.155-2.439-0.635-4.426c0,0-1.811,0.199-4.551,2.08c-0.575-0.16-1.548-0.238-2.519-0.238c-0.973,0-1.945,0.078-2.52,0.238C4.74,2.399,2.929,2.2,2.929,2.2C2.14,4.187,2.148,6.261,2.295,6.626C1.367,7.634,0.8,8.845,0.8,10.497c0,7.186,5.963,7.301,7.467,7.301c0.342,0,1.018,0.002,1.734,0.002c0.715,0,1.392-0.002,1.732-0.002c1.506,0,7.467-0.115,7.467-7.301C19.2,8.845,18.634,7.634,17.706,6.626z M10.028,16.915H9.972c-3.771,0-6.709-0.449-6.709-4.115c0-0.879,0.31-1.693,1.047-2.369c1.227-1.127,3.305-0.531,5.662-0.531c0.01,0,0.02,0,0.029,0c0.01,0,0.018,0,0.027,0c2.357,0,4.436-0.596,5.664,0.531c0.735,0.676,1.045,1.49,1.045,2.369C16.737,16.466,13.8,16.915,10.028,16.915z M6.821,11.309c-0.718,0-1.3,0.807-1.3,1.799c0,0.994,0.582,1.801,1.3,1.801c0.719,0,1.301-0.807,1.301-1.801C8.122,12.116,7.54,11.309,6.821,11.309z"></path></symbol>
+        <symbol id="icon-color-theme-system" viewBox="0 0 14 14" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 7A7 7 0 1 1 0 7a7 7 0 0 1 14 0Zm-7 5.2A5.2 5.2 0 0 1 7 1.8v10.4Z" class="fill-current"/></symbol>
+        <symbol id="icon-color-theme-light" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0a.667.667 0 0 0-.667.667v.666a.667.667 0 0 0 1.334 0V.667A.667.667 0 0 0 8 0ZM2.343 2.343c.26-.26.682-.26.943 0l.471.472a.667.667 0 1 1-.943.942l-.471-.471a.667.667 0 0 1 0-.943ZM0 8c0-.368.298-.667.667-.667h.666a.667.667 0 0 1 0 1.334H.667A.667.667 0 0 1 0 8Zm12.243-4.243a.666.666 0 0 1 0-.942l.47-.472a.667.667 0 1 1 .944.943l-.472.471a.667.667 0 0 1-.942 0Zm2.424 3.576a.667.667 0 1 0 0 1.334h.666a.667.667 0 1 0 0-1.334h-.666Zm-2.424 4.91c.26-.26.682-.26.942 0l.472.47a.667.667 0 1 1-.943.944l-.471-.472a.667.667 0 0 1 0-.942ZM8 14a.667.667 0 0 0-.667.667v.666a.667.667 0 1 0 1.334 0v-.666A.667.667 0 0 0 8 14Zm-5.657-.343a.667.667 0 0 1 0-.943l.472-.471a.667.667 0 0 1 .942.942l-.471.472a.667.667 0 0 1-.943 0Zm1.616-3.324a4.667 4.667 0 1 0 8.083-4.666 4.667 4.667 0 0 0-8.083 4.666Z" class="fill-current"/></symbol>
+        <symbol id="icon-color-theme-dark" viewBox="0 0 12 12" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.314 6.866c-.444.11-.888.166-1.331.166A4.96 4.96 0 0 1 4.99 2.063c0-.441.056-.883.167-1.325.055-.165 0-.386-.167-.552-.166-.165-.332-.22-.554-.165C1.83.794 0 3.223 0 5.928A6.069 6.069 0 0 0 6.1 12c2.718 0 5.158-1.822 5.88-4.472.055-.165 0-.386-.167-.552a.534.534 0 0 0-.5-.11Z" class="fill-current"/></symbol>
       </defs>
     </svg>
     <script type="module" src="/js/details-force-state.js"></script>