.theme-dark
{
  // accent colors
  $color-primary: #fff; //#f9c202; //#0d83f0; #22272e
  $color-primary-fg: #000;
  $color-primary-low: #{rgba(#fff, 0.2)};
  $color-secondary: #94c4bb;
  $color-secondary-fg: #fff;
  $color-tertiary: #c4e4de;
  $color-tertiary-fg: #2c3036;

  // foreground colors
  $color-fg: #fafafa;
  $color-fg-shade-1: #aaacaf; // dim
  $color-fg-shade-2: #8c9094; // dim-two
  
  // background colors  
  $color-bg: #181c22;
  $color-bg-shade-0: #1d2229;
  $color-bg-shade-1: #22272e; // bright
  $color-bg-shade-2: #1c2026; // dim
  $color-bg-shade-3: #2d323b; // bright-two
  $color-bg-shade-4: #363c45; // bright-three
  $color-bg-shade-5: #43484f;
  $color-bg-shade-6: #43484f;
  $color-bg-shade-7: #43484f;

  /*$color-primary: #eee; //#0d83f0; #22272e
  $color-primary-fg: #222;
  $color-primary-low: #{rgba(#2c3036, 0.2)};
  $color-secondary: #94c4bb;
  $color-secondary-fg: #fff;
  $color-tertiary: #c4e4de;
  $color-tertiary-fg: #2c3036;

  // foreground colors
  $color-fg: #eee;
  $color-fg-shade-1: #838383; // dim
  $color-fg-shade-2: #8c9094; // dim-two
  
  // background colors  
  $color-bg: #1d1d1d;
  $color-bg-shade-0: #232323;
  $color-bg-shade-1: #282828; // bright
  $color-bg-shade-2: #333333; // dim
  $color-bg-shade-3: #3b3b3b; // bright-two
  $color-bg-shade-4: #4a4a4a; // bright-three
  $color-bg-shade-5: #43484f;
  $color-bg-shade-6: #43484f;*/

  // misc colors
  $color-overlay-shade: rgba(0, 0, 0, 0.3);


  // ----------------------------------------------------------------------------------

  --color-accent: #{$color-primary};
  --color-accent-fg: #{$color-primary-fg};

  // accent colors
  --color-primary: #{$color-primary};
  --color-primary-low: #{$color-primary-low};
  --color-primary-text: #{$color-primary-fg};
  --color-secondary: #{$color-secondary};
  --color-secondary-text: #{$color-secondary-fg};
  --color-tertiary: #{$color-tertiary};
  --color-tertiary-text: #{$color-tertiary-fg};

  // generic shades 
  // (try to avoid them)
  --color-bg: #{$color-bg};
  --color-bg-shade-1: #{$color-bg-shade-1};
  --color-bg-shade-2: #{$color-bg-shade-2};
  --color-bg-shade-3: #{$color-bg-shade-3};
  --color-bg-shade-4: #{$color-bg-shade-4};
  --color-bg-shade-5: #{$color-bg-shade-5};

  // texts
  --color-text: #{$color-fg};
  --color-text-dim: #{$color-fg-shade-1};
  --color-text-dim-one: #{$color-fg-shade-2};

  // page background
  --color-page: #{$color-bg};

  // boxes
  --color-box: #{$color-bg-shade-1};
  --color-box-light: #{$color-bg-shade-2};
  --color-box-nested: #{$color-bg-shade-2};

  // buttons
  --color-button: #{$color-primary};
  --color-button-text: #{$color-primary-fg};
  --color-button-light: #{$color-bg-shade-3};
  --color-button-light-onbg: #{$color-bg-shade-3};

  // forms
  --color-input: #{$color-bg-shade-2};
  --color-input-border: 1px solid transparent; //#{$color-bg-shade-5};
  --color-input-placeholder: #{$color-fg-shade-1};
  --color-check: #{$color-bg-shade-3};
  --color-checked: #{$color-primary};
  --color-checked-fg: #{$color-primary-fg};
  --color-toggle: #{$color-bg-shade-3};
  --color-toggle-fg: #{$color-fg};
  --color-toggled: #{$color-primary};
  --color-toggled-fg: #{$color-primary-fg};
  --color-input-focus-bg: #{$color-bg-shade-1};
  --color-input-focus-border: 1px solid #{$color-bg-shade-5}; 
  --color-input-focus-shadow: 0 0 0 4px #{$color-bg-shade-2};

  // lines
  --color-line: #{$color-bg-shade-3};
  --color-line-onbg: #{$color-bg-shade-3};
  --color-line-dashed: #{$color-bg-shade-6};
  --color-line-dashed-onbg: #{$color-bg-shade-7};

  // trees
  --color-tree: #{$color-bg-shade-1};
  --color-tree-selected: #{$color-bg-shade-0};
  --color-tree-selected-line: #{$color-primary};

  // dropdowns
  --color-dropdown: #{$color-bg-shade-3};
  --color-dropdown-line: #{$color-bg-shade-4};
  --color-dropdown-border: transparent;
  --color-dropdown-selected: #{$color-bg-shade-4};

  // overlays
  --color-overlay-shade: #{$color-overlay-shade};
  --color-overlay: #{$color-bg-shade-1};
  --color-overlay-editor: #{$color-bg};
  --color-overlay-footer: #{$color-bg-shade-2};

  // tables
  --color-table: #{$color-bg-shade-1};
  --color-table-line-horizontal: #{$color-bg}; //#{$color-bg-shade-3};
  --color-table-line-vertical: transparent;
  --color-table-head: #{$color-bg-shade-1};
  --color-table-hover: #{$color-bg-shade-2};
  --color-table-highlight: #{$color-bg-shade-3};

  // pattern
  --color-pattern-transparent-a: #{$color-bg-shade-1};
  --color-pattern-transparent-b: #{$color-bg-shade-2};

  // misc
  --color-required-marker: #{$color-fg-shade-1};
  --color-synchronized: #{$color-primary};
}