dark mode css

Moderators: grovkillen, Stuntteam, TD-er

Post Reply
Message
Author
chromo23
Normal user
Posts: 136
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 448 times
Last edited by chromo23 on 13 Oct 2021, 22:23, edited 4 times in total.

User avatar
Ath
Normal user
Posts: 1155
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

chromo23
Normal user
Posts: 136
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 439 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: 5514
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.

chromo23
Normal user
Posts: 136
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: 5514
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? ;)

chromo23
Normal user
Posts: 136
Joined: 10 Sep 2020, 16:02
Location: germany

Re: dark mode css

#7 Post by chromo23 » 12 Oct 2021, 21:49

:lol:

chromo23
Normal user
Posts: 136
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 4 times
testing and feedback is appreciated...

TD-er
Core team member
Posts: 5514
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.

chromo23
Normal user
Posts: 136
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 355 times
Bildschirmfoto 2021-10-13 um 15.05.29.png
Bildschirmfoto 2021-10-13 um 15.05.29.png (64.16 KiB) Viewed 351 times
Bildschirmfoto 2021-10-13 um 15.08.36.png
Bildschirmfoto 2021-10-13 um 15.08.36.png (125.69 KiB) Viewed 348 times
Last edited by chromo23 on 14 Oct 2021, 22:09, edited 9 times in total.

User avatar
iron
Normal user
Posts: 147
Joined: 24 Sep 2016, 08:37
Location: Veria, 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: 5514
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"

chromo23
Normal user
Posts: 136
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: 147
Joined: 24 Sep 2016, 08:37
Location: Veria, 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

chromo23
Normal user
Posts: 136
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: 147
Joined: 24 Sep 2016, 08:37
Location: Veria, 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

chromo23
Normal user
Posts: 136
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 296 times
Bildschirmfoto 2021-10-13 um 22.27.40.png
Bildschirmfoto 2021-10-13 um 22.27.40.png (73.4 KiB) Viewed 296 times

User avatar
iron
Normal user
Posts: 147
Joined: 24 Sep 2016, 08:37
Location: Veria, 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 277 times
-D

chromo23
Normal user
Posts: 136
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 4 times
and i made an automode css depending on your system style:
auto_esp.css.zip
(2.91 KiB) Downloaded 4 times
IMG_9890.GIF
IMG_9890.GIF (1.92 MiB) Viewed 254 times

Post Reply

Who is online

Users browsing this forum: No registered users and 31 guests