Skip to content

Instantly share code, notes, and snippets.

@germancutraro

germancutraro/darkTheme.html

Last active August 31, 2018 19:10
Show Gist options
  • Save germancutraro/fc334ffeeb50d6ba9692505ad0edaf7b to your computer and use it in GitHub Desktop.
Save germancutraro/fc334ffeeb50d6ba9692505ad0edaf7b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
darkTheme.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
:root {
--circle: 5px;
--background: #fff;
--text: #000;
--border-toggle: #000;
--circle-background: #000;
}
body {
background-color: var(--background);
color: var(--text);
transition: .8s;
font-family: 'Montserrat', sans-serif;
}
.text {
font-weight: 100;
}
body.dark {
--border-toggle: #fff;
--circle-background: #fff;
--background: #282A36;
--text: #fff;
color: var(--text);
background-color: var(--background);
}
.toggle-wrapper {
height: 23px;
width: 46px;
border-radius: 20px;
border: 2px solid var(--border-toggle);
position: relative;
}
.toggle-wrapper::before {
content: "";
display: block;
width: 15px;
height: 15px;
background-color: var(--circle-background);
border-radius: 100%;
position:absolute;
top: 3.5px;
left: var(--circle);
transition: .5s;
}
</style>
</head>
<body class="light">
<div class="toggle-wrapper" id="toggle">
</div>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, tenetur distinctio repellendus libero, nostrum magnam debitis beatae ducimus blanditiis consequatur?</p>
<script id="jsbin-javascript">
const toggle = document.getElementById('toggle');
let x = false;
toggle.addEventListener('click', e => {
if (!x) {
document.documentElement.style.setProperty('--circle', '25px');
document.body.classList.add('dark');
x = true;
} else {
document.documentElement.style.setProperty('--circle', '5px');
document.body.classList.remove('dark')
x = false;
}
});
</script>
<script id="jsbin-source-css" type="text/css">:root {
--circle: 5px;
--background: #fff;
--text: #000;
--border-toggle: #000;
--circle-background: #000;
}
body {
background-color: var(--background);
color: var(--text);
transition: .8s;
font-family: 'Montserrat', sans-serif;
}
.text {
font-weight: 100;
}
body.dark {
--border-toggle: #fff;
--circle-background: #fff;
--background: #282A36;
--text: #fff;
color: var(--text);
background-color: var(--background);
}
.toggle-wrapper {
height: 23px;
width: 46px;
border-radius: 20px;
border: 2px solid var(--border-toggle);
position: relative;
}
.toggle-wrapper::before {
content: "";
display: block;
width: 15px;
height: 15px;
background-color: var(--circle-background);
border-radius: 100%;
position:absolute;
top: 3.5px;
left: var(--circle);
transition: .5s;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">const toggle = document.getElementById('toggle');
let x = false;
toggle.addEventListener('click', e => {
if (!x) {
document.documentElement.style.setProperty('--circle', '25px');
document.body.classList.add('dark');
x = true;
} else {
document.documentElement.style.setProperty('--circle', '5px');
document.body.classList.remove('dark')
x = false;
}
});
</script></body>
</html>
Raw
jsbin.viqodonowi.css
:root {
--circle: 5px;
--background: #fff;
--text: #000;
--border-toggle: #000;
--circle-background: #000;
}
body {
background-color: var(--background);
color: var(--text);
transition: .8s;
font-family: 'Montserrat', sans-serif;
}
.text {
font-weight: 100;
}
body.dark {
--border-toggle: #fff;
--circle-background: #fff;
--background: #282A36;
--text: #fff;
color: var(--text);
background-color: var(--background);
}
.toggle-wrapper {
height: 23px;
width: 46px;
border-radius: 20px;
border: 2px solid var(--border-toggle);
position: relative;
}
.toggle-wrapper::before {
content: "";
display: block;
width: 15px;
height: 15px;
background-color: var(--circle-background);
border-radius: 100%;
position:absolute;
top: 3.5px;
left: var(--circle);
transition: .5s;
}
Raw
jsbin.viqodonowi.js
const toggle = document.getElementById('toggle');
let active = false;
toggle.addEventListener('click', e => {
document.body.classList.toggle('dark');
if (!active) {
document.documentElement.style.setProperty('--circle', '26px');
active = true;
} else {
document.documentElement.style.setProperty('--circle', '5px');
active = false;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment