Bootstrap Dark-Mode (Black on Black colours)

[DaanSelen]

Hello MeshCentral developers.

I want to make an inquiry if its wanted that the 7-Day power state should be dark color on dark color?

It is not terrible, but it could be improved. What is your opinion?

[DaanSelen]

I checked, and this is also because my Browser is by default in dark mode.

Overal the dark mode is workable, but requires a bit more care in my opinion.

[si458]

ah right yes black on black is bad! must of missed that!
on day mode is looks great!

what colour did you want the bars then if the rows for days are alternativing greys

[DaanSelen]

ah right yes black on black is bad! must of missed that! on day mode is looks great! what colour did you want the bars then if the rows for days are alternativing greys

Yeah I saw that as well and thought it must be a oversight. If you are going to look at this issue - look for more instances like this if you must. I can also list a couple running through this!

Overal, I like the new UI!

[si458]

That's fine, what colour did u want for dark mode on graph?
U can tag onto this where darkmode looks bad like the graph :)

[DaanSelen]

That's fine, what colour did u want for dark mode on graph? U can tag onto this where darkmode looks bad like the graph :)

I will tag onto this then. I was thinking something like light-grey. A bit like how dark and light mode are often opposites of eachother. And just bright white seems too bright for a dark mode, especially when the point is to not burn your eyes out at night.

[si458]

find a colour and give us the hex haha

[DaanSelen]

A couple examples

[DaanSelen]

find a colour and give us the hex haha

Something like: #a6a6a6

[si458]

[DaanSelen]

Better... But I would like feedback from the community.

[marclaporte]

Something like: #a6a6a6

A benefit of Bootstrap is that we can have variables for this.

@gary-c-l @luciash: any wisdom?

[si458]

in theory from my testing today,
because we use the new bootstrap 5.3, we can use the new color and dark mode features
then basically inside the main css (style-bootstrap.css)
we set values likebackground-color: var(--bs-body-bg)
https://getbootstrap.com/docs/5.3/customize/color-modes/#custom-color-modes
and it would use the body background colour thats built into bootstrap
BUT
we can also use [data-bs-theme="blue"] inside our own bespoke css
and then allow fully customise values of --bs-body-bg to say blue
then when you toggle a theme switcher it will load that theme up instead!
https://getbootstrap.com/docs/5.3/customize/color-modes/#javascript

this is how its done with the 'dark' mode at the moment with bootstrap

the is however another class call .night at the moment already in meahcentral
which lets u customise colours for night mode and this might need replacing with the bootstrap dark mode

so it will take some time but at least its a start at rhe moment!

[DaanSelen]

Also:

Letters seem to clip against the bottom border, but everywhere.

[gary-c-l]

Hi marclaporte and all,

I'm not sure exactly what the status of the MeshCentral code is, regarding color modes, so I hope this comment is useful, as a little overview. We implemented Bootstrap color modes in Tiki 26, released in July 2023 (https://doc.tiki.org/Tiki26), and Bootstrap has been adding new CSS variables with each release, and the Tiki team has been enhancing the color modes functionality.

Basically, there needs to be a declaration of the data-bs-theme attribute on the HTML tag to specify the color mode for the page (or can be just for a specific page element), and then element color properties are determined by CSS variables according to which data-bs-theme selector is active.

A little JavaScript places the attribute on the HTML tag and implements the UI switch and recognizes the browser color theme preference when the switch is set to "auto".

This can be seen in the Bootstrap color modes page source (https://getbootstrap.com/docs/5.3/customize/color-modes/).

About specifying the colors of page elements, if the project uses SCSS compiling to produce the final stylesheets, there is a set of SCSS variables that are defined by the author for light and dark themes. This file - https://github.com/twbs/bootstrap/blob/main/scss/_variables-dark.scss - shows the dark versions, and the corresponding variables in _variables.scss define the light versions. When compiled, these create the sections in the final CSS file for the :root, [data-bs-theme=light] { } and [data-bs-theme=dark] { } selectors. For a project or site that isn't compiling the Bootstrap SCSS files, these sections could be created manually to produce the final CSS.

So, some page elements will "automatically" switch colors and have good contrast in both color modes because they are covered by the CSS variables that define their color in each mode, such as the body color and background color (as shown by lines 43 - 57 in the _variables-dark.scss file).

Other page elements will likely need to have a new class or classes added in order to be responsive to color mode switching, to avoid things like the dark-on-dark text mentioned in this thread. Bootstrap provides some foreground and background color classes and CSS variables for that kind of situation (https://getbootstrap.com/docs/5.3/customize/color/). So adding the appropriate class (like https://getbootstrap.com/docs/5.3/customize/color/#using-the-new-colors) and maybe using the Bootstrap color values as defaults should give good results. I don't think we needed to redefine these colors when fixing some color contrast issues in Bootswatch themes in Tiki generally speaking; the Bootstrap values worked fine.

-- Gary

[si458]

@gary-c-l this is exactually what we are in the process of doing :)
currently it switches between light and dark mode, yipee! (apart from a few area which need fixing but thats ok)
the is already javascript code ready to switch between the color modes!
we just need to merge them together, for example let end users pick the color scheme from the My Account page

[DaanSelen]

More :) The intel AMT is positioned weirdly

[si458]

just done load more bug fixes and icon changes and dark mode fixes, now off to bed! 💤
b398cb7
727080a
911d987
d44faed
54170c4