[TUTORIAL]

The only effort you need is to add our JS script as required in your layout, and then you can call a client action to activate or deactivate a dark theme. You can call this action when the user clicks on a button, or store the user preference and call it after login! We store the value on a client variable so that it will persist on all pages of your application!

If you so wish, you can also adjust the colors to suit better your use case or specific, tailor-made web blocks. Just add a CSS definition for your elements with the class .dark-theme, for example:

.dark-theme .mywebblock .table{

    color: white;

}

You can also change all the values by adding this definition to your CSS:

html.dark-theme{

    /* Color - Neutral */

    --color-neutral-0: #101213;

    --color-neutral-1: #272B30;

    --color-neutral-2: #4F575E;

    --color-neutral-3: #6A7178;

    --color-neutral-4: #ADB5BD;

    --color-neutral-5: #CED4DA;

    --color-neutral-6: #DEE2E6;

    --color-neutral-7: #E9ECEF;

    --color-neutral-8: #F1F3F5;

    --color-neutral-9: #F8F9FA;

    --color-neutral-10: #FFFFFF;

    --color-background-body: #121212;

    --header-color: #424242;

    color: var(--color-neutral-9);

}

Please check the Demo to see some of these CSS adjustments in action!

Please share your feedback with us :)