Skip to content

Instantly share code, notes, and snippets.

@C0D4-101

C0D4-101/dark.css

Created June 4, 2020 11:18
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save C0D4-101/15fba8c327212ac6df2f3d7fcaebbcd6 to your computer and use it in GitHub Desktop.
Save C0D4-101/15fba8c327212ac6df2f3d7fcaebbcd6 to your computer and use it in GitHub Desktop.
Download ZIP
theme changer
Raw
dark.css
.content {
background-color: darkblue;
color: white;
}
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme Changer</title>
<link href="structure.css" rel="stylesheet" type="text/css" />
<link href="light.css" rel="stylesheet" type="text/css" id="lightTheme" />
<link href="dark.css" rel="stylesheet" type="text/css" id="darkTheme" />
</head>
<body class="light">
<div class="content">
<div class="heading">
<h1>Hello</h1>
<p>Content goes here</p>
<button id="themeChanger">Change Theme</button>
</div>
</div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
Raw
light.css
.content {
background-color: lightblue;
color: black;
}
Raw
main.js
document.getElementById('themeChanger').addEventListener('click', e => {
let body = document.getElementsByTagName('body')[0];
let currentTheme = body.className;
if (currentTheme == "light") {
body.className = "dark";
document.getElementById('lightTheme').setAttribute('disabled', "true");
document.getElementById('darkTheme').removeAttribute('disabled');
} else {
body.className = "light";
document.getElementById('lightTheme').removeAttribute('disabled');
document.getElementById('darkTheme').setAttribute('disabled', "true");
}
});
Raw
structure.css
.heading {
text-align: center;
}
.content {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment