Skip to content

Instantly share code, notes, and snippets.

@rickalday
Last active January 8, 2025 17:01
Show Gist options
  • Save rickalday/ee62c0f9fc7b95d333947117d7327f96 to your computer and use it in GitHub Desktop.
Save rickalday/ee62c0f9fc7b95d333947117d7327f96 to your computer and use it in GitHub Desktop.
Add a light/dark toggle button to a GiveWP form
<?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