Skip to content

Instantly share code, notes, and snippets.

@slxny

slxny/darkmode.html

Created May 18, 2021 19:36
Show Gist options
  • Save slxny/86bc133b86b56a56c7c49939fe10b439 to your computer and use it in GitHub Desktop.
Save slxny/86bc133b86b56a56c7c49939fe10b439 to your computer and use it in GitHub Desktop.
Download ZIP
dark mode UI html
Raw
darkmode.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<header>Settings</header>
</head>
<body>
<link rel="stylesheet" href="style.css">
<div class="grid-container">
<div class="box1" id="box1">
<div class="head2">Weight</div>
<div class="head">Typeface</div>
<div class="head3">Size</div>
<div class="head4">Color</div>
<div class="head5">Dark UI</div>
<input type="text" class="dropdown" name="example" list="exampleList">
<datalist id="exampleList">
<option value="Acunium Pro">
<option value="Comic Sans">
</datalist>
<div class="checkbox">
<label class="container">Regular
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Bold
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="range-slider">
<input class="range-slider__range" type="range" value="100" min="0" max="500">
<span class="range-slider__value">a</span>
</div>
<!-- <label class="color">
<input type="radio" checked="checked" name="radio">
<span class="checkmark1"></span>
</label>
<label class="color2">
<input type="radio" name="radio">
<span class="checkmark"></span>
</label> -->
<label class="color">
<input type="checkbox" checked="checked">
<span class="checkmark" id="chk1"></span>
</label>
<label class="color2">
<input type="checkbox" checked="checked">
<span class="checkmark" id="chk2"></span>
</label>
<label class="color3">
<input type="checkbox" checked="checked">
<span class="checkmark" id="chk3"></span>
</label>
<label class="color4">
<input type="checkbox" checked="checked">
<span class="checkmark" id="chk4"></span>
</label>
<label class="color5">
<input type="checkbox" checked="checked">
<span class="checkmark" id="chk5"></span>
</label>
<label class="switch">
<input type="checkbox" onclick="myFunction()" checked>
<span class="slider round"></span>
</label>
<script>
function myFunction() {
var element = document.getElementById("box1");
element.classList.toggle("dark-mode");
}
</script>
</div>
<div class="flex-container">
<div class="flex-item1 hvr-grow">
<img src="assets/images/artistic-brush.png">
</div>
<div class="flex-item2 hvr-grow">
<img src="assets/images/computer-screen.png">
</div>
<div class="flex-item3 hvr-grow">
<img src="assets/images/sms-speech-bubble.png">
</div>
<div class="flex-item4 hvr-grow"><img src="assets/images/user-icon.png"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment