Skip to content

Instantly share code, notes, and snippets.

@razorfrog
Created April 22, 2024 18:01
Show Gist options
  • Save razorfrog/ba9f328bdbebba72bf751e9e4f6e9079 to your computer and use it in GitHub Desktop.
Save razorfrog/ba9f328bdbebba72bf751e9e4f6e9079 to your computer and use it in GitHub Desktop.
// Mobile navigation menu and footer dark mode toggle button styling.
.rf-darkmode-toggle {
label {
width: 120px;
height: 45px;
position: relative;
display: block;
background-color: $color-n1;
border-radius: 200px;
border: 1px solid lighten($color-n4,16%);
cursor: pointer;
transition: 0.3s;
&:after {
content: "";
width: 35px;
height: 35px;
position: absolute;
top: 4px;
left: 6px;
background: $link-color;
border-radius: 180px;
transition: 0.3s;
}
img {
position: absolute;
width: 24px;
top: 10px;
z-index: 100;
user-select: none;
&.sun {
left: 12px;
filter: invert(100%);
transition: 0.3s;
}
&.moon {
left: 83px;
filter: invert(61%) sepia(0%) saturate(245%) hue-rotate(135deg) brightness(93%) contrast(92%);
transition: 0.3s;
}
}
}
input {
width: 120px;
height: 45px;
position: absolute;
margin: 0;
z-index: 0;
appearance: none;
&:checked + label {
background: transparent;
border: 1px solid $color-n3;
}
&:checked + label:after {
left: 112px;
transform: translateX(-100%);
background: $link-color;
}
&:checked + label img.sun {
filter: invert(61%) sepia(0%) saturate(245%) hue-rotate(135deg) brightness(93%) contrast(92%);
}
&:checked + label img.moon {
filter: invert(100%);
}
}
}
// Main navigation menu dark mode toggle button positioning.
#site-header .rf-darkmode-toggle {
position: absolute;
top: 29px;
right: 0px;
transition: all 0.3s ease-in-out;
@include breakpoint-900-minus {
display: none;
}
.container {
width: 26px;
height: 36px;
box-sizing: border-box;
padding: 0;
background: none;
border: none;
display: flex;
justify-content: center;
align-items: center;
position: relative;
transition: all 0.3s ease-in-out;
img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
&.sun {width: 26px;}
&.moon {
filter: invert(100%);
width: 20px;
left: 3px;
}
&.sun, &.moon {transition: all 0.3s ease-in-out;}
&.visible {opacity: 1;}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment