This write-up will help you to add multiple colour themes at once if you are using DaisyUI (a tailwind library)

First: Add tailwind & daisyUI CDN to your code at HTML head tag

<link href="<https://cdn.jsdelivr.net/npm/daisyui@2.29.0/dist/full.css>" rel="stylesheet" type="text/css" />
<script src="<https://cdn.tailwindcss.com>"></script>

Second: Add daisyUI theme changer CDN at HTML head tag

<!-- theme changer  -->
    <html data-theme="dark"></html>
    <script src="<https://cdn.jsdelivr.net/npm/theme-change@2.0.2/index.js>"></script>

Third: Place menu bar at HTML body to select themes (this example will place menu bar to upper-right corner)

<!-- theme changer menu -->
    <select class="theme" data-choose-theme>
      <option value="dark">Dark</option>
      <option value="cyberpunk">Cyberpunk</option>
      <option value="retro">Retro</option>
      <option value="cupcake">Cupcake</option>
      <option value="light">Light</option>
      <option value="fantasy">Fantasy</option>
      <option value="wireframe">Wireframe</option>
      <option value="coffee">Coffee</option>
      <option value="valentine">Valentine</option>
      <option value="aqua">Aqua</option>
      <option value="forest">Foerest</option>
      <option value="halloween">Halloween</option>
      <option value="lofi">Lofi</option>
      <option value="lemonade">Lemonade</option>
    </select>

Fourth: Add styles

<---------css-------->

  :root {
    --my-color: #fff;
    /* or any other variables/style */
  }
  [data-theme='dark'] {
    --my-color: #000;
  }
  [data-theme='retro'] {
    --my-color: rgba(247, 249, 223, 0.998);
  }
  
  [data-theme='cyberpunk'] {
    --my-color: #cadb12;
  }
  [data-theme='coffee'] {
    --my-color: #2d2222;
  }
  [data-theme='halloween'] {
    --my-color: #0f0e0ed1;
  }
  [data-theme='forest'] {
    --my-color: #1c1515;
  }
  [data-theme='valentine'] {
    --my-color: #deb9b9;
  }
  [data-theme='aqua'] {
    --my-color: #236dc1;
  }

  /* daisyUI  theme */

  html {
    background-color: var(--my-color);
  }

  .theme{
    /* float: end; */
    background-color: var(--my-color);
    /* color: var(--my-color); */
    border: none;
    border-radius: 50%;
    /* box-shadow: 12px 12px 24px #3ABFF8; */
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    outline: outset;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    margin: 10px;

  }

  .theme opiton{
    background-color: var(--my-color);
    color: var(--my-color);
  }

Done. Keep Rocking. If you like it, then rate us😊

https://9u3e977i8wd.typeform.com/to/B9mOgUOl

This write-up will help you to add multiple colour themes at once if you are using DaisyUI (a tailwind library)

For React only