DEV Community: devko

Aspect Ratio Calculator - A Versatile Tool for Precision Display Calculations

devko — Sat, 19 Oct 2024 13:35:00 +0000

The Aspect Ratio Calculator is a comprehensive, feature-packed utility designed for professionals across industries that require precision in display calculations.

Whether you’re a web designer, video editor, photographer, or developer working with digital media, this tool provides an intuitive interface and powerful features to simplify the task of determining width, height, and aspect ratios for any display size or resolution.

It’s perfect for use in responsive design, video editing, print preparation, and game streaming setups, offering both preset ratios and custom input options.

The calculator goes beyond just the basic ratio calculation, enabling users to lock dimensions, convert units, and get real-time feedback on the display's orientation and scale.

From managing pixel-perfect layouts to preparing media for different screen sizes, this tool is indispensable for achieving optimal results.

Comprehensive Features for Every User

Preset and Custom Aspect Ratios

Preset Ratios: The calculator includes popular, commonly used aspect ratios such as 16:9, 4:3, 1:1, and others frequently used in the media industry. These are ideal for setting up standard resolutions for HD, 4K, widescreen displays, and more.
Custom Aspect Ratios: Users can input any width-to-height ratio combination for non-standard display setups or projects requiring unique dimensions. This flexibility is especially useful for bespoke design needs, experimental media formats, or immersive screen setups like ultra-widescreen monitors.

Unit Conversion Between Pixels, Inches, and Centimeters:

Dynamic Unit Conversion: The tool seamlessly converts between units of measurement—Pixels (px), Inches (in), and Centimeters (cm)—allowing users to tailor their dimensions for both digital and physical displays. This is crucial when designing for cross-platform projects or preparing digital assets for print.
Automatic Scaling: Entering a width or height in one unit (e.g., pixels) automatically converts the corresponding dimension in the selected unit (e.g., inches or centimeters). This feature ensures users can instantly view how the same display ratio translates across different measurement units without manual recalculations.
Precision Conversion: The underlying conversion engine uses precise calculations (e.g., 1 inch = 96 pixels, 1 cm ≈ 37.79 pixels) to ensure that dimensions are accurately represented across different units.

Lockable Width or Height for Accurate Scaling:

Width or Height Locking: One of the most valuable features is the ability to lock either the width or height dimension while adjusting the other. This guarantees that the aspect ratio remains constant while you scale one dimension, eliminating the need for trial-and-error resizing.
Automatic Calculation: When one dimension is locked, the calculator automatically computes the other, ensuring perfect proportional scaling. This is especially useful when adapting a design for different screens without altering the aspect ratio.
Toggle Feature: The intuitive toggle system allows users to quickly lock or unlock dimensions with a single click. The locked dimension is highlighted for clarity, while the other dimension remains adjustable.

CSS

<style>
:root {
  --primary-color: #495057;
  --secondary-color: #adb5bd;
  --background-color: #f8f9fa;
  --border-color: #dee2e6;
  --text-color: #212529;
  --shadow-color: rgba(73, 80, 87, 0.1);
  --error-color: #e3342f;
  --hover-shadow-color: rgba(73, 80, 87, 0.2);
  --thumb-color: #495057;
}

.calculator-container {
  background-color: var(--background-color);
  padding: 30px 30px 30px 10px;
  border-radius: 12px;
  box-shadow: 0 0 20px var(--shadow-color);
  transition: background-color 0.3s;
}

.calculator-container .title {
  text-align: center;
  margin-bottom: 20px;
  color: var(--primary-color);
  font-size: 1.8em;
  font-weight: bold;
}

.calculator-container label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-color);
}

.calculator-container input,
.calculator-container select,
.calculator-container button {
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  font-size: 1em;
}

.calculator-container button {
  border: none;
  background-color: var(--primary-color);
  color: var(--background-color);
  cursor: pointer;
  margin-top: 10px;
  transition: background-color 0.3s;
}

.calculator-container button:hover {
  background-color: var(--secondary-color);
}

.calculator-container .flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 10px;
}

.calculator-container .flex-item {
  flex: 1 1;
  margin-top: 10px;
  margin-left: 20px;
}

