search

danpros / htmly

Simple and fast databaseless PHP blogging platform, and Flat-File CMS
https://www.htmly.com
GNU General Public License v2.0
1.09k stars 264 forks source link

[FEATURE REQUEST] dark mode for admin panel #809

Open Joduai opened 2 months ago

Joduai commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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

Joduai commented 3 weeks ago

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.