If-Mode

@function if-mode()

Toggles between two number values (or CSS var() functions that return numbers), depending on the current light/dark mode.

Parameters & Return

$light: (number | var())

The value to use for light mode

$dark: (number | var())

The value to use for dark mode

@return (calc())

A CSS calc() function that will toggle the proper values based on the value of --ccs-mode--zero and --ccs-invert--zero

Examples

scss

[data-ccs-theme] {
  --ccs-accent--theme: #{tools.if-mode(
    $light: var(--ccs-theme--1),
    $dark: var(--ccs-theme--2)
  )};
  --ccs-special--theme: #{tools.if-mode(
    $light: var(--ccs-theme--2),
    $dark: var(--ccs-theme--1)
  )};
}

css compiled

[data-ccs-theme] {
  --ccs-accent--theme: calc(
    var(--ccs-mode--zero) * var(--ccs-theme--1) + var(--ccs-invert--zero) * var(--ccs-theme--2)
  );
  --ccs-special--theme: calc(
    var(--ccs-mode--zero) * var(--ccs-theme--2) + var(--ccs-invert--zero) * var(--ccs-theme--1)
  );
}

scss

[data-ccs-theme='oddbird'] {
  --ccs-prime--config: 195;
  --ccs-accent--config: 330;
  --ccs-prime--theme: #{tools.if-mode(
    $light: var(--ccs-prime--config),
    $dark: var(--ccs-accent--config)
  )};
  --ccs-accent--theme: #{tools.if-mode(
    $light: var(--ccs-accent--config),
    $dark: var(--ccs-prime--config)
  )};
  --ccs-custom-hue: none;
}

css compiled

[data-ccs-theme=oddbird] {
  --ccs-prime--config: 195;
  --ccs-accent--config: 330;
  --ccs-prime--theme: calc(
    var(--ccs-mode--zero) * var(--ccs-prime--config) + var(--ccs-invert--zero) * var(--ccs-accent--config)
  );
  --ccs-accent--theme: calc(
    var(--ccs-mode--zero) * var(--ccs-accent--config) + var(--ccs-invert--zero) * var(--ccs-prime--config)
  );
  --ccs-custom-hue: none;
}