Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEATURE REQUEST] dark mode for admin panel #809

Closed
Joduai opened this issue Sep 8, 2024 · 6 comments
Closed

[FEATURE REQUEST] dark mode for admin panel #809

Joduai opened this issue Sep 8, 2024 · 6 comments

Comments

@Joduai
Copy link
Contributor

Joduai commented Sep 8, 2024

I wondered how could I enable dark mode in admin panel, assuming AdminLTE dashboard offers such function.
Unfortunately htmly utilizes v.3.0.5 of ALTE, and dark mode was implemented in newer, 3.1 version.
Uploading newer ALTE css and adding "dark-mode" class to <body> in system/admin/view/layout.html.php seems to do the job.
Only 2 light elements I've found are on the screenshot, but they do not hurt the eyes.
If there weren't any elements with custom css, updating css file should work right away.

This leads to a question: how about adding dark mode function to htmly?
Maybe as a config option, rather than a clickable switch like front end templates offer nowadays?
Why?
Full distributable css with both light, and dark modes weights minified ~1,3MB. There's also a standalone light version that weighs half that size. But there's no standalone css dist file for darkmode, thus such biggie could be loaded only when somebody wants to get dark mode in admin panel. Maybe using mixins to get standalone dark mode and then switch between 2 separate css files would do it, but would it be worth the hassle?

AdminLTEdarkmode

@danpros
Copy link
Owner

danpros commented Sep 9, 2024

Current adminlte css (htmly) is around 674KB, let me see the newest version. We have minimal modification to the old adminlte so just replace the CSS it should be fine.

@Joduai
Copy link
Contributor Author

Joduai commented Sep 9, 2024

Yeah, just because of rather small css file size in htmly I had mixed feelings using the full 1,3MB updated CSS file containing light+dark modes.
I haven't seen any requests for dark mode, thus I assume all htmly users are fine with light mode. And thats why I opted for additional option that would load different css files, rather than implementing a light/dark mode instant switch basing on this 1,3MB css file.

I never got into SASS/LESS thingy thus I can't say if it's possible to compile only darkmode css file for adminlte. Pity that the package contains distributable standalone light version without standalone dark one.

@Joduai
Copy link
Contributor Author

Joduai commented Sep 10, 2024

Seems I've overlooked one window. Preview window would have to get .dark-mode, otherwise inherits light background color
<div id="wmd-preview" style="width:100%;overflow:auto;" class="wmd-panel wmd-preview dark-mode">

along with it, top navbar with search could also become dark
<nav class="main-header navbar navbar-expand navbar-dark">

After reading all opened issues, seems that dark mode has already been requested in f.e. #718

htmly-dark-preview

danpros added a commit that referenced this issue Oct 16, 2024
add dark + light mode option #809 by @Joduai
@Joduai
Copy link
Contributor Author

Joduai commented Oct 16, 2024

I merged 3 css files from adminlte 3.2 to make css as light as possible (still takes ~1MB).
Light mode did get also light navbar menu. Should it stay as it was, with dark colours?

Editor buttons are generated by javascript thus I have to find a workaround.
Probably with additional css rules.
Also focus and preview buttons will get dark versions.

Any feedback would be appreciated as I might have missed something.

@Joduai
Copy link
Contributor Author

Joduai commented Nov 21, 2024

@danpros
I've seen changes to bring back dark dashboard.
A bit of a pity nobody mentioned about that.
I thought lately that maybe a 3rd option would be useful?
The default light with dark dashboard, full light and full dark.

@danpros
Copy link
Owner

danpros commented Nov 21, 2024

@Joduai thank you for this. I have released this feature in 3.0.2. There seems to be no need for a third option, the current options are more than enough.

@danpros danpros closed this as completed Nov 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants