Skip to content

Instantly share code, notes, and snippets.

@Prestapro

Prestapro/dark-light-theme.markdown

Created October 2, 2022 01:34
Show Gist options
  • Save Prestapro/d46878b084532cc121b09e48f734b199 to your computer and use it in GitHub Desktop.
Save Prestapro/d46878b084532cc121b09e48f734b199 to your computer and use it in GitHub Desktop.
Download ZIP
Dark-Light Theme
Raw
index.html
<div class="container">
<div class="title">
<h1> Day/Night <br> Toggler</h1>
</div>
<div class="btn">
<input type="checkbox" name="check" id="check">
<label for="check">
<div class="box">
<div class="ball"></div>
<div class="scenary">
<div class="moon"><?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 499.712 499.712" style="enable-background:new 0 0 499.712 499.712;" xml:space="preserve">
<path style="fill:#FFD93B;" d="M146.88,375.528c126.272,0,228.624-102.368,228.624-228.64c0-55.952-20.16-107.136-53.52-146.88
C425.056,33.096,499.696,129.64,499.696,243.704c0,141.392-114.608,256-256,256c-114.064,0-210.608-74.64-243.696-177.712
C39.744,355.368,90.944,375.528,146.88,375.528z"/>
<path style="fill:#F4C534;" d="M401.92,42.776c34.24,43.504,54.816,98.272,54.816,157.952c0,141.392-114.608,256-256,256
c-59.68,0-114.448-20.576-157.952-54.816c46.848,59.472,119.344,97.792,200.928,97.792c141.392,0,256-114.608,256-256
C499.712,162.12,461.392,89.64,401.92,42.776z"/>
<g>
<polygon style="fill:#FFD83B;" points="128.128,99.944 154.496,153.4 213.472,161.96 170.8,203.56 180.864,262.296
128.128,234.568 75.376,262.296 85.44,203.56 42.768,161.96 101.744,153.4 "/>
<polygon style="fill:#FFD83B;" points="276.864,82.84 290.528,110.552 321.104,114.984 298.976,136.552 304.208,166.984
276.864,152.616 249.52,166.984 254.752,136.552 232.624,114.984 263.2,110.552 "/>
</g>
</svg>
</div>
<div class="sun"><?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<circle style="fill:#FFD347;" cx="255.997" cy="255.997" r="144.824"/>
<path style="fill:#FFD347;" d="M256,56.849c-4.273,0-7.737-3.463-7.737-7.737V7.737C248.263,3.463,251.727,0,256,0
s7.737,3.463,7.737,7.737v41.376C263.737,53.386,260.273,56.849,256,56.849z"/>
<path style="fill:#FFD347;" d="M152.563,84.568c-2.674,0-5.274-1.387-6.707-3.869l-20.687-35.832
c-2.136-3.7-0.869-8.432,2.832-10.569c3.701-2.134,8.432-0.87,10.569,2.832l20.687,35.832c2.136,3.7,0.869,8.432-2.832,10.569
C155.206,84.234,153.876,84.568,152.563,84.568z"/>
<path style="fill:#FFD347;" d="M76.823,160.294c-1.312,0-2.643-0.334-3.861-1.038L37.13,138.569
c-3.7-2.136-4.968-6.868-2.832-10.569c2.136-3.701,6.868-4.967,10.569-2.832l35.832,20.687c3.7,2.136,4.968,6.868,2.832,10.569
C82.097,158.907,79.497,160.294,76.823,160.294z"/>
<path style="fill:#FFD347;" d="M49.112,263.737H7.737C3.464,263.737,0,260.274,0,256s3.464-7.737,7.737-7.737h41.376
c4.273,0,7.737,3.463,7.737,7.737S53.385,263.737,49.112,263.737z"/>
<path style="fill:#FFD347;" d="M41.005,387.869c-2.674,0-5.274-1.387-6.707-3.869c-2.136-3.7-0.869-8.432,2.832-10.569
l35.832-20.687c3.7-2.134,8.432-0.87,10.569,2.832c2.136,3.7,0.869,8.432-2.832,10.569l-35.832,20.687
C43.648,387.535,42.317,387.869,41.005,387.869z"/>
<path style="fill:#FFD347;" d="M131.862,478.74c-1.312,0-2.643-0.334-3.861-1.038c-3.7-2.136-4.968-6.868-2.832-10.569
l20.687-35.832c2.136-3.701,6.868-4.967,10.569-2.832c3.7,2.136,4.968,6.868,2.832,10.569l-20.687,35.832
C137.136,477.352,134.536,478.74,131.862,478.74z"/>
<path style="fill:#FFD347;" d="M256,512c-4.273,0-7.737-3.463-7.737-7.737v-41.376c0-4.274,3.464-7.737,7.737-7.737
s7.737,3.463,7.737,7.737v41.376C263.737,508.537,260.273,512,256,512z"/>
<path style="fill:#FFD347;" d="M380.138,478.74c-2.674,0-5.274-1.387-6.707-3.869l-20.687-35.832
c-2.136-3.7-0.869-8.432,2.832-10.569c3.7-2.134,8.432-0.87,10.569,2.832l20.687,35.832c2.136,3.7,0.869,8.432-2.832,10.569
C382.781,478.406,381.451,478.74,380.138,478.74z"/>
<path style="fill:#FFD347;" d="M470.995,387.869c-1.312,0-2.643-0.334-3.861-1.038l-35.832-20.687
c-3.7-2.136-4.968-6.868-2.832-10.569c2.136-3.701,6.868-4.967,10.569-2.832l35.832,20.687c3.7,2.136,4.968,6.868,2.832,10.569
C476.269,386.481,473.669,387.869,470.995,387.869z"/>
<path style="fill:#FFD347;" d="M504.263,263.737h-41.376c-4.273,0-7.737-3.463-7.737-7.737s3.464-7.737,7.737-7.737h41.376
c4.273,0,7.737,3.463,7.737,7.737S508.536,263.737,504.263,263.737z"/>
<path style="fill:#FFD347;" d="M435.177,160.294c-2.674,0-5.274-1.387-6.707-3.869c-2.136-3.7-0.869-8.432,2.832-10.569
l35.832-20.687c3.7-2.134,8.432-0.87,10.569,2.832c2.136,3.7,0.869,8.432-2.832,10.569l-35.832,20.687
C437.82,159.96,436.489,160.294,435.177,160.294z"/>
<path style="fill:#FFD347;" d="M359.437,84.568c-1.312,0-2.643-0.334-3.861-1.038c-3.7-2.136-4.968-6.868-2.832-10.569
l20.687-35.832c2.136-3.701,6.868-4.967,10.569-2.832c3.7,2.136,4.968,6.868,2.832,10.569l-20.687,35.832
C364.711,83.181,362.11,84.568,359.437,84.568z"/>
</g>
<path style="fill:#FFBE31;" d="M256,111.18c-5.242,0-10.418,0.286-15.516,0.828c72.685,7.743,129.303,69.252,129.303,143.991
s-56.619,136.249-129.303,143.992c5.098,0.544,10.273,0.828,15.516,0.828c79.982,0,144.82-64.838,144.82-144.82
S335.983,111.18,256,111.18z"/>
</svg>
</div>
</div>
</div>
</label>
</div>
<div class="content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam impedit delectus natus, perferendis exercitationem sed quod doloremque sapiente aspernatur dignissimos?
</div>
</div>
<!-- SVG Credits -->
<!-- Sun,moon Svg Credits Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a> -->
<!-- youtube, instagram Svg from Sun Svg Credits Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon"> www.flaticon.com</a> -->
<!-- Social Media Links -->
<div class="social">
<a target = "_blank"href="https://www.youtube.com/watch?v=x0hGQ3blksE" class="youtube">Tutorial On <?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.003 512.003" style="enable-background:new 0 0 512.003 512.003;" xml:space="preserve">
<path style="fill:#E53935;" d="M443.734,80.336L330.86,70.437c-49.812-4.334-99.906-4.334-149.717,0L68.268,80.336
c-38.702,3.124-68.459,35.541-68.267,74.368v202.667c-0.204,38.835,29.557,71.265,68.267,74.389l112.939,9.813
c24.832,2.133,49.835,3.243,74.859,3.243c25.024,0,50.027-1.067,74.859-3.243l112.939-9.813c38.659-3.187,68.348-35.6,68.139-74.389
V154.704C512.194,115.877,482.436,83.459,443.734,80.336z"/>
<path style="fill:#FAFAFA;" d="M357.782,247.077l-149.333-96c-4.951-3.193-11.552-1.768-14.745,3.183
c-1.111,1.722-1.702,3.728-1.703,5.777v192c0.002,5.891,4.78,10.665,10.671,10.663c2.049-0.001,4.055-0.592,5.777-1.703l149.333-96
c4.954-3.187,6.387-9.787,3.2-14.742c-0.825-1.283-1.917-2.374-3.2-3.2V247.077z"/>
<path d="M256.001,444.816c-25.003,0-50.005-1.088-74.837-3.243l-112.896-9.835c-38.71-3.124-68.471-35.554-68.267-74.389V154.683
c-0.182-38.819,29.573-71.224,68.267-74.347l112.896-9.899c49.797-4.334,99.877-4.334,149.675,0l112.96,9.813
c38.717,3.158,68.454,35.629,68.203,74.475v202.667c0.204,38.835-29.557,71.265-68.267,74.389l0,0l-112.96,9.813
C306.028,443.771,281.004,444.816,256.001,444.816z M256.001,88.549c-24.405,0-48.768,1.067-72.981,3.157L69.953,101.52
c-27.614,2.317-48.794,25.495-48.619,53.205v202.667c-0.116,27.7,21.097,50.827,48.704,53.099l112.96,9.813
c48.57,4.209,97.414,4.209,145.984,0l113.067-9.813c27.589-2.315,48.76-25.456,48.619-53.141V154.683
c0.116-27.7-21.097-50.827-48.704-53.099l-112.96-9.813c-24.235-2.105-48.569-3.164-73.003-3.179V88.549z"/>
<path d="M202.668,362.704c-5.891,0-10.667-4.776-10.667-10.667v-192c-0.01-5.891,4.758-10.674,10.649-10.684
c2.057-0.003,4.07,0.588,5.799,1.703l149.333,96c4.96,3.178,6.405,9.776,3.227,14.736c-0.83,1.296-1.931,2.397-3.227,3.227
l-149.333,96C206.724,362.124,204.717,362.709,202.668,362.704z M213.334,179.579v152.917l118.933-76.459L213.334,179.579z"/>
</svg>
</a>
<a target = "_blank" href="https://www.instagram.com/joybhai.codes/" class="instagram">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512.003 512.003" style="enable-background:new 0 0 512.003 512.003;" xml:space="preserve"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="42.966156268" x2="469.0337477" y1="469.0296477168" y2="42.9620562848"><stop offset="0" stop-color="#ffd600"/><stop offset=".5" stop-color="#ff0100"/><stop offset="1" stop-color="#d800b9"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="163.0429956456" x2="348.9539083464" y1="348.9538083312" y2="163.0428956304"><stop offset="0" stop-color="#ff6400"/><stop offset=".5" stop-color="#ff0100"/><stop offset="1" stop-color="#fd0056"/></linearGradient><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="370.9291325432" x2="414.3727849912" y1="141.0676714336" y2="97.6240189856"><stop offset="0" stop-color="#f30072"/><stop offset="1" stop-color="#e50097"/></linearGradient><path d="m510.460938 150.453125c-1.246094-27.25-5.574219-45.859375-11.902344-62.140625-6.425782-17.082031-16.503906-32.554688-29.527344-45.34375-12.785156-13.023438-28.261719-23.105469-45.34375-29.535156-16.285156-6.324219-34.890625-10.648438-62.140625-11.886719-27.300781-1.25-36.023437-1.546875-105.546875-1.546875s-78.246094.296875-105.546875 1.539062c-27.25 1.246094-45.855469 5.574219-62.140625 11.902344-17.082031 6.425782-32.554688 16.503906-45.34375 29.527344-13.023438 12.785156-23.105469 28.257812-29.535156 45.339844-6.324219 16.285156-10.648438 34.894531-11.886719 62.140625-1.25 27.304687-1.546875 36.023437-1.546875 105.546875 0 69.527344.296875 78.25 1.546875 105.550781 1.242187 27.246094 5.570313 45.855469 11.898437 62.140625 6.425782 17.078125 16.503907 32.554688 29.527344 45.339844 12.785156 13.023437 28.261719 23.101562 45.34375 29.527344 16.28125 6.332031 34.890625 10.65625 62.140625 11.902343 27.304688 1.246094 36.023438 1.539063 105.546875 1.539063 69.523438 0 78.246094-.292969 105.546875-1.539063 27.25-1.246093 45.855469-5.570312 62.140625-11.902343 34.386719-13.296876 61.570313-40.480469 74.867188-74.867188 6.332031-16.285156 10.65625-34.894531 11.902344-62.140625 1.242187-27.304687 1.539062-36.023437 1.539062-105.546875 0-69.527344-.296875-78.246094-1.539062-105.546875zm-46.082032 208.996094c-1.136718 24.960937-5.308594 38.515625-8.8125 47.535156-8.613281 22.328125-26.257812 39.972656-48.585937 48.585937-9.019531 3.503907-22.574219 7.675782-47.535157 8.8125-26.988281 1.234376-35.085937 1.492188-103.445312 1.492188-68.363281 0-76.457031-.257812-103.449219-1.492188-24.957031-1.136718-38.511719-5.308593-47.535156-8.8125-11.117187-4.105468-21.175781-10.648437-29.433594-19.152343-8.503906-8.257813-15.046875-18.3125-19.152343-29.433594-3.503907-9.019531-7.675782-22.574219-8.8125-47.535156-1.230469-26.992188-1.492188-35.089844-1.492188-103.445313 0-68.359375.261719-76.453125 1.492188-103.449218 1.140624-24.960938 5.308593-38.515626 8.8125-47.535157 4.105468-11.121093 10.652343-21.179687 19.152343-29.4375 8.257813-8.503906 18.316407-15.046875 29.4375-19.148437 9.019531-3.507813 22.574219-7.675782 47.535157-8.816406 26.992187-1.230469 35.089843-1.492188 103.445312-1.492188h-.003906c68.355468 0 76.453125.261719 103.449218 1.496094 24.960938 1.136718 38.511719 5.308594 47.535157 8.8125 11.117187 4.105468 21.175781 10.648437 29.433593 19.148437 8.503907 8.257813 15.046876 18.316407 19.148438 29.4375 3.507812 9.019531 7.679688 22.574219 8.816406 47.535157 1.230469 26.992187 1.492188 35.089843 1.492188 103.445312 0 68.359375-.257813 76.453125-1.492188 103.449219zm0 0" fill="url(#a)"/><path d="m255.996094 124.539062c-72.601563 0-131.457032 58.859376-131.457032 131.460938s58.855469 131.457031 131.457032 131.457031c72.605468 0 131.460937-58.855469 131.460937-131.457031s-58.855469-131.460938-131.460937-131.460938zm0 216.792969c-47.125-.003906-85.332032-38.207031-85.328125-85.335937 0-47.125 38.203125-85.332032 85.332031-85.332032 47.128906.003907 85.332031 38.207032 85.332031 85.332032 0 47.128906-38.207031 85.335937-85.335937 85.335937zm0 0" fill="url(#b)"/><path d="m423.371094 119.347656c0 16.964844-13.753906 30.71875-30.71875 30.71875-16.96875 0-30.722656-13.753906-30.722656-30.71875 0-16.96875 13.753906-30.722656 30.722656-30.722656 16.964844 0 30.71875 13.753906 30.71875 30.722656zm0 0" fill="url(#c)"/></svg>
</a>
<!-- <a href="" target = "_blank" class="twitter"></a> -->
</div>
Raw
script.js
// Selecting all the required classes from HTML to change
var body = document.body
var check = document.querySelector('#check')
var box = document.querySelector('.box')
var ball = document.querySelector('.ball')
// Targeting my social media links********************
var youtube = document.querySelector('.youtube')
var instagram = document.querySelector('.instagram')
// *******************************
// Adding an eventListener function to change color everytime var check is changed.(checked & unchecked)
check.addEventListener('change',function(){
// conditions to apply when checkbox is checked
if(this.checked == true){
box.setAttribute('style','background-color:white;')
ball.setAttribute('style','transform:translatex(100%);')
body.setAttribute('style','background-color:black; color:white;')
// Targeting my social media links********************
youtube.setAttribute('style','border:2px solid white;')
instagram.setAttribute('style','border:2px solid white;')
// *******************************
}
// conditions to apply when checkbox is unchecked
if(this.checked == false){
box.setAttribute('style','background-color:black; color:white;')
ball.setAttribute('style','transform:translatex(0%);')
body.setAttribute('style','background-color:white; color:black;')
// Targeting my social media links********************
youtube.setAttribute('style','border:2px solid black; color:black;')
instagram.setAttribute('style','border:2px solid black;')
// *******************************
}
})
Raw
style.scss
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
// 🔥Tutorial at =====
// https://www.youtube.com/watch?v=x0hGQ3blksE
// This is the Control Panel
// Change $scale to adjust size of button
// Change $time to adjust transition time.
$scale: 120px;
$time: 1s;
// A Template (Mixin) of all common codes, to stop repitition
@mixin common ($a,$b,$c,$d,$e,$f,$g){
display: $a;
flex-direction: $b;
justify-content: $c;
align-items: $d;
width: $e;
height: $f;
background-color: $g;
transition:all $time ease;
}
// To change the default Configurations
*{
margin:0px;
padding:0px;
box-sizing:border-box;
body{
@include common(flex,column,center,center,100%,null,null);
min-height:100vh;
font-family: 'Poppins';
}
}
// Style Rules for the .container class with 2 childrens(title,content)
.container{
display: flex;
flex-direction:column;
width:80%;
@media (min-width:500px){
width:50%;
}
.title{
text-align:center;
}
.content{
text-align:justify;
}
// for hiding the small tick box
input[type="checkbox"]{
display: none;
}
}
// Style rules for the .btn class
.btn{
align-self:center;
margin:15px 0;
}
// Style rules for the .box class
.box{
@include common(flex,column,center,null,$scale,$scale/2,black);
position:relative;
border-radius:$scale/4;
cursor:pointer;
// Style rules for the roller .ball class
.ball{
@include common(null,null,null,null,$scale/2,$scale/2,grey);
position:absolute;
border-radius:50%;
border: 3px solid black;
}
// Style rules for the .scenary(.sun, .moon) class
.scenary{
@include common(flex, row, space-between,null,null,null,null);
padding: 5px 10px 0px 10px;
svg{
width:$scale/3;
}
}
}
// Social Media Links
$hover-time : 0.2s;
.social{
margin-top:15px;
font-family: 'Poppins';
font-size:16px;
font-weight:500;
display: flex;
flex-direction:row;
a{
color: inherit;
text-decoration:none;
}
}
.youtube{
border: 2px solid black;
padding: 5px;
transition: all $hover-time ease;
svg{
width: 25px;
height:25px;
margin-bottom: -6px;
}
// &:hover{
// background-color: #000;
// color: #fff;
// }
}
.instagram{
margin-left:5px;
border: 2px solid black;
transition: all $hover-time ease;
svg{
width: 25px;
padding-top: 5px;
margin: 0 7px;
}
// &:hover{
// background-color: #000;
// }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment