Jump to content

Admin Dark Mode


flydev
 Share

Recommended Posts

Hey @flydev ?? great to see another admin style coming up ? 

Check out https://github.com/baumrock/AdminStyleRock/ to see how you can create a module for 1-click-install without the need to copy files!

This is all you have to add to your module: https://github.com/baumrock/AdminStyleRock/blob/30c91c9832ac8bc54fa64fbee416919824a1983d/AdminStyleRock.module.php#L35-L53

  • Like 1
Link to comment
Share on other sites

Yes that is what was planned, I talked about LESS mod, but I used your module in first instance and I think he will receive the PR to give the dark-mode available by default. I might be blind, but what's the difference between the LESS or Rock in the "sharing flow" ? they don't both require the admin.less files ?

 

image.png.d37b8b1037d1069d5ec07d9b31e1f580.png

Link to comment
Share on other sites

14 minutes ago, flydev ?? said:

I might be blind, but what's the difference between the LESS or Rock in the "sharing flow" ? they don't both require the admin.less files ?

Sorry I don't understand ? 

  • Haha 1
Link to comment
Share on other sites

I said, both module require the file `admin.less` or at least the compiled `admin.css` ? 

But forgot it, my question doesn't make sense as I didn't read the point #3 on AdminStyleRock github repo ?‍♂️

It might serve as an example how to share your own styles with the community in a modular way instead of sharing admin.less files that can't be updated/monitored by the PW upgrades module.

 

Edited by flydev ??
typo
  • Like 1
Link to comment
Share on other sites

32 minutes ago, flydev ?? said:

I said, both module require the file `admin.less` or at least the compiled `admin.css` ? 

Yeah that's what I tried to explain. You don't need admin.less - you only need the module that adds the custom admin style in init() or ready() ? 

Now that I'm writing I realise that one can't customize my style once the module is installed. Because it won't pick up the admin.less file as it's overwriting this setting to use the module's style. That might be an improvement ? 

  • Like 1
Link to comment
Share on other sites

On 9/29/2022 at 6:05 PM, bernhard said:

Now that I'm writing I realise that one can't customize my style once the module is installed. Because it won't pick up the admin.less file as it's overwriting this setting to use the module's style. That might be an improvement ? 

I was wrong ? Simply install AdminStyleRock and get all the benefits.

And then - if you need - add /site/templates/admin.less and customise what you need ?

  • Haha 1
Link to comment
Share on other sites

Hey @flydev ?? no, sorry, your way of doing it is outdated ? 

Just kidding... I just created 2 PRs which make it a lot easier to create AdminStyles (because I realised that it's harder than it could/should be to create such AdminStyle modules, thx for that!):

https://github.com/ryancramerdesign/Less/pull/2

https://github.com/processwire/processwire/pull/245

And a new module that shows the new way of creating admin styles for ProcessWire ?

https://github.com/baumrock/AdminStyleHello

What do you think?

  • Like 1
Link to comment
Share on other sites

Hey @flydev ?? I see that your style has the same issues that I had to tackle when building the rock style:

First, the notices have some (in my opinion) unnecessary spacing:

hTKSMO4.png

Second, the content tab should not have margin-left:

BvCQ42W.png

I just tried and when adding this line on top of your LESS those issues (and maybe others) are gone:

@import "../../../../wire/modules/AdminTheme/AdminThemeUikit/uikit-pw/styles/rock.less";

And finally one thing that is not related to the rock style: Tooltips are not the best in terms of contrast ? 

0oB7LhH.png

PS: Installation worked like a charm ?

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

This is something I recently picked back up to try to finish, it's a bit tedious depending on how many modules/features you want to cover.

I wrapped styles in a .dark style rule in my less so that I could get the added specificity I wanted rather than use !important to override. It doesn't work for all modules (as some create pretty specific rules themselves that need a slightly different approach - like AdminOnSteroids - that are higher in the DOM than your typical rules.) Sometimes I have to insert the .dark selector deeper than a style applied to html, for example in a given rule.

I included the dark class in the body tag in my _main.php override.

When I stopped I also recall there was quite a bit of !important css rules set in the image editing popups and image fields styles in core - I started making headway with it and then had to step away. I haven't gone back to see if that has improved. I'm doing a bit of refactoring now to try to consolidate rules and get the options that I want.

The uk-inverse is not exactly what it appears to be. It gets used when you need light content in spaces where you otherwise get dark content by default - particularly in nested cards/sections/overlays and such. There are global inverse color rules that have a uk-inverse wrapper similar to the dark wrapper I described above, but it can be unpredictable in nested elements sometimes. In our case, though, with the content bring generally light, uk-inverse would provide dark text and assumes a lighter primary color IIRC.

I really like the toggle idea. In theory you could then just include the .dark class wrapper conditionally in the template override.

EDIT: Looking at different approaches, I guess I was approaching the toggle as more of a real-time DOM class change with jquery, but maybe it is better to have different variable sets that load for different color options. I'm going to play around some more with it.

  • Like 1
Link to comment
Share on other sites

I commited some fixes, will push it at the end of the day. But yes, some modules need to be taken case by case, thats why I think everyone using it could make it better by sending pull-requests.

There is also some hardcoded style set by js calls, I put already comments on a todo/known bugs section.

About the switch, I think the better solution is to reload the page to apply the default theme set by the user, brainstorming needed there.

Thanks for your interest ✌️

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...