dark mode css
Moderators: grovkillen, Stuntteam, TD-er
dark mode css
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...
--file deleted--
It is work in progress and everyone is invited to make it better...
Last edited by chromo23 on 13 Oct 2021, 22:23, edited 4 times in total.
Re: dark mode css
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.
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)
Re: dark mode css
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
Edit: now i see what you meant... i´ll take care of this
--file deleted--
I don´t think the visibility of the icons is bad i will try some options
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.
Re: dark mode css
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
Very good idea...
I´ll do my best but remember i really don´t know what i am doing
I´ll do my best but remember i really don´t know what i am doing
Re: dark mode css
What makes you think we know?
Re: dark mode css
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:
the menu is finally aligned properly...
edit3:better colors (maybe)
testing and feedback is appreciated...
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;
}
edit3:better colors (maybe)
testing and feedback is appreciated...
Re: dark mode css
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.
- 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
Thanks a lot.. i´ll do this
here the last changes and an updated file for the last time in the forum:
----file deleted---
here the last changes and an updated file for the last time in the forum:
----file deleted---
Last edited by chromo23 on 14 Oct 2021, 22:09, edited 9 times in total.
Re: dark mode css
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 ?
I Assume those are text and the rest are actual icons ?
-D
Re: dark mode css
The icons are just unicode characters.
So they actually are also just "text"
So they actually are also just "text"
Re: dark mode css
What do you mean by nasty?
Did you cleared you browser cache for testing?
Re: dark mode css
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
Re: dark mode css
can you please download the last file again. i updated it....
Re: dark mode css
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..
The header got a new color and from these pictures you can se what have changed regarding the usability on mobile phones..
Re: dark mode css
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 (121.64 KiB) Viewed 12874 times
-D
Re: dark mode css
fixed it...
and enhanced usability on small screens
and i made an automode css depending on your system style:
and enhanced usability on small screens
and i made an automode css depending on your system style:
Re: dark mode css
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)
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)
Who is online
Users browsing this forum: No registered users and 4 guests