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.
627
questions
-2
votes
1
answer
17
views
Is it posible to style a multi-tenant app with CSS Variables fetched via API? [closed]
I was wondering if my idea is feasible, I currently have a React application that is intended to be embedded within multiple client websites and match their look and feel.
I have been investigating ...
0
votes
2
answers
30
views
How can I make VS Code only suggest a CSS custom property for use in var() when it would actually be accessible?
I want VS Code to only provide suggestions for custom properties I can actually use. So when I type var() I want VS Code to give me a list of properties which will actually make a change...
In CSS you ...
0
votes
1
answer
22
views
Global import and use of mixins file in Angular
is there a way to create global mixins.scss file in src/assets/style/mixins.scss and be able to use it in every component style sheet without importing it all the time?
For the moment I managed to set ...
0
votes
0
answers
26
views
Nextjs themes with colors
How to make theming with color picking for elements?
Something like this
I tried css vars and change document classname, but I'm not sure this is the right way.
@tailwind base;
@tailwind components;
@...
1
vote
1
answer
53
views
Why does CSS variables defined like `:where(:root, :host) { --my-var: value }` inside Shadow DOM not work?
I've noticed that some of the CSS variables I've defined within a web component (using Shadow DOM) aren't functioning as expected. It appears that using :where(:root, :host) is causing the issue. When ...
0
votes
2
answers
27
views
changing inline css variable using javascript does not reflect on psudo selector content property
writing text using ::after pseudo selector using content property and it's value comes from inline css variable. now on click of the text I am able to change the css variable value ( can be seen in ...
4
votes
1
answer
77
views
Making value invalid on scroll doesn't make property revert to initial value
I am looking to make a CSS animation start running once the parent of the element I want to animate is fully scrolled into view with pure CSS using the View Timeline (currently only working in Chrome ...
0
votes
2
answers
62
views
Convert LESS lighten and darken to CSS color-mix [duplicate]
I'm trying to convert some LESS color functions (lighten/darken) to use the CSS color-mix function instead so that I can make use of CSS variables.
I have a dependency that uses these internally and ...
3
votes
3
answers
96
views
Calculating new value of CSS variable based on existing value
How do I recalculate a new value of a CSS variable (custom property) in a sub-element using calc() to modify the value inherited from a parent element?
This doesn’t work:
div {
height: var(--foo)...
0
votes
1
answer
37
views
Is there a way to globally change a css variable? [duplicate]
So I've got css to change --size to 500px, and a :root that sets it 0 zero. When I change --size on hover, it changes locally, and doesn't change the width of another element.
My HTML is:
<html>
...
0
votes
0
answers
15
views
How to use predefined hexadecimal css color variable in scss rgba with opacity? [duplicate]
What I have?
An scss file with pre-defined colors, which are css variables saved as hex color codes (e.g. --error-color: #B42318;).
I now want to use this --error-color variable within an rgba ...
1
vote
1
answer
113
views
Override a property with CSS variable only if that variable is declared
I have a flex box and I also want it to be hidden (display: none !important) only if a variable is set.
.d-flex {
display: flex; /*Set by Bootstrap library*/
}
.my-item {
display: var(--...
1
vote
2
answers
106
views
Make table cell background color based on input field inside it with CSS (not JS)
I know how to make a <td> cell background color reflect the value in the enclosed <input type=number> field using JavaScript (below is a snippet to do this). But is there a way to ...
3
votes
5
answers
183
views
Extending SCSS Styles in an Angular Dashboard with Plugin Architecture
I am developing a Dashboard in Angular with a Plugin Architecture to keep it easily extensible. The dashboard consists of pre-defined visualizations like scatter plots. I also want to allow adding ...
0
votes
1
answer
39
views
Reorder flexbox with pure css
I'd like to encode different orders into css variables in the flex-items style, and then switch the encoded order using the :checked psudo-class.
However, I don't know how to get around the scoping ...
0
votes
0
answers
64
views
CSS: How to apply transition to variable
So I have this spinning crystal that spins at one revolution per 10 seconds, but while the mouse is hovering over it I want the seconds per revolution to gradually ramp down to 5 seconds, ie. spin ...
0
votes
0
answers
19
views
nth-child selector based on CSS var number [duplicate]
I am trying to achieve something like this
:root {
--grid-columns: 6; /* default number of columns */
}
@media screen and (min-width: 768px) {
:root {
--grid-columns: 8; /* adjust number of ...
1
vote
2
answers
324
views
Overriding CSS variable in Svelte
I'm trying to set opacity of HSLA background color dynamically using CSS variables.
First I created a variable --color for color, which has --alpha variable in it as alpha. It works, but I am not able ...
0
votes
1
answer
392
views
How can I get color decorations for CSS variable references to work in VS Code?
I'm working on CSS custom properties and their modification. It seems that the best way to add/change the alpha channel to colors is to use hsl notation:
:root {
--green: 120deg, 100%, 50%;
}
.box {...
0
votes
1
answer
178
views
Workaround for CSS Calc with a variable that can be unitless [duplicate]
I have a tooltip implementation that uses some CSS variables to customize. I'm using CSS calc to calculate arrow position inside like below:
--size: 16px;
--border-size: 1px;
--arrow-position: calc((...
0
votes
1
answer
181
views
How to change alpha of an HSL color if the color comes from a CSS custom property? [duplicate]
I have a list of HSL colors coded as CSS custom properties and I want to manipulate their alpha channel.
What I have tried:
:root {
--color: hsl(25, 33%, 93%);
}
.test { box-shadow: ... hsla(var(--...
0
votes
0
answers
13
views
Use CSS3 variable and SASS rgba($hex, $alpha) function isn't working in Angular
I build Angular project, and have following sass code:
// style.scss
:root {
--style: rgba(#fff, 0.5);
}
Angular render CSS file (I use the CSS file in my project):
// style.css
:root {
--style: ...
0
votes
0
answers
53
views
Material Angular 14 - Global Variables not working
rRecently upgraded to Material Angular 14 and Material Angular CSS Vars v3.
We have a lot of customization of the angular material components so we use the native scss files and leverage them. In our ...
1
vote
3
answers
332
views
How to change font size using CSS variables and localstorage
I'm trying to write a script in Javascript that will change the property of a CSS variable that determines the body's font size, based on a button click, that will then save to localstorage. I've ...
0
votes
3
answers
249
views
Is it possible to have a variable in the name of a CSS class?
I'm implementing a set of classes for each letter of a word, and assigning each of them a transition-delay that is a multiple of the position of the letter.
For example:
<span class="char1&...
0
votes
0
answers
77
views
Global (static) number sass variable
We have an Angular application with multiple inner libraries, and some global scss files with styles and variables, which we use in all or multiple of our components's scss files.
I'm currently ...
1
vote
2
answers
130
views
Using the calc function with fr units
I have a 3x3 css grid for which I want to have the respective two outer column and row sizes be calculated. The middle ones are 1fr.
So far I have:
(see also this codepen)
html {
--zoom-scale: 1;
}...
1
vote
1
answer
101
views
why does font-family fallback to user-agent when css variable is defined but font is not available
The situation is when using css variables with font-family, the defined default font-family is not the fallback font-family.
We have a css variable defined for --myFontFamily.
When the font-family ...
0
votes
1
answer
176
views
How to reactively change css variables in svelte?
I want to display objects like this one inside a css grid:
let data = {
rows: [
{
id: "id",
col1: "value1",
col2: "value2",
},
...
0
votes
0
answers
19
views
Weird scoping of CSS variables [duplicate]
I have the following code in my project:
:root,
[data-theme=light] {
--main-color: red;
--action-color: var(--main-color);
}
[data-theme=dark] {
--main-color: blue;
}
.action-box {
...
0
votes
0
answers
21
views
Overwriting css variables in selector scope does not update gradient angle [duplicate]
:root {
--color-primary: #1999CC;
--gr-deg-x: 270deg;
--gr-primary-fade-x: linear-gradient(var(--gr-deg-x), var(--color-primary) 0%, rgba(0, 0, 0, 0) 50%);
}
.myselector {
--gr-deg-x: ...
0
votes
1
answer
166
views
Type '"var(--header-position)"' is not assignable to type 'Position | undefined'
Description of Problem
I'm trying to use A CSS Custom property to style a component in a nextjs application using TypeScript. Every other CSS property accepts the CSS variables except for the position ...
1
vote
2
answers
102
views
JS style.setProperty not called every time
Hi, this is my first question on stackoverflow, so please dont roast me more than necessary :)
i have a function called by a eventListener on mousemove. the function writes the mouse coords to two css ...
2
votes
1
answer
275
views
How do you pass in a dynamic percentage into a CSS variable from JavaScript?
The general idea of what I'm doing is that I have a React component that I've created, where I'm rendering it out based on dynamic data that gets mapped through. The wrapper div has a height of 100%, ...
0
votes
1
answer
136
views
Using jQuery to set CSS Variable for Keyframe Animation - Non-functional in Safari and Mobile
I have a CSS keyframe animation that uses a CSS variable as one of the animation properties. This variable is defined in jQuery. The entire animation seems to work fine in Chrome and Firefox. However, ...
0
votes
0
answers
131
views
CSS Variable doesnt work in using Global Component and Styled Component of Emotion and Gatsby
i declare CSS Variable in Global Component of Emotion. but it doesnt work.
i tried change variable name. but it 'sometimes' work.
even thought i removed calc variable, only remaining "--sidebar-...
0
votes
0
answers
21
views
transparency doesn't work with css variebles
Color appears when rgba is not typed. But then how can I give it transparency?
:root {
--color-primary-light: #7ed56f;
--color-primary-dark: #28b485;
}
.header {
height: 95vh;
...
3
votes
1
answer
105
views
Responsive float box loses bottom margin in mobile view, FF and Chrome passing viewport values differently into CSS, and other confounding mysteries
I put together a page that has a .floatbox, which sets the top and bottom margin based on the variable --currentViewportHeight (basically, I dynamically detect it with JS and insert it into my CSS, on ...
0
votes
1
answer
446
views
react-helmet global styles with :root style block tag in head
is it possible to add a :root style block with CSS variables to facilitate global styles in react? I've added the following to my layout.tsx page but i get a blank page when it's run (visual studio ...
0
votes
0
answers
25
views
Does an unset variable override an inherited value in css?
I want to create an override chain with variables.
So as long as the variable for a specific headline isn't set it takes the one from above.
Example code would look like this:
:root{
--h1-font: &...
2
votes
2
answers
349
views
Angular Material some css variables are undefined with standalone component
I'm using Angular 15 and @angular/material. I've created a standalone component that uses the mat-dialog-title, mat-dialog-content, and mat-dialog-actions. This component, as you can probably tell, ...
0
votes
0
answers
120
views
Setting a css variable from react and using it in a sass for loop
So, I'm trying to set a few css variables from a React component and it works in all cases except in a sass for loop.
In my component:
...
const containerStyles = {
'--size': `${size}px`,
'--...
0
votes
0
answers
48
views
CSS custom properties in an absolutely positioned pseudo-element
This absolutely positioned pseudo-element has a position:relative parent. We should expect its border styles to be applied, but they are not. Why?
:root {
--color-border: #E5E5E5;
--color-...
-1
votes
1
answer
71
views
CSS: how to compare the value of a custom property and apply styles based on the value?
I am attempting to build a status bar in CSS. The bar shows a percentage completed/remaining, and has tall end bars like this: |=========----------------|.
It uses two colors and a gradient to show ...
0
votes
0
answers
44
views
Inline, !important CSS not overwriting the regular CSS
I am overwriting a CSS variable in inline CSS, and forcing the update with !important, however I am still getting the initial variable value in the browser. Why is this happening and how can I avoid ...
0
votes
1
answer
111
views
Get elements heights using JS and pass into CSS variable
I want to get the height of an element and pass it into a css variable. The issue im having is when i try to pass that number into the navHeight variable it ends up returning as undefined.
<script&...
0
votes
1
answer
68
views
use SCSS to generate both defaults and css variables
I'm implementing a websites style.
For legacy support reasons, I need to support IE11, at least for a while. For workflow and my sanity reasons, I would like to use css variables where possible.
I ...
2
votes
0
answers
523
views
How to get a Tailwind theme color's actual value from resolveConfig?
I'm using Next.js and Tailwind. I have a theme defined as a set of CSS vars. How do I access the actual value that results from Tailwind theme colors defined with alphavalue?
When I try to access it ...
0
votes
0
answers
29
views
How to add two css variables and assign it to another variable [duplicate]
I have a scenario in which I need to add values(in pixels) and assign them to another variable and reuse this new variable in CSS.
Expected: width and height should use variable values of --width and ...
0
votes
0
answers
104
views
Applying class scoped CSS custom properties to web component
Is there a specific rule around how class scoped CSS custom properties cascade/are inherited with the shadow root? Let's say I have a default theme with custom properties scoped to :root and a dark ...