LogoLogo
CSPR.build PortalCSPR.click Website
CSPR.click v1.2
CSPR.click v1.2
  • Introduction (v1.2)
    • CSPR.click overview
    • Get your application Id
    • Changelog
  • UI SDK
    • Getting started with the template application
    • Integrating the UI SDK into your application
    • Integrating the UI SDK into a non-React application
    • Customizing the top bar
      • Account dropdown menu
      • Theme selector
      • Network selector
      • Language selector
      • Currency selector
      • Custom selector
    • useClickRef() hook
    • Handling events
    • Signing transactions
  • Core JS SDK
    • Getting started
    • Properties
    • Methods
    • Types
    • Events
  • Get support
    • Contact us
Powered by GitBook
On this page
  1. UI SDK
  2. Customizing the top bar

Theme selector

PreviousAccount dropdown menuNextNetwork selector

Last updated 1 year ago

CSPR.click toolbar has two themes: light and dark. You can use one or the other. And if your application also has light and dark modes, you can add to the toolbar a theme selector to let the user easily change between both.

const handleThemeSwitch = () => 
      setThemeMode(themeMode === ThemeModeType.light ?
            ThemeModeType.dark : 
            ThemeModeType.light);
...            
<ClickTopBar
  themeMode={themeMode}
  onThemeSwitch={handleThemeSwitch} 
/>
Theme selector widget