portfolio2023/build/resources/views/components/select_theme.edge

<div x-data="{ depli: false }">
  <button @click="depli = !depli" class="cursor-pointer rounded-full bg-none p-1.5 focus:ring-2 focus:ring-white">
    <span class="flex items-center">
      <svg x-cloak x-bind:class="localStorage.theme === 'dark' ? '' : 'hidden'" viewBox="0 0 24 24" fill="none"
        class="w-6 h-6">
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z"
          class="fill-sky-400/20"></path>
        <path
          d="m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z"
          class="fill-sky-500"></path>
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M17 3a1 1 0 0 1 1 1 2 2 0 0 0 2 2 1 1 0 1 1 0 2 2 2 0 0 0-2 2 1 1 0 1 1-2 0 2 2 0 0 0-2-2 1 1 0 1 1 0-2 2 2 0 0 0 2-2 1 1 0 0 1 1-1Z"
          class="fill-sky-500"></path>
      </svg>
      <svg x-cloak x-bind:class="localStorage.theme === 'light' ? '' : 'hidden'" viewBox="0 0 24 24" fill="none"
        stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
        <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" class="fill-sky-400/20 stroke-sky-500"></path>
        <path
          d="M12 4v1M17.66 6.344l-.828.828M20.005 12.004h-1M17.66 17.664l-.828-.828M12 20.01V19M6.34 17.664l.835-.836M3.995 12.004h1.01M6 6l.835.836"
          class="stroke-sky-500"></path>
      </svg>
      <svg x-cloak
        x-bind:class="localStorage.theme === 'systeme' && window.matchMedia('(prefers-color-scheme: dark)').matches ? '' : 'hidden'"
        viewBox="0 0 24 24" fill="none" class="w-6 h-6 ">
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z"
          class="fill-transparent"></path>
        <path
          d="m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z"
          class="fill-slate-400 dark:fill-slate-500"></path>
        <path fill-rule="evenodd" clip-rule="evenodd"
          d="M17 3a1 1 0 0 1 1 1 2 2 0 0 0 2 2 1 1 0 1 1 0 2 2 2 0 0 0-2 2 1 1 0 1 1-2 0 2 2 0 0 0-2-2 1 1 0 1 1 0-2 2 2 0 0 0 2-2 1 1 0 0 1 1-1Z"
          class="fill-slate-400 dark:fill-slate-500"></path>
      </svg>
      <svg x-cloak
        x-bind:class="localStorage.theme === 'systeme' && window.matchMedia('(prefers-color-scheme: dark)').matches !== true ? '' : 'hidden'"
        viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
        class="w-6 h-6">
        <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" class="stroke-slate-400 dark:stroke-slate-500"></path>
        <path
          d="M12 4v1M17.66 6.344l-.828.828M20.005 12.004h-1M17.66 17.664l-.828-.828M12 20.01V19M6.34 17.664l.835-.836M3.995 12.004h1.01M6 6l.835.836"
          class="stroke-slate-400 dark:stroke-slate-500"></path>
      </svg>
    </span>
  </button>
  <ul x-show="depli" @click.away="depli = false" x-cloak
    class="overflow-hidden absolute right-0 z-10 mt-1 rounded-md bg-white text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
    tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-3">
    
    <li @click="
         depli = false;
         localStorage.theme = 'light';
         window.location.reload()"
      class="text-gray-900 relative cursor-default select-none py-2 pl-3 pr-9 hover:bg-gray-300" id="listbox-option-0"
      role="option">
      <div class="flex items-center">
        <svg viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          class="w-6 h-6 mr-2">
          <path d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" class="stroke-slate-400 dark:stroke-slate-500"></path>
          <path
            d="M12 4v1M17.66 6.344l-.828.828M20.005 12.004h-1M17.66 17.664l-.828-.828M12 20.01V19M6.34 17.664l.835-.836M3.995 12.004h1.01M6 6l.835.836"
            class="stroke-slate-400 dark:stroke-slate-500"></path>
        </svg>
        <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
        <span class="font-normal ml-3 block truncate">Light</span>
      </div>

      <span x-bind:class="localStorage.theme === 'light' ? '' : 'hidden'"
        class="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4">
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd"
            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
            clip-rule="evenodd" />
        </svg>
      </span>
    </li>

    <li @click="
         depli = false;
         localStorage.theme = 'dark';
         window.location.reload()"
      class="text-gray-900 relative cursor-default select-none py-2 pl-3 pr-9 hover:bg-gray-300" id="listbox-option-0"
      role="option">
      <div class="flex items-center">
        <svg viewBox="0 0 24 24" fill="none" class="w-6 h-6 mr-2">
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z"
            class="fill-transparent"></path>
          <path
            d="m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z"
            class="fill-slate-400 dark:fill-slate-500"></path>
          <path fill-rule="evenodd" clip-rule="evenodd"
            d="M17 3a1 1 0 0 1 1 1 2 2 0 0 0 2 2 1 1 0 1 1 0 2 2 2 0 0 0-2 2 1 1 0 1 1-2 0 2 2 0 0 0-2-2 1 1 0 1 1 0-2 2 2 0 0 0 2-2 1 1 0 0 1 1-1Z"
            class="fill-slate-400 dark:fill-slate-500"></path>
        </svg>

        <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
        <span class="font-normal ml-3 block truncate">Dark</span>
      </div>

      <span x-bind:class="localStorage.theme === 'dark' ? '' : 'hidden'"
        class="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4">
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd"
            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
            clip-rule="evenodd" />
        </svg>
      </span>
    </li>

    <li @click="
         depli = false;
         localStorage.theme = 'systeme';
         window.location.reload()"
      class="text-gray-900 relative cursor-default select-none py-2 pl-3 pr-9 hover:bg-gray-300" id="listbox-option-0"
      role="option">
      <div class="flex items-center">
        <svg viewBox="0 0 24 24" fill="none" class="w-6 h-6 mr-2">
          <path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Z" stroke-width="2"
            stroke-linejoin="round" class="stroke-slate-400 dark:stroke-slate-500"></path>
          <path d="M14 15c0 3 2 5 2 5H8s2-2 2-5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
            class="stroke-slate-400 dark:stroke-slate-500"></path>
        </svg>
        <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
        <span class="font-normal ml-3 block truncate">Systeme</span>
      </div>

      <span x-bind:class="localStorage.theme === 'systeme' ? '' : 'hidden'"
        class="text-indigo-600 absolute inset-y-0 right-0 flex items-center pr-4">
        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd"
            d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
            clip-rule="evenodd" />
        </svg>
      </span>
    </li>
  </ul>
</div>