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