Commit e0f3d03f authored by TheTechRobo's avatar TheTechRobo
Browse files

Use CSS media queries to enable dark mode rather than JavaScript 

Fixes #78
parent 97c3e4cc

static/dark.svg

deleted100644 → 0
+0 −16
Original line number Diff line number Diff line 
<?xml version="1.0" encoding="UTF-8"?>

<svg viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg">

 <g fill-rule="evenodd">

  <path d="m371.97 312.16c-18.111-18.288-119.49-78.851-148.1-79.784-31.52 2.4782-149.42 75.629-162.79 75.564 6.3304-29.776 47.61-45.055 65.085-81.826-69.744-5.8226-112.65-85.187-117.14-88.391 8.5434 0.7767 114.3 0.22121 106.91-7.0337-15.448-7.7241-80.18-82.533-77.371-84.405 14.431 11.807 136.8 35.136 142.08 36.576 1.1286-12.414 46.192-68.177 47.83-73.634 9.0508 27.939 37.249 73.617 42.203 76.447 6.9387-3.965 94.123-61.897 102.69-61.897 8.5456-3.2046-63.176 94.855-71.744 108.32-2.0297 3.8339 5.6539 3.3092 11.254 0 22.406-5.272 84.596-27.206 99.879-30.949-3.5683 2.0391-68.298 96.311-70.338 99.88-24.427 12.453 23.446 78.778 29.542 111.13z" stroke-width="6.25"/>

  <path d="m336.35 198.25c0 43.196-58.957 87.542-57.622 133.74 1.5848 56.506-31.446 92.127-60.344 91.304-47.427 0-56.289-33.975-56.92-88.628-0.5414-45.526-62.314-98.843-62.314-142.04 0-86.392 54.994-126.65 120.84-126.65 65.851 0 116.35 45.88 116.35 132.27z" fill="#fff"/>

  <path d="m181.24 398.28c8.0103 1.6234 49.415 4.7323 70.517 0.25598-5.4886 4.0158-20.975 19.794-35.587 18.8-9.9537-0.21631-30.592-11.906-34.93-19.056z"/>

  <path d="m189.51 344.44c7.474-2.8152 47.861-18.018 66.247-24.953 13.752-4.4314 9.3938-22.672-6.6619-17.687-19.365 7.294-55.036 20.73-69.305 26.105-5.8338 2.1973-3.6327 21.519 9.7196 16.535z" fill="none" stroke="#000" stroke-width="1.046"/>

  <path d="m255.06 390.81c13.752-7.7506 15.021-40.883-1.0349-32.165-19.365 12.757-46.581 30.168-60.85 39.568 9.087 2.103 43.498 4.7255 61.885-7.4038z" stroke="#fcfcfc" stroke-width="7.535"/>

  <path d="m322.53 194.36c0 38.677-52.059 78.383-50.88 119.74 1.3993 50.594-102.99 51.331-103.54 2.3959-0.4782-40.763-55.024-88.502-55.024-127.18 0-77.354 48.56-113.4 106.71-113.4 58.146 0 102.74 41.08 102.74 118.43z"/>

  <g stroke-width="8.266">

   <path d="m192.62 388.93c7.474-4.9239 47.861-31.514 66.247-43.643 13.752-7.7506 9.3938-39.653-6.6619-30.935-19.365 12.757-55.036 36.258-69.305 45.658-5.8338 3.8431-3.6327 37.637 9.7196 28.92z" stroke="#fcfcfc"/>

   <path d="m185.97 352.52c7.474-4.9238 27.469-19.335 45.856-31.465 13.752-7.7506-41.306-6.8555-55.575 2.5446-5.8338 3.8431-3.6327 37.638 9.7196 28.92z" stroke="#fcf9f9"/>

  </g>

  <path d="m281.97 149.44c0 20.156-13.632 36.514-30.429 36.514s-10.143-16.358-10.143-36.514-6.6538-36.514 10.143-36.514 30.429 16.358 30.429 36.514z" fill="#fff" stroke-width="1.25"/>

 </g>

