SCSS色変数を扱うクールな方法

私のキャリアでは、SCSS(またはCSSのコース)で色変数を扱うさまざまな方法を試しました.
私がそれらを扱うために異なるアプローチを試みるたびに、しかし、最終的に、私はクールな方法を見つけました.

問題
異なるテーマ色管理の問題は命名規則であった.基本的に私はそのようなものを使っていた.

$background: white;
$primary: magenta;
$secondary: lawngreen;

$light: #FFF;
$dark: #000;

[...]

html {
  background-color: $background;
  color: $dark; /** white on black */
} 

異なるテーマパレットを使用している間、このメソッドは若干の制限を持ちます.時々暗いと軽いテーマの間で切り替えることは、光の色や背景とは逆のテーマとは対照的であるかもしれません.

/** LIGHT THEME */
$background: black;
$primary: magenta;
$secondary: lawngreen;

$light: #FFF;
$dark: #000;

/** DARK THEME */
$background: white;
$primary: magenta;
$secondary: lawngreen;

$light: #FFF;
$dark: #000;
[...]
html {
  background-color: $background;
  color: $dark; /** black on black with dark theme */
} 

ご覧のように、変数や/またはCSSプロパティを適切に設定しないと、予期しない動作をします.

解決策
私は、これらの問題をテーマに扱うために、私のキャリアの間、多くの異なる解決を試みました.私がこれまで見つけた最高のものは次のとおりです.

/** CONTRAST VARIABLES */
$<variable-name>: black;
$on-<variable-name>: white;

このメソッドでは、色変数とコントラスト色の変数を定義できます.
ですから、2つの異なるテーマを定義すれば、理解しやすく書くことができます.

/** LIGHT THEME */
$background: black;
$on-background: white;
$primary: lawngreen;
$on-primary: black;

/** DARK THEME */
$background: white;
$on-background: black;
$primary: lawngreen;
$on-primary: black;

[...]
html {
  background-color: $background;
  color: $on-background; /** black on white with dark theme */
} 

このシステムを使用すると、より良いあなたのテーマやスタイルを整理することができますコントラスト色で、各変数を定義することができます.
このシステムによるもう一つのクールな利点は、例えば逆の状態です.

[...]
pre {
  background-color: $primary;
  color: $on-primary;

  &.reversed {
    background-color: $on-primary;
    color: $primary;
  }
} 

簡単!以上です.

結論
これはSCSS(およびCSS)変数を定義するためのクールな方法です、私は生産の異なるプロジェクトでこのシステムを使用しており、新しいテーマを作成する本当に簡単です.
それについてどう思いますか.このケースを扱うより良い方法を知っていますか?はい私がコメントセクションで知っているならば!