Naming CSS alias same as assigned CSS variable

Question

I am working on changing around our design system works. I am attempting to assign a CSS alias back to a CSS variable of the same name. Is this possible?

For theming we are currently having a set of global css tokens and then use multiple sets of css aliases assigned to differing global tokens depending on the theme. Like so..

global-tokens.scss

  --global-color-white: #ffffff;
  --global-color-black: #000000;

light-theme.scss

  --background-color: var(--global-color-white);
  --foreground-color: var(--global-color-black);

dark-theme.scss

  --background-color: var(--global-color-black);
  --foreground-color: var(--global-color-white);

However we are looking to modify the way we are generating our tokens and aliases. The new method would not use a set of global tokens and instead assign the "aliases" directly to the their values. My question is it possible to do something like the following. We would be providing our consumers with our aliases and then we are swapping the css source depending on the theme. The issue I'm running into is trying to assign an alias back to a variable with the same name.

light-theme.scss

  --background-color: #ffffff;
  --foreground-color: #000000;

dark-theme.scss

  --background-color: #000000;
  --foreground-color: #ffffff;

aliases.scss

 --background-color: var(--background-color);
 --foreground-color: var(--foreground-color);

Answer 1

The snippet below demonstrates the basic approach you had in mind with toggling the variable values. Seems to work just fine. I'm toggling the contents of a <style> tag, but you could try toggling a src attribute on a linked stylesheet instead.

As for the stylesheets, I think you're overthinking things. It makes sense that something like this wouldn't work:

 --background-color: var(--background-color);

What would the color even be in that case? The value of --background-color is… --background-color? We need an actual color somewhere.

Assuming the various stylesheets consuming these variables are all using the aliases and not the tokens, all you really need to do just update the value of the aliases exactly how you were planning to and then get rid of aliases.scss completely. You don't need it any more. Just make sure you don't link to both themes in the document at the same time, and you'll be good to go.

const lightStyles = `
:root {
  --foreground-color: #000;
  --background-color: #fff;
}
`.trim();

const darkStyles = `
:root {
  --foreground-color: #fff;
  --background-color: #000;
}
`.trim();

let isLightTheme = true;

(() => {
  const styleTag = document.getElementById('style-tag');
  
  styleTag.textContent = lightStyles;
  
  const btn = document.getElementById('btn');
  
  const handleClick = () => {
    isLightTheme = !isLightTheme;
    
    styleTag.textContent = isLightTheme ? lightStyles : darkStyles;
  };
  
  btn.addEventListener('click', handleClick);
})();

body {
  background-color: var(--background-color);
  color: var(--foreground-color);
}

button {
  border: 2px solid var(--foreground-color);
  background: var(--background-color);
  color: var(--foreground-color);
}

<button id="btn" type="button">toggle theme</button>

<p>Lorem ipsum dolor sit amet.</p>

<p>Lorem ipsum dolor sit amet.</p>

<style id="style-tag"></style>