JSFiddle - React, Tailwind, and code Playground

by Mike Gifford

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<html>
<head>
 <title>USWDS SVGs with Dark Mode Support</title>
</head>
<body>

<section class="active">

    <h1>
    <span class="lightmode">Light</span>
    <span class="darkmode">Dark</span> 
    <span>Mode</span>
    </h1>

ngle-arrow-down-gray-90.svg
angle-arrow-down-hover.svg
angle-arrow-down-primary-hover.svg
angle-arrow-down-primary.svg
angle-arrow-down-white.svg
angle-arrow-down.svg
angle-arrow-right-white.svg
angle-arrow-right.svg
angle-arrow-up-primary-hover.svg
angle-arrow-up-primary.svg
angle-arrow-up-white.svg
angle-double-left-solid.svg
angle-double-right-solid.svg
angle-left-solid.svg
angle-right-solid.svg
arrow-both.svg
arrow-down-gray-60.svg
arrow-down.svg
arrow-left-indigo-cool-50v.svg
arrow-left-white.svg
arrow-left.svg
arrow-right.svg
calendar-alt-solid.svg
checkbox-check-print.svg
chevron-right-white.svg
chevron-right.svg
chevron-white.svg
chevron.svg
circle-gray-20.svg
close-alt-blue-60v.svg
close-alt.svg
close-blue-30-alt.svg
close-blue-40v-alt.svg
close-blue-50-alt.svg
close-blue-50v-alt.svg
close-blue-60-alt.svg
close-blue-60v-alt.svg
close-gray-60.svg
close-gray-90-alt.svg
close-primary.svg
close-white-alt.svg
close-white.svg
close.svg
correct8-alt.svg
correct8.svg
correct9.svg
external-link-alt-hover.svg
external-link-alt.svg
external-link-hover.svg
external-link.svg
file-excel.svg
file-pdf.svg
file-video.svg
file-word.svg
file.svg
icon-dot-gov.svg
icon-https.svg
loader.svg
lock.svg
minus-alt.svg
minus.svg
plus-alt.svg
plus.svg
search-alt.svg
search-primary.svg
search.svg
sprite.svg






</section>

  <ul>
   <li>
    <span>Toggle</span>
    <span class="lightmode">Dark</span>
    <span class="darkmode">Light</span> 
    <span>Mode</span>
   </li>
  </ul>
  
</body>
</html>

CSS

:root {
  --color: rgb(5, 5, 5);
  --background-color: rgb(250, 250, 250);
}


@media (prefers-color-scheme:dark) {
  :root {
    --color: rgb(250, 250, 250);
    --background-color: rgb(5, 5, 5);
  }

  .darkmode {
    color: var(--color);
    background-color: var(--background-color);
  }

  .lightmode {
    display: none;
  }

}

body {
  color: var(--color);
  background-color: var(--background-color);
}

@media (prefers-color-scheme:light) {
  .darkmode {
    display: none;
  }

  .lightmode {
    color: var(--color);
    background-color: var(--background-color);
  }
}

JavaScript

$(document).ready(function(){
   $('ul').click(function(){
    $('ul').toggleClass('active')
    $('section').toggleClass('dark')
   })
  })