.calculator-container .toggle-button {
  flex: 0 0 10%;
  text-align: center;
  background-color: var(--secondary-color);
  padding: 3px;
  border: 1px solid var(--border-color);
  cursor: pointer;
}

.calculator-container .flex-container input[type="number"] {
  flex: 1;
  padding: 5px;
  border: 1px solid var(--border-color);
}

.calculator-container .toggle-button.locked {
  background-color: var(--error-color);
}

.calculator-container .aspect-ratio-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: var(--shadow-color);
  border-radius: 10px;
  margin: 20px auto 0;
  padding: 20px;
}

.calculator-container .aspect-ratio-screen span {
  font-size: calc(0.8vw + 0.8vh);
  color: var(--text-color);
}

@media (max-width: 768px) {
  .calculator-container {
    padding: 15px;
  }

  .calculator-container .title {
    font-size: 1.5em;
  }

  .calculator-container .flex-item {
    flex: 1 1 100%;
    margin-left: 0;
  }

  .calculator-container .toggle-button {
    flex: 0 0 15%;
  }
}

@media (max-width: 480px) {
  .calculator-container {
    padding: 10px;
  }

  .calculator-container .title {
    font-size: 1.2em;
  }

  .calculator-container input,
  .calculator-container select,
  .calculator-container button {
    font-size: 0.9em;
  }

  .calculator-container .toggle-button {
    flex: 0 0 20%;
  }

  .calculator-container .aspect-ratio-screen {
    margin-top: 15px;
  }
}

footer {
  bottom: 0;
  width: 100%;
  background-color: var(--primary-color);
  color: #fff;
  padding: 5px 0px;
  text-align: center;
}

footer a {
  color: #fff;
  text-decoration: none;
}
</style>

Real-Time Visual Display of Aspect Ratio:

Live Aspect Ratio Preview: As users input dimensions or change ratios, the calculator provides a real-time visual preview of the calculated aspect ratio. This allows users to see exactly how their display will look when applied, ensuring an accurate representation of the final output.
Screen Orientation Detection: The tool also dynamically adjusts the description to indicate whether the aspect ratio is best suited for Landscape, Portrait, or Square orientations. This is crucial when designing for devices with specific orientation needs, such as mobile phones, monitors, or video displays.
Visual Scaling for Display Screens: A built-in visual element adjusts proportionally based on the aspect ratio and resolution, giving users an immediate sense of the screen's dimensions. This feature is designed to assist in understanding how the final resolution will appear on actual devices or screens.

HTML

<div class="calculator-container">
    <p class="title">Aspect Ratio Calculator</p>
    <div class="flex-container">
      <div class="flex-item"> <label for="presetRatios">Preset Ratios</label> <select id="presetRatios">
          <option value="16:9">16:9</option>
        </select> </div>
      <div class="flex-item"> <label for="unit">Units</label> <select id="unit">
          <option value="px">Pixels</option>
        </select> </div>
    </div>
    <div class="flex-container">
      <div class="flex-item"> <label for="ratioWidth">Ratio Width</label> <input type="number" min="1" id="ratioWidth" value="16"> </div>
      <div class="flex-item"> <label for="ratioHeight">Ratio Height</label> <input type="number" min="1" id="ratioHeight" value="9"> </div>
    </div>
    <div class="flex-container">
      <div class="flex-item"> <label for="pixelsWidth">Width <div style="display: inline-block;">(<span id="widthUnit">px</span>)</div></label>
        <div class="flex-container">
          <div class="toggle-button" id="toggleWidth">🔒</div> <input type="number" min="1" id="pixelsWidth" value="1280">
        </div>
      </div>
      <div class="flex-item"> <label for="pixelsHeight">Height <div style="display: inline-block;">(<span id="heightUnit">px</span>)</div></label>
        <div class="flex-container">
          <div class="toggle-button" id="toggleHeight">🔒</div> <input type="number" min="1" id="pixelsHeight" value="720">
        </div>
      </div>
    </div>
    <div class="flex-container"> <button class="flex-item" onclick="copyToClipboard()">Copy to Clipboard</button> <button class="flex-item" onclick="resetValues()">Reset</button> </div>
    <div style="padding: 0px 0px 0px 20px;">
      <div class="aspect-ratio-screen" id="aspectRatioScreen"> <span id="aspectRatioText">16:9</span> </div>
    </div>
  </div>

