ndf-elements/src/templates/my-user-theme-switch.tpl.html

My collection of useful custom elements.

<meta name="color-scheme" content="dark light">

<template>
  <style>
  * {
    transition: all 150ms;
  }

  .dark-mode-toggler {
    border: 2px solid var(--my-stroke-color, pink);
    border-radius: .2rem;
    display: inline-block;
  }
  .dark-mode-toggler button {
    border: none;
    border-radius: 0;
    cursor: pointer;
    font: inherit;
    padding: .6rem 1rem;
    outline-offset: .3rem;
    min-width: 4rem;
  }
  .layout-compact button {
    padding: .1rem .5rem;
  }
  .dark-mode-toggler button:after {
    content: ' '; /* &nbsp; */
    display: inline-block;
    min-width: .5rem;
  }
  .dark-mode-toggler [ aria-pressed = true  ] {
    background: var(--my-stroke-color, pink);
    color: #111;
  }
  .dark-mode-toggler [ aria-pressed = true  ]:after {
    content: '*';
  }
  </style>

  <span class="dark-mode-toggler">
    <button
      data-theme="light" aria-pressed="false"
      >Light
    </button><button
      data-theme="dark" aria-pressed="false"
      >Dark
    </button>
  </span>
</template>


<template id="style">
  <style id="my-user-theme-styles">
  :root {
    X-color-scheme: light dark; /* both supported */
  }

  [ data-my-user-theme = light ] {
    --my-bg-color: #fdfdfd;
    --my-text-color: #333;
    --my-link-color: blue;
    --my-stroke-color: darkorange;
  }

  [ data-my-user-theme = dark ] {
    --my-bg-color: #222;
    --my-text-color: #fff;
    --my-link-color: #adf; /* lightblue */
    --my-stroke-color: orange; /* pink */
  }

  body {
    background-color: var(--my-bg-color);
    color: var(--my-text-color);
  }

  a {
    color: var(--my-link-color);
    text-decoration: var(--my-stroke-color) underline 1px;
    /* text-decoration: orange wavy underline 3px; */
  }

  /* @media (prefers-color-scheme: dark) {
    body {
      background-color: #333;
      color: #fff;
    }
    a {
      color: lightblue;
    }
  } */
  </style>
</template>