4.0 Dark Mode

[Stuartemk]

Steps to reproduce the issue

Is there a way that the Casiopea template integrates by default a dark mode as well as its corresponding switch for users from the frontend?

Expected result

Actual result

System information (as much as possible)

Additional comments

[dgrammatiko]

You will be able to do that once cassiopeia transitions to the new template mode (child templates) with a simple override using https://github.com/vinorodrigues/bootstrap-dark-5 instead of the default bootstrap

[Stuartemk]

You will be able to do that once cassiopeia transitions to the new template mode (child templates) with a simple override using https://github.com/vinorodrigues/bootstrap-dark-5 instead of the default bootstrap

This is excellent news! Only what is not resolved is a togle or switch so that the user can change the template or mode from the frontend. Thank you very much @dgrammatiko

[dgrammatiko]

@Stuartemk there are plenty such switchers: https://github.com/dgrammatiko/dark-switch, https://github.com/GoogleChromeLabs/dark-mode-toggle/blob/master/src/dark-mode-toggle.mjs You only have to copy the switch to the child template and edit the HTML to include it, pretty straight forward

[Stuartemk]

Most of the administrators of a CMS are not programmers or software developers, that is why we use a CMS and we do not use our own development written from scratch or with a framework such as Laravel or React. Everything is easy for those who already know how to do something, it is very easy to say "You just have to put such code in such a place, download such a library and embed it in such a place, etc." As an administrator and not as a developer or programmer what we can is to activate or deactivate some function through a button, switch or plugin. Thanks for understanding, I really hope that the new version already brings by default the option of a light and a dark theme.

[himanshu007-creator]

Most of the administrators of a CMS are not programmers or software developers, that is why we use a CMS and we do not use our own development written from scratch or with a framework such as Laravel or React. Everything is easy for those who already know how to do something, it is very easy to say "You just have to put such code in such a place, download such a library and embed it in such a place, etc." As an administrator and not as a developer or programmer what we can is to activate or deactivate some function through a button, switch or plugin. Thanks for understanding, I really hope that the new version already brings by default the option of a light and a dark theme.

So true!!. Thats why i think having 2 approaches is good! Either , joomla identifies the system default theme or use manual button to toggle theme. This will increase simplicity.

[universewrld]

@Stuartemk I wrote about this earlier - #26772

[himanshu007-creator]

There can be two things we can try to do:-

1. Make two themes light and dark
2. User can switch themes by two methods:-
   a) joomla assigns itself the system default theme set by user
   b) user can change the theme from theme toggler that can be that can be used in the top right corner of admin page.

[Stuartemk]

This is how it should and should be.

[Stuartemk]

Most of the administrators of a CMS are not programmers or software developers, that is why we use a CMS and we do not use our own development written from scratch or with a framework such as Laravel or React. Everything is easy for those who already know how to do something, it is very easy to say "You just have to put such code in such a place, download such a library and embed it in such a place, etc." As an administrator and not as a developer or programmer what we can is to activate or deactivate some function through a button, switch or plugin. Thanks for understanding, I really hope that the new version already brings by default the option of a light and a dark theme.

[universewrld]

This is still a very relevant issue, especially since the backend theme has a dark mode, but the frontend theme still doesn't have a dark mode.