Clipboard Copy Functionality:

Instant Copying of Results: After calculating the aspect ratio and dimensions, users can quickly copy the calculated width and height values to their clipboard with a single click. This is highly efficient for those needing to transfer these values into other design software, coding environments, or documentation.
Format Flexibility: The copied content is formatted in a user-friendly way (e.g., 1280 x 720 px), making it easy to paste directly into design projects, spreadsheets, or code without further editing.

Responsive Design for Mobile and Desktop Use:

Mobile-Friendly Layout: Built with a responsive design, the Aspect Ratio Calculator adapts seamlessly to various screen sizes and devices. Whether you’re using a desktop, tablet, or smartphone, the calculator’s layout automatically adjusts for optimal usability, with larger buttons, input fields, and streamlined navigation on smaller screens.
Optimized for Touch and Click: The tool is designed to work equally well with mouse clicks or touch gestures, making it accessible on both traditional computers and mobile devices.

Reset Functionality:

Quick Reset: The calculator offers a one-click reset button that restores all inputs to their default values. This is perfect for users who want to start fresh without manually clearing each field, speeding up the workflow.
Default Presets Restoration: After resetting, the aspect ratio reverts to common defaults like 16:9, and the unit is reset to pixels, allowing users to begin new calculations quickly and easily.

SCRIPT

