Skip to content

Instantly share code, notes, and snippets.

@zartgesotten

zartgesotten/alternative-sun-moon.html

Last active February 10, 2024 13:20
Show Gist options
  • Save zartgesotten/96978907a49c50865171b678587fd226 to your computer and use it in GitHub Desktop.
Save zartgesotten/96978907a49c50865171b678587fd226 to your computer and use it in GitHub Desktop.
Download ZIP
Source: https://codepen.io/Kevin-Geary/pen/QWzVKeb Add a code Element in Bricks and add this in the code section.
Raw
alternative-sun-moon.html
<button class="toggle-scheme">
<span class="toggle-scheme__icon toggle-scheme__icon--main">
<svg viewBox="0 0 24 24" fill="none">
<path d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z" stroke="#073460" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
<span class="toggle-scheme__icon toggle-scheme__icon--alt">
<svg viewBox="0 0 24 24" fill="none">
<path d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z" stroke="#073460" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</span>
</button>
<style>
.toggle-scheme {
background: none;
border: none;
cursor: pointer;
font-size: 24px;
display: flex;
}
.toggle-scheme__icon {
width: 24px;
height: 24px;
}
.toggle-scheme__icon--alt {
width: 24px;
height: 24px;
display: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const toggleButton = document.querySelector(".toggle-scheme");
const mainIcons = document.querySelectorAll(".toggle-scheme__icon--main");
const altIcons = document.querySelectorAll(".toggle-scheme__icon--alt");
// Get user preference from local storage
const userPreference = localStorage.getItem("prefers-color-scheme");
// Set the initial color scheme based on user preference
if (userPreference === "alt") {
document.documentElement.classList.add("color-scheme--alt");
toggleIcons(mainIcons, "none");
toggleIcons(altIcons, "inline");
} else {
document.documentElement.classList.remove("color-scheme--alt");
toggleIcons(mainIcons, "inline");
toggleIcons(altIcons, "none");
}
// Toggle color scheme when button is clicked
toggleButton.addEventListener("click", function () {
const currentScheme = document.documentElement.classList.contains(
"color-scheme--alt"
)
? "alt"
: "main";
if (currentScheme === "main") {
document.documentElement.classList.add("color-scheme--alt");
localStorage.setItem("prefers-color-scheme", "alt");
toggleIcons(mainIcons, "none");
toggleIcons(altIcons, "inline");
} else {
document.documentElement.classList.remove("color-scheme--alt");
localStorage.setItem("prefers-color-scheme", "main");
toggleIcons(mainIcons, "inline");
toggleIcons(altIcons, "none");
}
});
// Helper function to toggle the display of elements with a given class
function toggleIcons(elements, displayValue) {
elements.forEach(function (element) {
element.style.display = displayValue;
});
}
});
</script>
Raw
html-css-modeswitch.html
<button class="toggle-scheme">
<span class="toggle-scheme__icon toggle-scheme__icon--main"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M12 21.9966C6.47715 21.9966 2 17.5194 2 11.9966C2 6.47373 6.47715 1.99658 12 1.99658C17.5228 1.99658 22 6.47373 22 11.9966C22 17.5194 17.5228 21.9966 12 21.9966ZM12 19.9966C16.4183 19.9966 20 16.4149 20 11.9966C20 7.5783 16.4183 3.99658 12 3.99658C7.58172 3.99658 4 7.5783 4 11.9966C4 16.4149 7.58172 19.9966 12 19.9966ZM7.00035 15.3158C9.07995 15.1645 11.117 14.2938 12.7071 12.7037C14.2972 11.1136 15.1679 9.07654 15.3193 6.99694C15.6454 7.21396 15.955 7.46629 16.2426 7.75394C18.5858 10.0971 18.5858 13.8961 16.2426 16.2392C13.8995 18.5824 10.1005 18.5824 7.75736 16.2392C7.46971 15.9516 7.21738 15.642 7.00035 15.3158Z" fill="rgba(0,0,0,1)"></path>
</svg></span>
<span class="toggle-scheme__icon toggle-scheme__icon--alt"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M12 21.9966C6.47715 21.9966 2 17.5194 2 11.9966C2 6.47373 6.47715 1.99658 12 1.99658C17.5228 1.99658 22 6.47373 22 11.9966C22 17.5194 17.5228 21.9966 12 21.9966ZM5.32889 16.4219C6.76378 18.5674 9.20868 19.9801 11.9836 19.9801C16.4018 19.9801 19.9836 16.3984 19.9836 11.9801C19.9836 9.20518 18.5707 6.76021 16.4251 5.32535C17.2705 8.35312 16.5025 11.7367 14.1213 14.118C11.7401 16.4992 8.3566 17.2671 5.32889 16.4219Z" fill="var(--black)"></path>
</svg></span>
</button>
<style>
.toggle-scheme {
background: none;
border: none;
cursor: pointer;
font-size: 24px;
display: flex;
}
.toggle-scheme__icon {
width: 24px;
height: 24px;
}
.toggle-scheme__icon--alt {
width: 24px;
height: 24px;
display: none;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const toggleButton = document.querySelector(".toggle-scheme");
const mainIcons = document.querySelectorAll(".toggle-scheme__icon--main");
const altIcons = document.querySelectorAll(".toggle-scheme__icon--alt");
// Get user preference from local storage
const userPreference = localStorage.getItem("prefers-color-scheme");
// Set the initial color scheme based on user preference
if (userPreference === "alt") {
document.documentElement.classList.add("color-scheme--alt");
toggleIcons(mainIcons, "none");
toggleIcons(altIcons, "inline");
} else {
document.documentElement.classList.remove("color-scheme--alt");
toggleIcons(mainIcons, "inline");
toggleIcons(altIcons, "none");
}
// Toggle color scheme when button is clicked
toggleButton.addEventListener("click", function () {
const currentScheme = document.documentElement.classList.contains(
"color-scheme--alt"
)
? "alt"
: "main";
if (currentScheme === "main") {
document.documentElement.classList.add("color-scheme--alt");
localStorage.setItem("prefers-color-scheme", "alt");
toggleIcons(mainIcons, "none");
toggleIcons(altIcons, "inline");
} else {
document.documentElement.classList.remove("color-scheme--alt");
localStorage.setItem("prefers-color-scheme", "main");
toggleIcons(mainIcons, "inline");
toggleIcons(altIcons, "none");
}
});
// Helper function to toggle the display of elements with a given class
function toggleIcons(elements, displayValue) {
elements.forEach(function (element) {
element.style.display = displayValue;
});
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment