dark mode css

Moderators: grovkillen, Stuntteam, TD-er

Post Reply
Message
Author
User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

dark mode css

#1 Post by chromo23 » 12 Oct 2021, 19:58

i always wanted a dark mode for espeasy so i made one:
--file deleted--

It is work in progress and everyone is invited to make it better...
Bildschirmfoto 2021-10-12 um 19.55.44.png
Bildschirmfoto 2021-10-12 um 19.55.44.png (115.44 KiB) Viewed 12620 times
Last edited by chromo23 on 13 Oct 2021, 22:23, edited 4 times in total.

User avatar
Ath
Normal user
Posts: 3416
Joined: 10 Jun 2018, 12:06
Location: NL

Re: dark mode css

#2 Post by Ath » 12 Oct 2021, 20:14

Looking very nice!

You might want to have a closer look at the icons on the tabs, as when the screen/window is less wide, the tab-captions will be hidden, so the, here quite poor, contrast/visibility of the icon face is more important.
/Ton (PayPal.me)

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: dark mode css

#3 Post by chromo23 » 12 Oct 2021, 20:37

Fixes a mistake i made with the tables:
--file deleted--

I don´t think the visibility of the icons is bad i will try some options
Bildschirmfoto 2021-10-12 um 20.35.25.png
Bildschirmfoto 2021-10-12 um 20.35.25.png (86.83 KiB) Viewed 12611 times
Edit: now i see what you meant... i´ll take care of this
Last edited by chromo23 on 13 Oct 2021, 22:23, edited 5 times in total.

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: dark mode css

#4 Post by TD-er » 12 Oct 2021, 20:42

Would be nice if you can later also give the diff of both CSS's, so we can "patch" the values to switch between normal and dark mode theme without the need to include 2 full CSS files.

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: dark mode css

#5 Post by chromo23 » 12 Oct 2021, 21:15

Very good idea...
I´ll do my best but remember i really don´t know what i am doing :P

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: dark mode css

#6 Post by TD-er » 12 Oct 2021, 21:21

chromo23 wrote: 12 Oct 2021, 21:15 Very good idea...
I´ll do my best but remember i really don´t know what i am doing :P
What makes you think we know? ;)


User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: dark mode css

#8 Post by chromo23 » 13 Oct 2021, 12:06

Can you give me a very short introduction to github?
Do i have to fork the whole project or how do i do this?
I think i am finished for now...


edit: new version... changed the menu bar for better usability when using a smartphone and changed the max-width for showing labels to 750px so that tablets profit from
edit2: just added this:

Code: Select all

a.menu {
    height: 50px;
    display: flex;
    align-items: center;
}
the menu is finally aligned properly...

edit3:better colors (maybe)
esp.css.zip
(2.43 KiB) Downloaded 220 times
testing and feedback is appreciated...

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: dark mode css

#9 Post by TD-er » 13 Oct 2021, 14:21

To make a pull request, you indeed need to fork the project.

- Fork project
- Checkout your fork of the project on your computer
- Create a new branch (e.g. "feature/CSSdark")
- Checkout local branch on your PC
- Apply your changes
- Make a commit, with a descriptive text, where you include all your changes.
- Push your commit (pushes commit to your fork on GitHub)
- Open letscontrolit/ESPEasy project page on GitHub on the "pull request" tab: https://github.com/letscontrolit/ESPEasy/pulls
- You're presented a yellow bar there to open a pull request with your pushed branch.
- Complete pull request


As long as it is not merged, you may add new commits to your branch and push them.
As soon as you pushed new commits, they will be appended to the pull request.

This shows why it is important to make a new branch for each planned pull request, as you may otherwise interfere with pending pull requests if you want to work on other code.

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: dark mode css

#10 Post by chromo23 » 13 Oct 2021, 14:32

Thanks a lot.. i´ll do this

here the last changes and an updated file for the last time in the forum:


----file deleted---



Bildschirmfoto 2021-10-13 um 14.34.41.png
Bildschirmfoto 2021-10-13 um 14.34.41.png (68.27 KiB) Viewed 12527 times
Bildschirmfoto 2021-10-13 um 15.05.29.png
Bildschirmfoto 2021-10-13 um 15.05.29.png (64.16 KiB) Viewed 12523 times
Bildschirmfoto 2021-10-13 um 15.08.36.png
Bildschirmfoto 2021-10-13 um 15.08.36.png (125.69 KiB) Viewed 12520 times
Last edited by chromo23 on 14 Oct 2021, 22:09, edited 9 times in total.

