Questions tagged [css-variables]
Custom properties (or CSS variables) allow to define stylesheet-wide values identified by a token and usable in all CSS declarations.
556
questions
1
vote
0
answers
18
views
How to chain parent and child css transform vars
In the example below only the first Hello gets sized down to 0.8. The second one keeps its original scale(1,-1) ignoring the parent transform.
I want the parents transforms to be chained.
I know I can ...
0
votes
0
answers
18
views
How to show color of CSS variable without changing themes
I am trying to create ui for changing the theme of the website. I am currently using next-themes to accomplish this and it is working. I am also using tailwind if that matters.
What I want to do is ...
0
votes
1
answer
17
views
Get current tranform value before applying the new one without javascript
Is there any way to apply the same css var in a consecutive way? Or to get the current css property value and then appending a new one? I need this to apply multiple transforms on some nested elements....
0
votes
0
answers
26
views
Apply CCS vars in a consecutive way without replacing the current value (concatenation instead of inheritance)
#path {
transform: var(--transf);
transform-origin: center;
transform-box: fill-box;
}
<svg viewBox="0 0 7000 7000" xmlns="http://www.w3.org/2000/svg">
<g id="Paths">
<path ...
0
votes
1
answer
20
views
CSS variables do not work in media queries of other React components
My app.css contain this css variable which is used in my css header component and it works well.
:root {
--fs-subtitle-spartan: 1rem;
}
The class that uses it in the header component :
.menu__items ...
0
votes
1
answer
44
views
get only the numeric value of CSS variable, without its type
I want to make some calculation in CSS and use the result as a non-typed value.
This is what I've tried:
:root {
--scale: 100vh / 1920;
}
canvas {
height: 1920px;
width: 1080px;
transform: ...
-1
votes
2
answers
89
views
How to apply different color on each logo
I tried similar way on any other tags, and it worked. So I tried it again for this. but it didn't work. Is there any thing I missed?? I'd appreciate if you let me know about any solution or advice.
...
0
votes
3
answers
65
views
How can I set Bootstrap 5's CSS variables using :root?
I have a Bootstrap 5 application that consumes a bunch of web components and all of the components use Bootstrap 5. I need to customize the theme on the fly inside of the parent that consumes all of ...
0
votes
0
answers
22
views
Access CSS variable inside SASS function [duplicate]
I have file typography.scss and I've defined my fonts in :root css variable
:root {
--configurable-font-family:'Roboto, "Helvetica Neue", sans-serif'
}
I'm trying to use the "--...
1
vote
1
answer
57
views
Can I detect if a specific CSS custom variable exists in the loaded styles?
I am creating some custom web components. One of the components is a light/dark theme switcher. However, this relies on a specific stylesheet being loaded.
I would like to output a warning if the ...
0
votes
0
answers
16
views
Set Fonts Color from Average color of Body Background Image
Trying to set a CSS variable (font color of specific elements) using the average of the body background image.
Part 1 - getting the average color value of an image
Found this and looks like it does ...
1
vote
1
answer
21
views
getPropertyValue function returns empty string on given DOM element in React TypeScript - How to read CSS vars in React
I've made a simple utility function that should read given CSS variable using getPropertyValue function on :root element.
Code:
export const getCssVariable = (name: string): string => {
const ...
0
votes
2
answers
34
views
Why :hover works only on first div [duplicate]
i'm experimenting with var in css and i found a bug(?). Hover works only on first div. Could someone help me with this issue? Thank you in advance
body {
background-color: aqua;
width: 100%;
...
2
votes
0
answers
22
views
how can PC Chrome debug iOS env variables, like env(safe-area-inset-bottom)?
I know iOS simulator which open an iOS iPhoneX can debug env variables, but I want to use chrome dev tools to invoke css variable.
0
votes
1
answer
28
views
Import css variable to the tsx file in next.js
I'm working with next.js and let's say I have a myStyles.css file like this:
.root {
--my-custom-variable: 1;
}
Now I want to use this variable value in the .tsx file. How can I do this?
0
votes
1
answer
54
views
Overwriting css root variables by adding a class to element [duplicate]
I want to create a dark mode and I wonder if that'd be possible to achieve using this kind of logic. Maybe with some javascript or smth? Or is it just plain stupid :)? So in that scenario I ofc have ...
0
votes
1
answer
42
views
React Create Application production build and CSS variables in IE11
I would like to know how to get rid of CSS variables in a production build. The fact is that I need to build a project for IE11 in which CSS variables are not supported. My project was created using ...
1
vote
1
answer
35
views
Can i use classes to change css variables?
Can I use classes to change CSS variables in SCSS file?
it works but I want to know if it's the right way to do it:
.header {
--transform: translate(-50%, 0);
transform: var(--transform);
&--...
0
votes
0
answers
20
views
javascript get output of css calc ( a css var that refers to other css vars) [duplicate]
I'd like to get the evaluated output of a css calc that refers to vars from parent elements. For example, the example below should log 21 not NaN. Is there a way to do this?
let outer = document....
1
vote
1
answer
64
views
Nuxt & Vue Social Chat
I installed the Vue Social Chat module into my Nuxt app and having trouble to understand how the props and color setting work. At present everything works fine, although the whatsapp Icon displayed is ...
1
vote
1
answer
34
views
Match css custom properties with Regxr
I want to match CSS custom properties with the Regxr pattern.
So I tried with /^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/gim which works fine with normal characters, but when it comes to emoji or ...
0
votes
0
answers
6
views
Is there a way to avoid duplicating cross-referential custom properties? [duplicate]
While trying to use custom properties in a more complex context... I came accross a problem which I have simplified here:
If I declare a chain of custom properties which refer to eachother in :root, ...
0
votes
0
answers
50
views
Css vars changes not simultaneously for nested elements
I have Vue 3 project with Pinia. I have store for theme
export const useThemeStore = defineStore('theme', {
state: () => ({
dark: false,
}),
getters: {
current(state) {
return ...
0
votes
0
answers
35
views
Define CSS variables inside animation and trigger inner animation from variable inside animation
I'm investigating if I can create a glow effect to jQuery Terminal underline cursor animation that is created with box-shadow.
TL;DR at the bottom there is a demo that is my attempt to define CSS ...
0
votes
0
answers
159
views
Are CSS Custom Properties not available to pseudo elements?
At the head of my page, I have a bunch of CSS Custom Properties that work in all of my stylesheets, however, when I try to access them via ::before/::after pseudo-elements, Chrome states that the ...
1
vote
1
answer
422
views
Pass CSS variable as prop to the react component
I am having this component that can be displayed in different colors depending on prop color that component received.
const Card = ({color}) => {
return (
<p style={{color}}>Some Text&...
0
votes
1
answer
42
views
How can I avoid inline styles with React?
The code written below works correctly, but I was told to re-do the code in order to avoid inline styles.
export default class ProductDetail extends Component {
makeStyle(name, value) {
...
0
votes
0
answers
35
views
How can i use css calc or clamp to apply dynamic styles follow fluid flex container?
on my website i implement a fluid flex container without any media queries like this:
.flexbox-grid {
--min: 20rem;
--gap: 1rem;
display: flex;
flex-wrap: wrap;
gap: var(--gap);
}
....
0
votes
1
answer
220
views
How to get the computed value of a CSS variable in Playwright?
I'm trying to use Playwright to test an Ionic React app.
Ionic makes extensive use of CSS variables.
My app allows users to change some of these colors, so I want to verify the color changes work ...
1
vote
1
answer
38
views
Possible to set hex color opacity independently?
Is it possible to set opacity value in hex color independently (to avoid repetition), or to append to var() e.g. var(--set1)1?
Example:
:root {
--set1: #abc;
--set1-1: #abc1;
--set1-3: #abc3;
-...
0
votes
0
answers
126
views
CSS Var in darken function - using SCSS
To summarise what I'm trying to do; effectively, through the mix of CSS variables and SCSS variables I'm attempting to create a "dark mode" (while future proofing for other potential themes ...
1
vote
1
answer
130
views
Using SCSS to generate CSS variables
I'm currently using SCSS to attempt to recreate a CSS block. The CSS block is as follows:
:root {
--Franklin-Blue: #1d1c4d;
--Light-Blue: #4e5d94;
--Pale-Blue: #7289da;
--Pure-White: #...
0
votes
1
answer
37
views
Change css variable for a section without affecting layout
I have a variable called --primary-color defined at root like this:
:root {
--primary-color: red;
}
In a small section in my site I want to change the primary-color for all nested elements. I ...
0
votes
0
answers
15
views
If the fallback included for a CSS custom property only becomes rendered when the browser supports custom properties - What are the fallback options? [duplicate]
I am learning about CSS custom properties and have a question regarding fallback options. As far as I have understood (maybe I am mistaken), the fallback will only be used if the custom property is ...
0
votes
0
answers
56
views
is it possible to merge path string of url in css?
Is it possible to merge path string of url() in css with the help of var()
if possible so please Help me and thanks in advance.
My Current CSS
<style type="text/css">
.svg {
...
0
votes
0
answers
14
views
why composed css variable not being set at the element level [duplicate]
why css variable is not being set at the element level when composed. For eg in the below case I would have expected the color to be 100deg
:root {
--regular: 90% 50%;
--color-secondary: hsl(var(...
0
votes
0
answers
17
views
Is it possible to self reference to current computed attribute using CSS? [duplicate]
One of the downsides of using variables in CSS is repeating the code
For example If I had 10 different color and I want to change them by hovering I have to define 10 variables in :root and then write ...
0
votes
1
answer
95
views
Convert opacity with var scss sass
I have some property like this
::root {
--light-grey: #EFEFEF;
}
.content-wrapper {
background-color: rgba(#EFEFEF, .4);
border-radius: 8px;
padding: 25px 33px;
}
But when I try
.content-...
1
vote
2
answers
43
views
css overwrite with var() default to previous value
Suppose I have the following style
.element {
color : blue;
}
Now some other place I'd like to overwrite the element style with a css var but if the variable was not available I want to switch to ...
2
votes
1
answer
50
views
XPath for SVG element with fill variable?
I tried to use XPath to select an svg element's fill attribute value, which uses an CSS variable, but I'm getting nothing back.
HTML:
<svg class="unf-icon" viewBox="0 0 24 24" ...
2
votes
1
answer
60
views
Set CSS variable with quotes and comma from JavaScript
I have the following CSS:
:root{
--font-family: "Times", serif;
}
body{
font-family: var(--font-family);
}
I also have a dropdown with the following values:
serif
sans-serif
'...
0
votes
1
answer
34
views
Adding css global variables using javascript
First of all if you read this question and I did have any misunderstandings of how css works please let me know
I'm trying to add some global variables to my stylesheets and I want to do it with ...
0
votes
1
answer
45
views
Modified custom property given back from getPropertyValue in some cases
I found a weired problem when working with custom properties.
Definition in css file:
--testprop: /test/01234;
When I access this property by calling
const style = window.getComputedStyle(window....
0
votes
1
answer
37
views
Create CSS Variable out of normal command?
I´m working on a website with a CMS tool. I want to change the background of an image preview, which is in css code this:
.mfp-container {
background: rgb(222, 222, 222);
}
So it's a really basic ...
0
votes
0
answers
28
views
In react, can you consume css variables inside of root? [duplicate]
:root {
--dark-main-color: #0d1117;
--light-main-color: #fefefa;
// defaulting to dark theme
--main-color: var(--dark-main-color);
}
I am defining css variables and then consuming those ...
1
vote
0
answers
184
views
css variables not working with react testing library
What I am doing is testing the dark mode feature. There is a button to toggle dark mode. When it clicks, the onClick event will trigger and the css variables values will be changed to dark mode. But ...
3
votes
1
answer
207
views
How can I create CSS variables with JavaScript? [duplicate]
I'm using :root to create some CSS variables. Is it possible to create them with JavaScript instead of CSS? Below is a simple example:
<div id="container"></div>
:root {
--...
0
votes
0
answers
15
views
css variable with fallback of multiple value not working
// just height works
transition: var(--transition, height 225ms ease, opacity 150ms ease);
// nothing works
transition: var(--transition, 'height 225ms ease, opacity 150ms ease');
besides, it seems ...
0
votes
2
answers
193
views
How can I make a dynamic effects on HR tag(horizontal line) with JS and CSS?
I wanna make a dynamic effect with CSS & JS and HR HTML elements: the idea is making 4 lines horizontally like that:
And making it dynamic by adding an input of type range and making them grow &...
0
votes
0
answers
16
views
Is it possible to interpolate a css property into a sass color function? [duplicate]
this will throw an error:
$dark-red: darken(#{var(--c-red)}, 10%);
This will too:
$dark-red: darken(var(--c-red), 10%);
So how to?