I am working on a website with different categories going to each one of those should change the color of all anchor-elements.
I know I can use style binding like this:
:style="{ color: theColor }"
But then I would have to attach to every link element manually, which seems counterintuitive.
Right now I am getting the color from the store in computed.
<script>
computed: {
theColor() {
return this.$store.state.theColor;
}
}
</script>
And the color itself is hex that I can change from the backend in netlify. So Hardcoding this into seperate classes is not an option.
From intuition I would just iterate through all a elements and give them the color from the store. But how do I do this with vue?
I found a solution using inside and then changing css variables inside :root.
See answer: https://stackoverflow.com/a/50651616/7458669
Related
I want to do the equivalent of style="background-image: url(foo.jpg); background-image: -webkit-image-set(url(foo_1x.jpg) 1x, url(foo_2x.jpg) 2x)" in a React component.
React requires me to provide a style object, not a string. But a JS object can't have the same property twice.
How do I get two background-image properties? Also, the order is significant – the image-set needs to be last.
It needs to be an inline style. (Because the URL is a dynamic, interpolated value retrieved from DB.)
I think I initially misunderstood your question. Seems you are looking to create a style object to pass as a prop to a component. You can combine your background images into a single comma separated list. You can use a string template to inject the dynamic image urls at runtime.
const style = {
backgroundImage: `url(${url1}),-webkit-image-set(url(${url2}) 1x, url(${url3}) 2x)`,
};
"spassvogel" on GitHub has a clever solution using CSS variables: https://github.com/facebook/react/issues/20757#issuecomment-776191029
The idea is to set CSS variables in the style property, like
style={ "--url1": "url(1.jpg)", "--url2": "url(2.jpg)" }
and then using them from an external style sheet, like
background-image: var(--url1);
and so on.
Turns out this still wasn't enough to solve everything I wanted – this rabbit hole runs ever deeper – but that's no fault of React's, so I'll consider this a valid answer.
I am trying to change my website to make color palette swapping easier, as we are still trying to find colors that work still. We are using Vue and Vuetify with SCSS generating our main CSS file. We are using almost exclusively Vue SFCs. I am currently stumped by a V-Tab issue where the "active" bar underneath won't change color.
The main issue is that, when using Vuetify components, in-file CSS has little impact. When I pass color="#ffffff" as a prop, it works wonderfully, everything is great. However, I cannot use CSS to change the colors in the same way at all (the produced code actually has the bar in a different div outside of the tab element).
I have tried overwriting the v-tabs-slider-wrapper element style every which way I could think of, to no avail
I have tried using SCSS functions inside the computed section of the SFC
I have tried basic CSS and SCSS
I have tried v-binding the color attribute to a computed function that referenced the SCSS function
I have tried using classes, ids, names, etc.
I tried background-color in all iterations as well, as a hope
If any one can help me, I'd appreciate it.
<template>
<v-tabs class="tabs">
<v-tab>Thing</v-tab>
<v-tab-item>Inner Thing</v-tab-item>
</v-tabs>
</template>
<script>
export default { };
</script>
<style lang="scss" scoped>
#import "../styles/main.scss";
.tabs div {// this was the only way to get the tab **text** to change, doesn't work for the slider bar
color: getColor_fromText("color"); //defined in main.scss
}
</style>
Did you try the color property of the slider?
<v-tabs-slider color="yellow"></v-tabs-slider>
Example here:
https://vuetifyjs.com/en/components/tabs/#custom-icons
If you want to change the background color of a specific tab you could try something like this:
<v-tabs
:background-color="activeTab === highlightTab ? 'deep-purple accent-4' : ''"
v-model="activeTab"
>
See full example (click on the second tab):
https://codepen.io/DomHaas/pen/qBZrZVy
I need to get some colour values out of a DB and use them in my CSS so that each customer has a colour branded version of my React.js application, but I'm not sure how.
I have other elements of branding such as logos, slogans and terminology which I'm pulling out of the DB, storing as a JSON file, and referencing around the site, which works fine, but the problem is the colours which I need to use in my stylesheet as I need to use the pseudo classes that CSS offer.
I've found this postcss-import-json package which claims to do this, but I can't seem to get it to work as intended.
So far I've...
Imported the package...
npm install --save-dev postcss-import-json
Created a JSON file called 'masterConfig.json'
Imported the above file into my main stylesheet using the name i've called my colour (primary)...
:root { #import-json "../Assets/MasterConfig/masterConfig.json" (primary); }
Added the above colour name to my list of colours...
:root {primary: primary}
I've also tried this with the -- prefix by changing to #import-json... (primary as primary prefix --)
...and added it in my code where it is to be used...
style={{background: "var(--primary)"}}
^^^ with and without the prefix
Am I doing something wrong?
I've noticed in the example it uses the $ symbol, so can this only be used with SCSS?
Any help with this, or any other way to achieve this would be great, thanks!
So, I was quite surprised that I didn't already know how to do this, it seems so trivial and doesn't need any additional package.
To change a CSS varibale from JavaScript code, simply target the root element as you normally would, and set the property!
CSS
Create a variable (I'm using a fallback colour)
:root {--primary: #123456;}
JavaScript
I'm using React, and set this is my App.js componentDidMount function so it's global to my app. I've hard-coded the colour, but this can be pulled from the DB.
componentDidMount() {
const root = document.documentElement;
root.style.setProperty('--primary', '#CCCC00');
}
BooYaa!
There appears to be two was to access the variable you've defined, I've done it in two separate ways and you can implement whichever makes your code neater!
Referencing the variable inline:
CSS
:root {
--testcolor: red;
}
HTML
<div style="background:var(--testcolor)">
Many words
</div>
Example of the working product in JS Fiddle: https://jsfiddle.net/ta37nzer/
Accessing the variable through a class:
CSS
:root {
--testcolor: red;
}
.exampleClass {
background: var(--testcolor);
}
HTML
<div class="exampleClass">
Many words
</div>
Example of the working product in JS Fiddle: https://jsfiddle.net/ta37nzer/1/
Similar to the question referenced below, I am trying to set the background and foreground color of the active tab label using theme colors. I mostly expected referencing the theme colors identifiers in CSS to not work. Is there a proper way to do so?
AngularJS Material Design : Different colors for different tabs in md-tabs
works:
.md-tab.md-active
{
background: green;
}
doesn't work:
.md-tab.md-active
{
background: accent;
}
The md-colors directive works with either value within an html tag, but they don't apply to the specific portions of md-tabs or md-tab that I would like:
<div md-colors="{color: 'accent', background: 'green'}">My Text</div>
What I'm trying to do is avoid hard coding the color that happens to be the accent (or could be primary) in the CSS. I'm thinking there is a way to programmatically determine the colors of accent/primary and then apply the colors. I haven't figured it out yet.
I think the issue is that you are trying to set the color to 'accent' which is not a color. As a variable it works in an Angular directive, but not is vanilla css.
i came across the following code. this code should automatically change the color of the text by specific word or other characters. the code does not work for me, is really supposed to work or is it not true
#text [all "(" ] {
color: blue;
}
The code is at the bottom of this page.
No. If you want to do that, you need to do something awful like giving each character a span with itself as the class, or (my preference) use Javascript. Knockout is a great library that can let you apply classes or CSS styling based on the values of variables or functions (among many other useful things), so if you have a table and want negative numbers to appear in red, your <TD> tags would look something like:
<td data-bind="with: someObject, text: someProperty, css: {'isRed':someProperty()<0}"></td>
and you'd need a JavaScript object like
var someObject = {
someProperty: ko.observable(0);
}
Then you just need to apply your Knockout bindings and you're set!