@mixin dark(
  $f1: #ccc,
  $f2: #ddd,
  $c1: #111,
  $c2: #222,
  $c3: #333,
  $c4: #888,
  $a1: #09f,
  $a2: #0bf,
  $a3: #0af,
  $cg: #593,
  $cr: #e33
) {
  #{--f1}: $f1;// Font Color Primary
  #{--f2}: $f2;// Font Color Headers
  #{--c1}: $c1;// Background Color Primary
  #{--c2}: $c2;// Background Color Secondary
  #{--c3}: $c3;// Table Rows, Block quote edge, Borders
  #{--c4}: $c4;// Disabled Buttons, Borders, mark background
  #{--a1}: $a1;// link color
  #{--a2}: $a2;// link hover/focus color
  #{--a3}: $a3;// link h1-h2 hover/focus color
  #{--cg}: $cg;// ins green, success
  #{--cr}: $cr;// del red, errors
}
@mixin light(
  $f1: #333,
  $f2: #222,
  $c1: #fff,
  $c2: #eee,
  $c3: #ddd,
  $c4: #555,
  $a1: #06e,
  $a2: #09f,
  $a3: #07f,
  $cg: #373,
  $cr: #d33
) {
  #{--f1}: $f1;// Font Color Primary
  #{--f2}: $f2;// Font Color Headers
  #{--c1}: $c1;// Background Color Primary
  #{--c2}: $c2;// Background Color Secondary
  #{--c3}: $c3;// Table Rows, Block quote edge, Borders
  #{--c4}: $c4;// Disabled Buttons, Borders, mark background
  #{--a1}: $a1;// link color
  #{--a2}: $a2;// link hover/focus color
  #{--a3}: $a3;// link h1-h2 hover/focus color
  #{--cg}: $cg;// ins green, success
  #{--cr}: $cr;// del red, errors
}