I'm on Bootstrap 4 and having a light colour .png image as background of navbar and body, while the footer area is in dark with off-white text colour. The default text colour is black, as the background image is light coloured.
The things get ugly when a user accesses the website on dark theme. The text colour on dark theme gets changed into light colour while the background image remains as light that leaves the text unreadable.
See below the text presentation in light and dark themes:
text on default (light) theme
text on dark theme
Can I keep my text colours unaffected irrespective of the theme of the users? Thanks in advance!
I got it fixed by simply using a transparent texture .png in place of a colour-filled texture .png image as background, with an adjustment in body {background:} colour.
Related
I'm currently working on a navbar (with a dark red background color) where the subsequent submenus have a light grey background color.
I'm using Scss and have managed to get the focus to work with the code bellow:
%focus {
#include focus-style(map-get($colors, "muted"), $focus-offset);
}
The color muted is connected to list of globally defined colors (in this case #636466) and focus-offset pulls the outline in by -2px.
The problem that arises is that there isn't enough contrast between the "muted" outline and the dark red background on the main navbar. I'm wondering how I'd go about adding a white outline when focus is on the main navbar and the "muted" color when it's on the grey submenus?
In light mode, when I hover over a word ( without selecting ), the entire background color of the paragraph turns light blue 👇.
but when I turn on dark mode (using dark reader extension) it is hard to find the hovered paragraph because of poor color contrast.
to make the background color of hovered text blue, I manually add this css code to the "dev tools" of dark reader
.ryNqvb:hover{
background-color: #007FFF;
}
and here's the resault:
but the equivalent english paragraph doesn't changes... I can't find the appropriate class or id to change the inputted text(english one)...
I wanna both paragraph becom blue 👇 what is the solution?
Provided the color wheel image how can we display it using CSS Sprites technique adding hover effects over the red, blue & yellow areas ? Clicking on any color area should open respective links.
Can we change the color in navigation from black to the color white?
You can't do that. And Apple recommend developers to use black background color.
I answered some days ago here How can I edit top status bar at AppleWatch?
It is impossible to edit the status bar appearance. There are some strong restrictions:
Status bar cannot be hidden
There are not ability to modify the black background
You cannot add or modify the back button or another image
The only thing you can do is to change the title color using tint color in your storyboard and the text both of through storyboard and source code.
There's no API to change the navigation bar's background colour right now. Ideally, your app's background colour would also be black. Check out the HIG for details: https://developer.apple.com/watch/human-interface-guidelines/
In the webform1 by using a color picker i have choosing a color.In the webform2 the color should be appeared as background color and if there is any letters or text in the webform2 it have to change as an opposite color.
for example:
background is black text is white.
background is blue text is red.
in a gmail settings themes are there if we change a theme background is different
color and text is another color.but in that themes colors are already fixed for background and text.but we using color picker
please advise me.
Thanks
This stack overflow question might have some answers for you.
Given a background color, how to get a foreground color that makes it readable on that background color?
Possible other solutions include:
Add picker for foreground color.
Create preset foreground colors for each available background color.