Page 1 of 1
dark mode css
Posted: 12 Oct 2021, 19:58
by chromo23
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 (115.44 KiB) Viewed 12910 times
Re: dark mode css
Posted: 12 Oct 2021, 20:14
by Ath
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.
Re: dark mode css
Posted: 12 Oct 2021, 20:37
by chromo23
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 (86.83 KiB) Viewed 12901 times
Edit: now i see what you meant... i´ll take care of this
Re: dark mode css
Posted: 12 Oct 2021, 20:42
by TD-er
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.
Re: dark mode css
Posted: 12 Oct 2021, 21:15
by chromo23
Very good idea...
I´ll do my best but remember i really don´t know what i am doing
Re: dark mode css
Posted: 12 Oct 2021, 21:21
by TD-er
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
What makes you think we know?
Re: dark mode css
Posted: 12 Oct 2021, 21:49
by chromo23
Re: dark mode css
Posted: 13 Oct 2021, 12:06
by chromo23
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)
testing and feedback is appreciated...
Re: dark mode css
Posted: 13 Oct 2021, 14:21
by TD-er
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.
Re: dark mode css
Posted: 13 Oct 2021, 14:32
by chromo23
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 (68.27 KiB) Viewed 12817 times
- Bildschirmfoto 2021-10-13 um 15.05.29.png (64.16 KiB) Viewed 12813 times
- Bildschirmfoto 2021-10-13 um 15.08.36.png (125.69 KiB) Viewed 12810 times
Re: dark mode css
Posted: 13 Oct 2021, 16:09
by iron
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 ?
Re: dark mode css
Posted: 13 Oct 2021, 16:47
by TD-er
The icons are just unicode characters.
So they actually are also just "text"
Re: dark mode css
Posted: 13 Oct 2021, 16:53
by chromo23
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?
Re: dark mode css
Posted: 13 Oct 2021, 20:03
by iron
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
Re: dark mode css
Posted: 13 Oct 2021, 20:57
by chromo23
can you please download the last file again. i updated it....
Re: dark mode css
Posted: 13 Oct 2021, 21:04
by iron
chromo23 wrote: ↑13 Oct 2021, 20:57
can you please download the last file again. i updated it....
They now retain the white color.
Re: dark mode css
Posted: 13 Oct 2021, 21:52
by chromo23
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 (72.85 KiB) Viewed 12758 times
- Bildschirmfoto 2021-10-13 um 22.27.40.png (73.4 KiB) Viewed 12758 times
Re: dark mode css
Posted: 14 Oct 2021, 09:00
by iron
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.
Re: dark mode css
Posted: 14 Oct 2021, 11:11
by chromo23
fixed it...
and enhanced usability on small screens
and i made an automode css depending on your system style:
- IMG_9890.GIF (1.92 MiB) Viewed 12716 times
Re: dark mode css
Posted: 22 Feb 2022, 18:52
by chromo23