<script>
let currentUnit = "px";
    let lockWidth = false;
    let lockHeight = false;

    function calculateAspectRatio() {
      const ratioWidth = parseFloat(document.getElementById("ratioWidth").value);
      const ratioHeight = parseFloat(document.getElementById("ratioHeight").value);
      let pixelsWidth = parseFloat(document.getElementById("pixelsWidth").value);
      let pixelsHeight = parseFloat(document.getElementById("pixelsHeight").value);
      const updatedUnit = document.getElementById("unit").value;
      if (!ratioWidth || !ratioHeight) return;
      const aspectRatio = ratioWidth / ratioHeight;
      const conversionFactors = {
        px: {
          in: 1 / 96,
          cm: 1 / 37.79527559055118
        },
        in: {
          px: 96,
          cm: 2.54
        },
        cm: {
          px: 37.79527559055118,
          in: 1 / 2.54
        }
      };

      function convertUnits(value, fromUnit, toUnit) {
        if (fromUnit === toUnit) return value;
        return value * conversionFactors[fromUnit][toUnit];
      }
      if (lockHeight) {
        pixelsHeight = pixelsWidth / aspectRatio;
      } else if (lockWidth) {
        pixelsWidth = pixelsHeight * aspectRatio;
      } else if (document.activeElement.id === "pixelsWidth") {
        pixelsHeight = pixelsWidth / aspectRatio;
      } else if (document.activeElement.id === "pixelsHeight") {
        pixelsWidth = pixelsHeight * aspectRatio;
      }
      let convertedWidth = convertUnits(pixelsWidth, currentUnit, updatedUnit);
      let convertedHeight = convertUnits(pixelsHeight, currentUnit, updatedUnit);
      document.getElementById("pixelsWidth").value = convertedWidth;
      document.getElementById("pixelsHeight").value = convertedHeight;
      document.getElementById("widthUnit").innerHTML = updatedUnit;
      document.getElementById("heightUnit").innerHTML = updatedUnit;
      currentUnit = updatedUnit;
      const aspectRatioScreen = document.getElementById("aspectRatioScreen");
      const container = document.querySelector(".calculator-container");
      const containerWidth = (container.clientWidth - 80) / 2;
      const containerHeight = (container.clientHeight - 250) / 2;
      let screenWidth, screenHeight;
      if (aspectRatio > 1) {
        screenWidth = Math.min(containerWidth, containerHeight * aspectRatio);
        screenHeight = screenWidth / aspectRatio;
      } else {
        screenHeight = Math.min(containerHeight, containerWidth / aspectRatio);
        screenWidth = screenHeight * aspectRatio;
      }
      aspectRatioScreen.style.width = `${screenWidth}px`;
      aspectRatioScreen.style.height = `${screenHeight}px`;
      document.getElementById(
        "aspectRatioText"
      ).textContent = `${ratioWidth}:${ratioHeight}`;
      let orientationText = "";
      if (ratioWidth > ratioHeight) {
        orientationText = "Landscape";
      } else if (ratioWidth < ratioHeight) {
        orientationText = "Portrait";
      } else {
        orientationText = "Square";
      }
      document.getElementById(
        "aspectRatioText"
      ).textContent = `${ratioWidth}:${ratioHeight} (${orientationText})`;
    }

    function resetValues() {
      document.getElementById("presetRatios").value = "16:9";
      document.getElementById("unit").value = "px";
      document.getElementById("ratioWidth").value = 16;
      document.getElementById("ratioHeight").value = 9;
      document.getElementById("pixelsWidth").value = 1280;
      document.getElementById("pixelsHeight").value = 720;
      document.getElementById("widthUnit").innerHTML = "px";
      document.getElementById("heightUnit").innerHTML = "px";
      currentUnit = "px";
      lockWidth = false;
      lockHeight = false;
      document.getElementById("toggleWidth").classList.remove("locked");
      document.getElementById("toggleHeight").classList.remove("locked");
      calculateAspectRatio();
    }
    document.getElementById("presetRatios").addEventListener("change", function() {
      const [width, height] = this.value.split(":").map(Number);
      document.getElementById("ratioWidth").value = width;
      document.getElementById("ratioHeight").value = height;
      calculateAspectRatio();
    });
    document
      .getElementById("presetRatios")
      .addEventListener("change", calculateAspectRatio);
    document
      .getElementById("ratioWidth")
      .addEventListener("change", calculateAspectRatio);
    document
      .getElementById("ratioHeight")
      .addEventListener("change", calculateAspectRatio);
    document
      .getElementById("pixelsWidth")
      .addEventListener("input", calculateAspectRatio);
    document
      .getElementById("pixelsHeight")
      .addEventListener("input", calculateAspectRatio);
    document.getElementById("unit").addEventListener("change", function() {
      let unit = this.value;
      let pixelsWidth = parseFloat(document.getElementById("pixelsWidth").value);
      document.getElementById("widthUnit").innerHTML = unit;
      document.getElementById("heightUnit").innerHTML = unit;
      calculateAspectRatio();
    });

    function toggleLock(event) {
      if (event.target.id === "toggleWidth") {
        if (lockHeight) {
          lockHeight = false;
          document.getElementById("toggleHeight").classList.remove("locked");
        }
        lockWidth = !lockWidth;
        document
          .getElementById("toggleWidth")
          .classList.toggle("locked", lockWidth);
      } else if (event.target.id === "toggleHeight") {
        if (lockWidth) {
          lockWidth = false;
          document.getElementById("toggleWidth").classList.remove("locked");
        }
        lockHeight = !lockHeight;
        document
          .getElementById("toggleHeight")
          .classList.toggle("locked", lockHeight);
      }
      calculateAspectRatio();
    }
    document.getElementById("toggleWidth").addEventListener("click", toggleLock);
    document.getElementById("toggleHeight").addEventListener("click", toggleLock);

    function copyToClipboard() {
      const pixelsHeight = document.getElementById("pixelsHeight").value;
      const pixelsWidth = document.getElementById("pixelsWidth").value;
      const content = pixelsWidth + " X " + pixelsHeight;
      navigator.clipboard.writeText(content).then(() => {
        alert("Copied to clipboard: " + content);
      });
    }
    calculateAspectRatio();
</script>

Build a Simple Game to Practice Drag Clicking | Minecraft | HTML | CSS | JAVASCRIPT

devko — Sun, 09 May 2021 11:21:21 +0000

Drag clicking is one of the most commonly used techniques by the Minecraft gaming community. Unlike the traditional clicking, this technique helps to get an immense amount of clicks which can lead you so far in the Minecraft game. In simple words, if you want to dominate in Minecraft PVP game mode, you need to be good at clicking with your mouse. This simple Drag Clicking Test allows the users to test how good they are at drag clicking and enables them to get to know about their standings.

