Dark Mode Experiments

by Mike Gifford

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<html>

  <head>
    <title>Dark and Light SVG</title>
  </head>

  <body>
    <section class="active">
      <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" role="img">
        <title>Expand less</title>
        <style>
          path {
            fill: currentColor;
          }

        </style>
        <g>
          <path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" />
        </g>
      </svg>

      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
        <title>Add</title>
        <style>
          path {
            fill: currentColor;
          }

        </style>
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
      </svg>


      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
        <title>Remove</title>
        <style>
          path {
            fill: currentColor;
          }

        </style>
        <path d="M19 13H5v-2h14v2z" />
      </svg>

      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
        <title>Close</title>
        <style>
          path {
            fill: currentColor;
          }

        </style>
        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
      </svg>

      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
        <title>Add</title>
        <style>
          path {
            fill: currentColor;
          }

        </style>
        <path d="M19 13H5v-2h14v2z" />
      </svg>


      <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24" role="img">
        <title>Expand more</title>
        <style>
          path {
            fill: currentColor;
          }

        </style>
        <g>
          <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" />
       ...

CSS

body{
    background-color: #70e17b;
    color: #154c21;
  }
@media (prefers-color-scheme: dark) {
  body{
    background-color: #154c21;
    color: #70e17b;
  }
}

JavaScript

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