Last active
January 8, 2025 17:01
-
-
Save rickalday/ee62c0f9fc7b95d333947117d7327f96 to your computer and use it in GitHub Desktop.
Add a light/dark toggle button to a GiveWP form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
add_action('givewp_donation_form_schema', static function (Give\Framework\FieldsAPI\DonationForm $form) { | |
$field = Give\Framework\FieldsAPI\HTML::make('YourFieldName') | |
->html('<button | |
type="button" | |
data-theme-toggle | |
aria-label="Change to light theme" | |
>Change to light theme</button> | |
'); | |
$form->insertAfter('email', $field); | |
}); | |
add_action( 'givewp_donation_form_enqueue_scripts', function(){ | |
?> | |
<script> | |
document.addEventListener('DOMContentLoaded', function(){ | |
/** | |
* Utility function to calculate the current theme setting. | |
* Look for a local storage value. | |
* Fall back to system setting. | |
* Fall back to light mode. | |
*/ | |
function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) { | |
if (localStorageTheme !== null) { | |
return localStorageTheme; | |
} | |
if (systemSettingDark.matches) { | |
return "dark"; | |
} | |
return "light"; | |
} | |
/** | |
* Utility function to update the button text and aria-label. | |
*/ | |
function updateButton({ buttonEl, isDark }) { | |
const newCta = isDark ? "Change to light theme" : "Change to dark theme"; | |
// use an aria-label if you are omitting text on the button | |
// and using a sun/moon icon, for example | |
buttonEl.setAttribute("aria-label", newCta); | |
buttonEl.innerText = newCta; | |
} | |
/** | |
* Utility function to update the theme setting on the html tag | |
*/ | |
function updateThemeOnHtmlEl({ theme }) { | |
document.querySelector(".givewp-donation-form").setAttribute("data-theme", theme); | |
} | |
/** | |
* On page load: | |
*/ | |
/** | |
* 1. Grab what we need from the DOM and system settings on page load | |
*/ | |
const button = document.querySelector("[data-theme-toggle]"); | |
const localStorageTheme = localStorage.getItem("theme"); | |
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)"); | |
/** | |
* 2. Work out the current site settings | |
*/ | |
let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }); | |
/** | |
* 3. Update the theme setting and button text accoridng to current settings | |
*/ | |
updateButton({ buttonEl: button, isDark: currentThemeSetting === "dark" }); | |
updateThemeOnHtmlEl({ theme: currentThemeSetting }); | |
/** | |
* 4. Add an event listener to toggle the theme | |
*/ | |
button.addEventListener("click", (event) => { | |
const newTheme = currentThemeSetting === "dark" ? "light" : "dark"; | |
localStorage.setItem("theme", newTheme); | |
updateButton({ buttonEl: button, isDark: newTheme === "dark" }); | |
updateThemeOnHtmlEl({ theme: newTheme }); | |
currentThemeSetting = newTheme; | |
}); | |
}); | |
</script> | |
<?php | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment