logo
v2.6.4

Theme Switcher

It is common practice these days to build web sites/apps that allow users to switch between dark and light modes. This is one of those Bladewind components that takes away the headache of building your own theme switching mechanism.

There can be only one theme switcher on a page. The Bladwind docs uses the theme switcher in the top right corner of the website.

        
            <x-bladewind::theme-switcher  />
        
    

There are a few customizations available. See the full list of attributes below. Also refer to our dark mode customization page for more.

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Textarea component.

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
icon_right true Should the icons be placed on the left or right of the text.

true false
icon_type blank By default the outline icons from Heroicons are used. You can use the solid icons if you prefer. See details about this on the Icon component page.
icon_dir blank If you plan on using custom icons instead of the defaults from Heroicons, specify the directory these icons will be loaded from. See details about this on the Icon component page.
light_icon sun The icon displayed next to the word, Light. Use any icon from Heroicons or your custom icons.
dark_icon moon The icon displayed next to the word, Dark. Use any icon from Heroicons or your custom icons.
system_icon computer-desktop The icon displayed next to the word, System. Use any icon from Heroicons or your custom icons.
light_text Light Word displayed next to the light icon. This is provided as an option to make this translatable at your app level.
dark_text Dark Word displayed next to the dark icon. This is provided as an option to make this translatable at your app level.
system_text System Word displayed next to the system icon. This is provided as an option to make this translatable at your app level. Some people prefer to use 'Auto'.

 

Theme Switcher with all attributes defined

        
            <x-bladewind::theme-switcher
                icon_right="false"
                icon_dir="assets/icons"
                icon_type="solid"
                light_text="Light Mode"
                light_icon="bulb
                dark_text="Dark Mode"
                dark_icon="sun-shades"
                system_text="Auto Mode"
                system_icon="day-night" />
        
    
The source file for this component is available in resources > views > components > bladewind > theme-switcher.blade.php