LogoLogo
CSPR.build PortalCSPR.click Website
CSPR.click v1.3
CSPR.click v1.3
  • Introduction
    • 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 11 months 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);
...            
<ClickUI
    themeMode={themeMode}
    topBarSettings={{
        onThemeSwitch:handleThemeSwitch
    }}
/>
Theme selector widget