Change styles based on dark or light mode - javascript

I want to have a dark and a light theme on my Vue app.
I can create dark.scss file and change classes styles and use !important property to override styles defined in components.
Or I can use props in my components and change className with v-if based on the theme.
e.g. set class to className__light when theme is light otherwise set to className__dark.
which one is better in all situations like performance or time needed to do it?

Well i would not do it with classes. I would create CSS variables with either SCSS or you create CSS variables in :root
If you do it with the :root method then it should look something like this:
:root {
--background: red;
}
Then you can access it in any component like this for example:
.class {
background: var(--background); // the background will appear red
}
Now you can change the background color with just 1 CSS variables.
To change the variable with Javascript you just write following:
root.style.setProperty('--background', "green");
The problem here is that it isnt supported in IE if you care about browser support.
So you should create an fallback like this:
.class {
background: red; //fallback
background: var(--background); // the background will appear red
}

Related

How to change the editor default color to some other color in grapesjs in React?

How to change this default color into some other color in grapesjs?
You can change it using the CSS, using red as an example:
.gjs-one-bg { background-color: 'red' }
There is a lot of other classes you can alter as well, use Chrome dev tools to inspect them. Make sure to add !important if the styles don't apply.
You can change the default color by using setCustomCode function to set the css and then call render function.
editor.setCustomCode({
css: '.gjs-pn-commands { background: blue; }',
});
editor.render();

Apply CSS theme based on react state

I have a REACT application (bootstrapped with create react app and react-bootstrap) for which I am trying to add option to switch to DARK theme if user enabled this in his settings. I am storing the settings on server and fetching them into properties.
I have a separate stylesheet called dark.css where all my component styles are overriden.
dark.css (example):
#root {
background-color: var(--dark);
color: var(--light)
}
.card {
background-color: var(--dark); // overriding bootstrap styles here
}
I am trying to apply it at the root of my application like this:
componentWillReceiveProps() {
if (this.props.profile && this.props.profile.theme === 'dark') {
require('./styles/dark.css');
}
}
It works great when running the application locally with yarn start. But when I actually build the app using webpack, it works really strange. Part of the new styles are applied and part on, regardless of which theme is selected. For example background is applied from the main theme and ignored in the dark theme but text color is the opposite.
Why is this happening?
It seems that the dark stylesheet is not being applied at all when building the app with webpack, although everything looks correctly when running it with yarn start.
I guess that you have a naming clashes, which overrides your css.
React supports CSS Modules alongside regular stylesheets using the [name].module.css file naming convention.
CSS Modules let you use the same CSS class name in different files without worrying about naming clashes
I solved my issues simply by importing all styled css sheets and then prefixing them like this:
.dark .card {
color: black;
}
.light .card {
color: white;
}
I assign class to the wrapper based on my props:
<div id="root" className={theme}>
// content
</div>
Works like a charm.

How to change color :hover of ant-menu-submenu-arrow in AntD menu component for Vue.js?

I'm using Ant Design (antd) components library for Vue.js.
The menu component is quite simple to use:
https://vue.ant.design/components/menu/
I just want to change the ":hover" color of links (from default blue to red), which is possible by overriding CSS classes.
But is very difficult to me (avoid using ugly workarounds) to change also the color of the "submenu arrow", which remains blue.
Here is a simple example:
https://codesandbox.io/embed/vue-antd-sub-menu-arrow-color-34vlx
Anybody has already tried?
Try with
.ant-menu-submenu-title:hover {
.ant-menu-submenu-arrow::before, .ant-menu-submenu-arrow::after {
background: red!important;
}
}
But use lang="scss" on your style tag so you can compile scss or just fix my script with css syntax.
Try this within the style tag:
.ant-menu-submenu-arrow {
::before {
background: red
}
}

Change CSS theme in Angular

Im currently working on a Angular2 application with webpack and Im trying to set differents css themes according to the user.
For example : When the user connect, If it's a boy, I want to have my backgrounds blue, and if it's a girl I want the backgrounds to be pink.
Simply changing the css value with setAttribute or style.property wont work because the DOM is destroyed when changing tab in the application, it needs to be kinda permanent.
I've tried using different css stylesheets (1 for each theme) and linking them to my html with javascript when the user connect. Problem is, webpack is always adding automatically my css to my html when building the app.
Thanks for the help.
In your css, make a rule like :
.is-boy{
background: blue;
}
.is-girl{
background: pink;
}
and declare in you angular app a scope var like $scope.userSex = 'boy';
and on your body use ngClass like this
<body [ngClass]="{'is-boy': userSex === 'boy', 'is-girl': userSex === 'girl'}" ...
:host-context selector
You could use the :host-context selector to apply styles to your component based on the parent component.
styles:[`
:host-context(.parent1) div{
border: 1px solid blue;
}
:host-context(.parent2) div{
border: 1px solid blue;
}
`]
This allows you to conditionally apply styles based on a the selector that wraps the component.
plunker
edit:
So in your case - your parent would have a div with class .boy and a div with class .girl
You could load these containing divs with some flag controlled by ngIf
If you want to be permanent store class value in localStorage. To set the theme use ngClass with variable set to theme you need.

Ways to choose color theme of a website

On some websites you can choose a color theme of a website by clicking a button. Seems like nothing sophisticated, however is there any state of the art techniques to do that (maybe toggle between classes throughout a page or call different css files)?
Give your body a color class.
For example <body class="color-green">. You can toggle the class via JS:
document.body.classList.toggle('color-green').
In your CSS you have to create color-aware selectors:
.button {
color: blue;
}
.color-green .button {
color: green;
}
In my opinion that's the way to go.
If you create a lot of color rules in your CSS you should probably seperate them into their own files and include them when the change-color button is clicked.
i find the new css3 solutions very helpfull also the js:
element.classList.add('className');
element.classList.remove('className');
element.classList.toggle('className');
element.classList.contains('className');// check first
and so if you want to change the whole page's style you need to start from the highest element as you can't style parent nodes with css ...
example 1
with more than 2 classes
body.class1{color:blue}
body.class1>div{color:blue}
body.class1>div>a>p>whatever:hover{color:blue}
body.class2{color:green}
body.class2>div{color:green}
/*the div's inside the body with class 'class2' have a green font*/
body.class2>div>a>p>whatever:hover{color:green}
in this case you change the style to the whole page by just calling
body.classList.remove('class1');
body.classList.add('class2');
example 2
with 2 classes (one default and extra)
body{color:blue}
body>div{color:blue}
body>div>a>p>whatever:hover{color:blue}
body.extra{color:green}
body.extra>div{color:green}
body.extra>div>a>p>whatever:hover{color:green}
js:
body.classList.toggle('extra');
you can also change the whole css.. depends on how much your really wanna change.
or create the rules dynamically with javascript
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule
myStyle.insertRule("#blanc { color: white }", 0);
but i think the first one is the simplest to handle...
also if you have a container which will be displayed as grid,rows large icons the simplest solution is just to create a class on the parent container.like in example 1.
tip:another thing i use alot lately is hsla (hue,saturation,lightness,alpha);
i use this if i want to have the background and the font the same color but the font just slightly darker:
background-color:hsla(360,100%,20%,1);// 20% light
color:hsla(360,100%,80%,1);// 80% light

Categories