</svg>

static/darkmode.js

deleted100644 → 0
+0 −44
Original line number Diff line number Diff line 
const DARKNESS = {

    "html": "dark"

}



function toggleDarkness() {

    if (localStorage.getItem("dark")) {

        console.log("MODE = DARK");

        lightMode();

    } else {

        console.log("MODE != DARK");

        darkMode();

    }

}



function lightMode() {

    for (const [key, value] of Object.entries(DARKNESS)) {

        document.querySelectorAll(key).forEach((e) => e.classList.remove(value));

    }

    try {

        localStorage.removeItem("dark");

    } catch (e) {

        alert("Could not save preference!");

    }

}



function darkMode() {

    for (const [key, value] of Object.entries(DARKNESS)) {

        document.querySelectorAll(key).forEach((e) => e.classList.add(value));

    }

    try {

        localStorage.setItem("dark", true);

    } catch (e) {

        alert("Could not save preference!");

    }

}



function initDarkMode() {

    if (localStorage.getItem("dark")) {

        darkMode();

        console.log("DarkModeSetup");

    }

}



console.log(localStorage.getItem("dark"));
 
 No newline at end of file

static/styles.css

+27 −29
Original line number Diff line number Diff line
@@ -106,33 +106,30 @@ p { 


/* Dark Mode Adjustments */



html.dark, html.dark body, html.dark input {

@media (prefers-color-scheme: dark) {

  html, body, input {

    color: rgb(203 213 225) !important;

    background-color: #1d243d !important;

  }



html.dark #theme-select {

  filter: invert(100%);

}



html.dark button {

  button {

    background-color: rgba(50, 50, 50) !important;

    color: rgb(203 213 225);

  }



html.dark #input-section {

  #input-section {

    background-image: linear-gradient(#0e1323, #2e1323) !important;

  }



html.dark a {

  a {

    color: orange;

  }



html.dark a:visited {

  a:visited {

    color: red;

  }



html.dark code {

  code {

    background-color: darkblue;

    color: lightgreen;

  }
@@ -140,3 +137,4 @@ html.dark code { 
  details > summary {

    display: list-item;

  }

}
 
 No newline at end of file

templates/api.j2

+1 −7
Original line number Diff line number Diff line
@@ -9,16 +9,10 @@ 
    <link href="/static/normalize.css" rel="stylesheet">

    <link href="/static/skeleton.css" rel="stylesheet">

    <link href="/static/styles.css" rel="stylesheet">

    <script src="/static/darkmode.js" type="text/javascript"></script>

</head>

<body>

<div class="container" id="header-section">

    <h4>

        YouTube Video Finder

        <span id="theme-select" onclick="toggleDarkness()" title="Toggle Dark Mode" style="float:right;">

            <img src="/static/dark.svg" alt="">

        </span>

    </h4>

    <h4>YouTube Video Finder</h4>

    <p>

        Search several resources for archived YouTube video and metadata

    </p>

templates/index.j2

+1 −7
Original line number Diff line number Diff line
@@ -9,7 +9,6 @@ 
    <link href="/static/normalize.css" rel="stylesheet">

    <link href="/static/skeleton.css" rel="stylesheet">

    <link href="/static/styles.css" rel="stylesheet">

    <script src="/static/darkmode.js" type="text/javascript"></script>

    <script src="/static/script.js" type="text/javascript"></script>

    <script defer data-domain="findyoutubevideo.thetechrobo.ca" src="https://analytic.thetechrobo.ca/js/script.tagged-events.js"></script>

    <script>
@@ -20,12 +19,7 @@ 
</head>

<body>

<div class="container" id="header-section">

    <h4>

        YouTube Video Finder

        <span id="theme-select" onclick="toggleDarkness()" title="Toggle Dark Mode" style="float:right;">

            <img src="/static/dark.svg" alt="">

        </span>

    </h4>

    <h4>YouTube Video Finder</h4>

    <p>

        Search several resources for archived YouTube video and metadata

    </p>