Rules of this Game

This game is simple and easy to use there are no complex rules, to be honest. You just have to use your mouse to perform drag clicking on this game which will eventually get you results there are few limitations in this games such as:
Users can select a time limit ranging from 1 second up to 10 seconds.
Users have to click on the dedicated area in order to get their clicks registered.

Features of this Game

There are plenty of features that make this game stand out one of the Core features of this game is that it is quite simple and easy to use anybody can simply use it without any hassle some of the key features are listed below:
It shows the remaining time.
If it shows the real-time CPS score.
Users can opt for light and dark modes as per their comfort level.

A Video Guide to Drag Clicking

If you are relatively new to drag clicking or you are not that much familiar with drag clicking or simply you want to know how to perform drag clicks while aiming in a better or most efficient way you can follow this video link to a YouTube video further enhance your skills to reach the god level OR simply follow this video to learn basic drag clicking on any mouse.

Complete Source Code of this Game

Here is a complete source code of the drag click test game don't just copy this game and use it as per your requirements but I will encourage you guys to take this project as a starter and amend it as per your needs and your vacation in order to excel in your programming skills.

HTML

<button id="click"></button>
<div id="textDiv">
   <p id="cps">0</p>
   <p id="timeRemaining">0</p>
   <p id="clickCount"></p>
  <p id="allTime" title="Double click to reset"></p>
</div>
<div id="slider-container">
  <label id="time" for="timeSlider">2</label>
  <input type="range" min="1" max="10" id="timeSlider" value="2">
  <input type="checkbox" id="darkTheme">
  <label for="darkTheme">Dark Theme</label>
</div>

CSS

body {
  --bg-color: white;
  --text-color: black;
  --click-color: rgb(235,235,235);
  --shadow-color: rgb(190,190,190);

  background-color: var(--bg-color);
  color: var(--text-color);
  overflow: hidden;
}


#click {
  background-color: var(--click-color);
  width: 80vh;
  height:80vh;
  border-radius:50%;
  box-shadow:0 0 20px var(--shadow-color);
  position:relative;
  border: none;
  font-size:1em;
}
#click.play-again::after {
  content: "Click me to play again!";
}
#click:active {
  box-shadow:-1px -1px 20px var(--shadow-color);
}
#click:active::after {
  color: white;
}
#click::after {
  content: "Click Me!";
  position: absolute;
  top:35vh;
  left:0;
  text-align: center;
  width:80vh;
  font-size: 1.5em;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  flex-wrap: wrap;
}
html,body{
  height:100%;
}

#textDiv {
  font-size:1.2em;
  margin-left: 5em;
  width:20vw;
}
#clickCount::before {
  content: "Total Clicks: ";
}
#cps {
  font-size: 2em;
}
#cps::after {
  content: " cps";
  font-size: 0.6em;
}
#timeRemaining::before {
  content: "Time Remaining: ";
}
#slider-container {
  width:100vw;
}
#timeSlider {
  width: 10%;
}
#time::after {
  content: " seconds";
}
.single::after {
  content: " second" !important;
}
#time {
  text-align: center;
  width:10%;
  display: block;
}


label {
  vertical-align: middle;
}


#allTime::before {
  content: "All Time: ";
}




/* Input type=range styles from range.css */
input[type=range] {
  width: 100%;
  margin: 7.1px 0;
  background-color: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: #27466b;
  border: 0;
  border-radius: 5.4px;
  width: 100%;
  height: 10.8px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: -7.1px;
  width: 25px;
  height: 25px;
  background: rgba(28, 83, 255, 0.93);
  border: 2.9px solid #1812ff;
  border-radius: 29px;
  cursor: pointer;
  -webkit-appearance: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #2e527e;
}
input[type=range]::-moz-range-track {
  background: #27466b;
  border: 0;
  border-radius: 5.4px;
  width: 100%;
  height: 10.8px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: rgba(28, 83, 255, 0.93);
  border: 2.9px solid #1812ff;
  border-radius: 29px;
  cursor: pointer;
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 8.9px 0;
  color: transparent;
  width: 100%;
  height: 10.8px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: #203a58;
  border: 0;
  border-radius: 10.8px;
}
input[type=range]::-ms-fill-upper {
  background: #27466b;
  border: 0;
  border-radius: 10.8px;
}
input[type=range]::-ms-thumb {
  width: 25px;
  height: 25px;
  background: rgba(28, 83, 255, 0.93);
  border: 2.9px solid #1812ff;
  border-radius: 29px;
  cursor: pointer;
  margin-top: 0px;
  /*Needed to keep the Edge thumb centred*/
}
input[type=range]:focus::-ms-fill-lower {
  background: #27466b;
}
input[type=range]:focus::-ms-fill-upper {
  background: #2e527e;
}
/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
  /* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
  input[type=range] {
    margin: 0;
    /*Edge starts the margin from the thumb, not the track as other browsers do*/
  }
}

