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.

Filter by
Sorted by
Tagged with
-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 ...
jmhs11's user avatar
  • 1
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 ...
standard's user avatar
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 ...
LaCodeM's user avatar
  • 686
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; @...
MaybeRainQ's user avatar
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 ...
morishin's user avatar
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 ...
xkeshav's user avatar
  • 53.4k
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 ...
Ana's user avatar
  • 35.6k
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 ...
NRaf's user avatar
  • 7,417
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)...
dpk's user avatar
  • 200
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> ...
Slothscript's user avatar
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 ...
Kevin Cruijssen's user avatar
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(--...
Luke Vo's user avatar
  • 18k
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 ...
at.'s user avatar
  • 51k
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 ...
Highnoon's user avatar
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 ...
Tom Huntington's user avatar
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 ...
halsemarathmellsphv's user avatar
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 ...
josias's user avatar
  • 1,336
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 ...
Sateesh's user avatar
  • 141
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 {...
Limon Monte's user avatar
  • 52.7k
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((...
Murat Çorlu's user avatar
  • 8,227
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(--...
Ferit's user avatar
  • 8,732
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: ...
Reginna's user avatar
  • 219
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 ...
JaeTea's user avatar
  • 11
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 ...
ghostdata's user avatar
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&...
Alex Hoggett's user avatar
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 ...
Kevin Cruijssen's user avatar
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; }...
John's user avatar
  • 6,713
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 ...
greg's user avatar
  • 43
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", }, ...
Felkru's user avatar
  • 330
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 { ...
darkhorse's user avatar
  • 8,232
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: ...
Alex's user avatar
  • 9,921
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 ...
TheInfamousGrim's user avatar
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 ...
stepframe's user avatar
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%, ...
codingandpizza's user avatar
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, ...
Samuel Ayres's user avatar
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-...
wherehows's user avatar
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; ...
Bora Erdem's user avatar
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 ...
mig81's user avatar
  • 127
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 ...
pinman's user avatar
  • 93
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: &...
Ayes's user avatar
  • 27
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, ...
Jake Smith's user avatar
  • 2,332
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`, '--...
JackB's user avatar
  • 1
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-...
MGO's user avatar
  • 518
-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 ...
Ryan Griggs's user avatar
  • 2,467
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 ...
Tahi Reu's user avatar
  • 568
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&...
Halp_am_stuck1's user avatar
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 ...
Plagiatus's user avatar
  • 360
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 ...
rollerpigeon's user avatar
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 ...
Anjan Talatam's user avatar
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 ...
Runicode's user avatar
  • 291

1
2 3 4 5
13