search

OrchardCMS / OrchardCore

Orchard Core is an open-source modular and multi-tenant application framework built with ASP.NET Core, and a content management system (CMS) built on top of that framework.
https://orchardcore.net
BSD 3-Clause "New" or "Revised" License
7.37k stars 2.38k forks source link

Officially supported darkmode theme #5605

Closed mawendel closed 3 years ago

mawendel commented 4 years ago

I would like to see an officially supported darkmode admin theme. I'm hoping we can get more than a few to chime in and make this happen.

After briefly looking at how to implement my own darkmode admin theme, my first thoughts are that it looks pretty tough coming from the outside, with no prio knowledge of how the admin theme is built up.

I tried using the compiled bootstrap.css from https://bootswatch.com/darkly/ with no luck, there are too many custom tags overriding what should otherwise take precedence. It seems like it would take me a lot of time to figure out what things are overriden, where it comes from and how to target the individual tags.

The maintaining of my own separate version could also become quite the chore, considering that any changes made to the official TheAdmin theme could be quite opaque. Then having to dig through thousands of lines of css tags to figure out how to make your admin theme work again..

It does not have to be the Darkly skin we use, it was merely a way to test it. In fact im not sure im sold on the white background for all inputs.

Skrypt commented 4 years ago

I'm surprised to hear that. Would you send us some screenshots of this attempt? The only part that is strongly designed is the left menu navbar to be honest. Maybe some other zones too like the header navbar. But generally we stick to BS4 classes for most of the work.

deanmarcussen commented 4 years ago

It may just need to be compiled from sass with the rtl support from the gulpfile, that's generally what is changing the bootstrap tags

Skrypt commented 4 years ago

I'm trying exactly that right now

Skrypt commented 4 years ago

image

Just like what I thought. Works fine but miss some adjustments.

mawendel commented 4 years ago

I didnt even get that. But i also only referenced the bootstrap.css in my Layout. If you used some custom sass compilation or something else that might explain why yours looks partly there?

Skrypt commented 4 years ago

image

Yes I used the sass files and created an alternate TheAdminDark.scss file with it.

sebastienros commented 4 years ago

@Skrypt people are asking for it, maybe make it official in the admin theme, with a setting that is stored in a cookie. It should just be a scss file that we can update for this option.

hishamco commented 4 years ago

We could support light and dark themes out of the box, making an option to add new themes and switches between them from within the admin site

agriffard commented 4 years ago

I tried to support a dark admin theme in the PR #4989 but I gave up: There are to many specific changes to make to support it everywhere.

You can just use a browser extension like https://darkreader.org/ and it will work better than a dark theme.

mawendel commented 4 years ago

I have been using darkreader for a good while. Now despite that even the best attempt for darkreader will never reach the same level a real theme can do, i agree it can be serviceable for most pages. Content items with a lot of flow parts are difficult to see though. But maybe that is another discussion for increasing readability for the flow views.

The issue is, that while i want the admin theme that is glaringly white to be in darkmode, the site theme is custom made in darker colors. So when i swap between admin and front-site whenever i'm setting something up/designing html, i have to keep enabling and disabling it.

But as you say, it is quite difficult to make a darkmode theme, so perhaps its not worth the time at the moment vs. other features/fixes.