JAVASCRIPT

const click = document.getElementById("click");
const clickCountP = document.getElementById("clickCount");
let clickCount = 0;
const cps = document.getElementById("cps");
const timeRemaining = document.getElementById("timeRemaining");

const timeSlider = document.getElementById("timeSlider");
const timeText = document.getElementById("time");

timeSlider.oninput = ()=>{
  timeText.innerText = timeSlider.value;
  time = timeSlider.value;
  if(time == 1) {
    timeText.classList.add("single");
  } else if(timeText.classList.contains("single")) {
    timeText.classList.remove("single");
  }
}

let time = timeSlider.value;

let startTime = null;
const allTime = document.getElementById("allTime");
allTime.ondblclick = ()=>{
  localStorage.removeItem("all-time");
  updateAllTime(0);
}
const updateAllTime = (newScore)=>{
  console.log(newScore, Number(localStorage.getItem("all-time")));
  if(newScore > Number(localStorage.getItem("all-time"))) {
    localStorage.setItem("all-time", newScore.toString());
  }
  allTime.textContent = localStorage.getItem("all-time") || 0;
}
updateAllTime(0);

const showClicks = ()=>{
  clickCountP.innerText = clickCount;
}

showClicks();
const animFunc = ()=>{
  const elapsed = (Date.now() - startTime) * 0.001;
   if(elapsed < time) {
      cps.innerText = Math.round((clickCount / elapsed) * 10) / 10;
      timeRemaining.innerText = (time - elapsed).toFixed(2);
      window.requestAnimationFrame(animFunc);
   } else {
     click.disabled = true;
     cps.innerText = Math.round((clickCount / time) * 10) / 10;
     timeRemaining.innerText = 0;
     updateAllTime(Number(cps.innerText));
     cps.innerText = "Result: "+cps.innerText;
     startTime = null;
     click.classList.add("play-again");     
     setTimeout(()=>{
       click.disabled = false;
     }, 1000);
   }
 }
const clickHandler = ()=>{
   if(!startTime) {
     startTime = Date.now();
     window.requestAnimationFrame(animFunc);
     clickCount = 0;
     click.classList.remove("play-again");
   }
   clickCount++;
   showClicks();
}

click.addEventListener("mousedown", (event)=>{
  if(event.button == 0) {
    clickHandler();
  }
});
click.addEventListener("contextmenu", (event)=>{
  event.preventDefault();
  clickHandler();
});

const darkTheme = document.getElementById("darkTheme");
const isDarkTheme = localStorage.getItem("dark-theme") === "true";
darkThemeIfy.bind({checked: isDarkTheme})();
darkTheme.checked = isDarkTheme;

darkTheme.oninput = darkThemeIfy;

function darkThemeIfy() {
  if(this.checked) {
    document.body.style.setProperty("--bg-color", "black");
    document.body.style.setProperty("--text-color", "white");
    document.body.style.setProperty("--click-color", "rgb(180,180,180)");
    document.body.style.setProperty("--shadow-color", "white");
    localStorage.setItem("dark-theme", "true");
  } else {
    document.body.style.setProperty("--bg-color", "");
    document.body.style.setProperty("--click-color", "");
    document.body.style.setProperty("--text-color", "");
    document.body.style.setProperty("--shadow-color", "");
    localStorage.setItem("dark-theme", "false");
  }
}