User avatar
iron
Normal user
Posts: 221
Joined: 24 Sep 2016, 08:37
Location: Greece
Contact:

Re: dark mode css

#11 Post by iron » 13 Oct 2021, 16:09

Main, Config, Rules, Notifications icons get nasty on mouse over or when selected (On Chrome 94.0.4608 and FF 93.0)
I Assume those are text and the rest are actual icons ?
-D

TD-er
Core team member
Posts: 8643
Joined: 01 Sep 2017, 22:13
Location: the Netherlands
Contact:

Re: dark mode css

#12 Post by TD-er » 13 Oct 2021, 16:47

The icons are just unicode characters.
So they actually are also just "text"

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: dark mode css

#13 Post by chromo23 » 13 Oct 2021, 16:53

iron wrote: 13 Oct 2021, 16:09 Main, Config, Rules, Notifications icons get nasty on mouse over or when selected (On Chrome 94.0.4608 and FF 93.0)
I Assume those are text and the rest are actual icons ?
What do you mean by nasty?
Did you cleared you browser cache for testing?

User avatar
iron
Normal user
Posts: 221
Joined: 24 Sep 2016, 08:37
Location: Greece
Contact:

Re: dark mode css

#14 Post by iron » 13 Oct 2021, 20:03

TD-er wrote: 13 Oct 2021, 16:47 The icons are just unicode characters.
So they actually are also just "text"
If you mouse over or select the Main, Config, Rules, Notifications the icon color changes to black (from white) so it is black on black background.
Controllers, Hardware, Devices, Tools icons retain their color either on mouse over or select
-D

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: dark mode css

#15 Post by chromo23 » 13 Oct 2021, 20:57

can you please download the last file again. i updated it....

User avatar
iron
Normal user
Posts: 221
Joined: 24 Sep 2016, 08:37
Location: Greece
Contact:

Re: dark mode css

#16 Post by iron » 13 Oct 2021, 21:04

chromo23 wrote: 13 Oct 2021, 20:57 can you please download the last file again. i updated it....
They now retain the white color.
-D

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: dark mode css

#17 Post by chromo23 » 13 Oct 2021, 21:52

Did another update. Maybe you can try this...

The header got a new color and from these pictures you can se what have changed regarding the usability on mobile phones..
Bildschirmfoto 2021-10-13 um 22.27.51.png
Bildschirmfoto 2021-10-13 um 22.27.51.png (72.85 KiB) Viewed 12468 times
Bildschirmfoto 2021-10-13 um 22.27.40.png
Bildschirmfoto 2021-10-13 um 22.27.40.png (73.4 KiB) Viewed 12468 times

User avatar
iron
Normal user
Posts: 221
Joined: 24 Sep 2016, 08:37
Location: Greece
Contact:

Re: dark mode css

#18 Post by iron » 14 Oct 2021, 09:00

In the Nodes List of the main page there is a "third color" bar for the selected node that does not exist in the dark .css.
Attachments
NodeList.jpg
NodeList.jpg (121.64 KiB) Viewed 12449 times
-D

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: dark mode css

#19 Post by chromo23 » 14 Oct 2021, 11:11

fixed it...
and enhanced usability on small screens
dark_esp.css.zip
(2.49 KiB) Downloaded 221 times
and i made an automode css depending on your system style:
auto_esp.css.zip
(2.91 KiB) Downloaded 216 times
IMG_9890.GIF
IMG_9890.GIF (1.92 MiB) Viewed 12426 times

User avatar
chromo23
Normal user
Posts: 821
Joined: 10 Sep 2020, 16:02
Location: germany

Re: dark mode css

#20 Post by chromo23 » 22 Feb 2022, 18:52

Did some small updates from time to time to my css files.
These can be found here if someone is interested:
https://github.com/chromoxdor/espeasy_custom-css
(as always...rename the file with the color mode you want into esp.css and upload it to easpeasy via file upload)
css1.png
css1.png (83.68 KiB) Viewed 9012 times
css1d.png
css1d.png (82.93 KiB) Viewed 9012 times
css2.png
css2.png (65.42 KiB) Viewed 9012 times
css2d.png
css2d.png (69 KiB) Viewed 9012 times
css3.png
css3.png (198.69 KiB) Viewed 9012 times
css3d.png
css3d.png (220.22 KiB) Viewed 9012 times

Post Reply

Who is online

Users browsing this forum: No registered users and 33 guests