I am currently using variables keeping track of colors for both light and dark themes (e.g. --light-background-color, --dark-background-color). This isn't too hard with two themes but seems a bit manual and if faced with more themes it becomes impractical.
I have seen things like night shift that apply CSS filters which invert the colors on a webpage. How do these filters work? and how would I go about implementing them?
One way to go about this is to have a set of general theme color variables, rather than specific color variables for specific themes like you're trying to do here.
You can define these variables in the body element and override them with the class or a custom attribute of the body.
Use these variables as you would normally for your other HTML elements, and just change the attribute of the body element to apply a different theme.
The important part here is to make sure your theme color variables have corresponding contrasting color variables as well, so that things like white text on a dark background can swap to dark text on a white background.
Here's an example, where primary and secondary theme and contrast colors are defined in the body element, and are overridden when the body has the "dark" class applied to it:
document.querySelector("button").addEventListener("click", () => document.body.classList.toggle("dark"));
body {
--color-primary: #b4e9ce;
--color-primary-contrast: #000000;
--color-secondary: #308d43;
--color-secondary-contrast: #ffffff;
/* Other theme colors... */
}
body.dark {
--color-primary: #202d26;
--color-primary-contrast: #ffffff;
--color-secondary: #8f8f8f;
--color-secondary-contrast: #000000;
/* Other theme colors... */
}
button {
padding: 10px;
margin-bottom: 20px;
}
.wrapper {
padding: 20px;
background-color: var(--color-primary);
border: solid var(--color-secondary) 10px;
}
.wrapper h1 {
font-family: sans-serif;
text-align: center;
color: var(--color-primary-contrast);
}
<body>
<button>Toggle Theme</button>
<div class="wrapper">
<h1>Hello World</h1>
</div>
</body>
Single Line CSS will change Light Theme to Dark:
<style>
body
{
filter: invert(1);
}
</style>
Related
I would like to change the background color of the bootstrap theme.
This background:
background1
and this background:
background2
I want to change the color to blue for green. I was checking out the file sb-admin-2.min, but the maximios that I can do it, was change the collor of the buttons for example. Someone can help me?
Follow the link for see the file sb-admin-2.min
If you want to see my project, you can enter in this website: http://americaribeiro.atwebpages.com/escolar/ and use the email: romeu#romeu.com and password: 123
To change the background of the first image, change the background property of body element in index.php
body {
width: 100%;
height: 100%;
font-family: 'Open Sans', sans-serif;
background: red; // here
}
To change the background of the second image,in sb-admin-2.css
.bg-gradient-info {
background-color: red; //here, you can override this class
}
You can simply overwrite bootstrap styling with your own style.
.my-class {
background: red;
}
<div class="some-bootstrap-class my-class"> Hello </div>
You can use selector
body{ background: #36b9cc !important; } for using your green color.
I have a feather icon in my Angular project and I'm trying to use my primary color from color theme page but some reason I can't change the color.
HTML
<i-feather name="search"color="primary" class="icon"></i-feather>
CSS
.icon{
height: 40px;
width: 40px;
}
Note: I was able to change normally like color: blue; in my css file but it's not how I want to do. I want to reuse my primary color so that I can just change from global css later on.
styles-theme.scss
#mixin app-base-theme($theme) {
$primary: map-get($theme, primary);
.i-feather {
color: mat-color($primary);
}
It supposed to be the same color like the bar underneath
Any help or suggestion on how should I do. tx
I want to create a local inverted theme (modern browsers). Color shades are set using CSS Vars (CSS custom properties). Some elements have more contrast, others are low contrast. Now the inverted container has a black background. Everything within there, should be reversed. Dark grey should be light grey. Light grey should be dark grey.
My goal is to achieve this without reassigning the vars in CSS selectors. For this example it would be easy, but the actual code base is big and there are many selectors. So instead of that I just want change the CSS Vars. Also, I want keep the original CSS Vars to be editable.
Final goal mockup
Simple reassignment of the Vars (light = dark, dark = light) does not work, obviously. I tried to transpose the values to a new placeholder var, but that also didn't worked. Maybe I was doing it wrong? Is there a clean way? I don't think so.
I am aware of workarounds using SASS, or hacks using mix-blend-mode.
Playground:
https://codepen.io/esher/pen/WzRJBy
Example code:
<p class="high-contrast">high contrast</p>
<p class="low-contrast">low contrast</p>
<div class="inverted">
<p class="high-contrast">high contrast</p>
<p class="low-contrast">low contrast</p>
</div>
<style>
:root {
--high-contrast: #222;
--low-contrast: #aaa;
}
.high-contrast { color: var(--high-contrast) }
.low-contrast { color: var(--low-contrast) }
.inverted {
background-color: black;
/* Switching vars does not work
--high-contrast: var(--low-contrast);
--low-contrast: var(--high-contrast);
*/
/* Transposing Vars also doesn't work:
--transposed-low-contrast: var(--low-contrast);
--transposed-high-contrast: var(--high-contrast);
--high-contrast: var(--transposed-low-contrast);
--low-contrast: var(--transposed-high-contrast);
*/
}
/*
I am aware of this solution (see description above):
.inverted p.high-contrast { color: var(--low-contrast); }
.inverted p.low-contrast { color: var(--high-contrast); }
*/
<style>
What about something like this:
:root {
--high-contrast: var(--high);
--low-contrast: var(--low);
--high: #222;
--low: #aaa;
/* Yes I can put them at the end and it will work, why?
Because it's not C, C++ or a programming language, it's CSS
And the order doesn't matter BUT we need to avoid
cyclic dependence between variables.
*/
}
.high-contrast {
color: var(--high-contrast)
}
.low-contrast {
color: var(--low-contrast)
}
.inverted {
--high-contrast: var(--low);
--low-contrast: var(--high);
}
<p class="high-contrast">high contrast</p>
<p class="low-contrast">low contrast</p>
<div class="inverted">
<p class="high-contrast">high contrast</p>
<p class="low-contrast">low contrast</p>
</div>
Question
I need to target a <section> with a specific ID that will show up once in every page. But each will have a unique class. Some of the styles for the section will not apply if that class is added dynamically. Trying to figure out how to best nest the styling using Sass.
Code
Demo
Here is a demo on CodePen.
Because it has the class of .soldout, the background should be grey not red.
HTML
<section id="featured-product" class="soldout">
<h1>This car is no longer avaiable</h1>
<img src="https://img.gta5-mods.com/q95/images/2013-lamborghini-veneno-hq-digitaldials/bb4811-venenomain.jpg">
</section>
SCSS
#featured-product {
/* these styles always apply */
color: #f1f1f1;
font-family: 'Oswald', sans-serif;
text-align:center;
/* These classes should not apply if the section has a class of .soldout */
background: #FC332E;
padding: 25px 30px 45px;
& .soldout {
/* These styles only apply when the element has matching ID and this class added in*/
background: #BDBEBA;
padding: 25px;
}
img { width: 400px; }
}
Remove the space between & and .soldout {
&.soldout {
The way you had it, was you were looking for .soldout WITHIN #featured-product because you had the space.
You weren't looking for #featured-product WITH the class of .soldout
I'm developing a website that will contain two pages for testimonials. The first two testimonials will be displayed on the home page, then the other three testimonials will be displayed on the original testimonial page.
The original testimonial page background-color is different from the home page. I want to change the text color of the testimonials page. I want to know if is it possible to change the style of the same div but in different page using the CSS attributes and selectors?
This is the class that I want to style differently not on home page but on original .testimonial page
.testimonial-author {
color: #14C2E7;
font-family: 'lobster_1.4regular';
font-size: 35pt;
height: auto;
line-height: 0;
position: absolute;
text-shadow: 1px 1px #000000;
width: 850px;
}
I've tried to use the below method:
.other-pages-background, .testimonial-author{
color: red !important;
}
but it changes on all the pages.
thank you
You'd probably be better off wrapping your testimonials on the homepage in another div, so you can use your CSS to target the testimonials on the homepage, without effecting the testimonials page itself.
For example;
on your homepage you could have
<div class="homepage-testimonials">
<div class="testimonials">
<div class="testimonial-author">John Doe</div>
</div>
</div>
Your CSS;
.homepage-testimonials .testimonial-author { color: red; }
Comma means both selectors get the same styling. Try it without the comma to combine them:
.other-pages-background .testimonial-author{
color: red !important;
}
UPDATE:
Since you are using Wordpress, you can use the following with the appropriate page id:
body.page-id-111 {
color: red !important;
}
There are different ways to achieve this.
Include a additional css file say homepage.css in your homepage along with testimonials.css which will contain css to override the default color.
.testimonial-author {
color: $HOMEPAGE_COLOR;
}
Add some class body tag of your Homepage and overwrite the css property like below.
HTML
<body class="homepage">
CSS
/* Will be applied in Testimonial page */
.testimonial-author {
color: #14C2E7;
font-family: 'lobster_1.4regular';
font-size: 35pt;
height: auto;
line-height: 0;
position: absolute;
text-shadow: 1px 1px #000000;
width: 850px;
}
/* Will be applied in Homepage */
.homepage .testimonial-author {
color: #14C2E7;
}
I prefer the later options.
When you load the page ask php to write in the head AFTER the css load
<script>
.testimonial-author {
color: #color;}
</script>