##### Global Script The **Theme** toggle requires JavaScript for functionality. It uses the Patterns Scripts, Theme Utility to cycle through themes and setting the users preference to local storage. To use the **Theme** through the global script use the following code: ```html ``` This will instantiate the **Theme** toggling element and attach event listeners to the body. ##### Module Import The Theme Utility source exists in the Patterns Scripts utility library, which is a dependency of this library. This method allows the specification of each theme object and a callback function that will be triggered after the theme is toggled. ```javascript import Themes from '@nycopportunity/pttrn-scripts/src/themes/themes'; new Themes({ themes: [ { label: 'Dark Theme', classname: 'default', icon: 'lucide-moon' }, { label: 'Light Theme', classname: 'dark', icon: 'lucide-sun' } ], after: thms => document.querySelectorAll(thms.selectors.TOGGLE) .forEach(element => { element.querySelector('[data-js-themes="icon"]') .setAttribute('href', `#${thms.theme.icon}`); }) }); ```