How to call custom function within blazor tailwind DarkModeToggleLite component toggleDarkMode() function which executes on onclick DarkModeToggleLite component

[dharasoni16]

I am new to servicestack blazor. I am using service stack blazor server app framework for my project, and using syncfusion blazor component for some of the functionality requirement. As servicestack blazor supports inbuilt feature for dark and light mode that is darkmodetogglelite component with its own inbuilt function call, I want to know that is there any way by which I can handle my custom function call along toggleDarkMode() function that executes on onclick event of darkmodetogglelite component. basically I want to synchronize tailwind styles of syncfusion blazor components with servicestack blazor server app dark and light theme.

[mythz]

This is the entire source code for the DarkModeToggleLite.razor component.

You can either copy it to create your own modified custom component or use JavaScript to create a decorator function that toggles ServiceStack components and whatever syncfusion needs, e.g by adding something like this at the bottom of your App.Razor:

...
<script>hljs.highlightAll()</script>
<script>
const orig = window.toggleDarkMode
window.toggleDarkMode = function() { 
    orig() // toggle ServiceStack DarkMode
    if (document.documentElement.classList.contains('dark')) {
        // turn on dark mode in syncfusion
    } else {
        // turn off dark mode in syncfusion
    }
}
</script>

[dharasoni16]

Understood,Thank you so much for your help.