src/themes/default.scss
@use '../scss/variables' as var;

body {
  // global
  --color-fg: #ffffff;
  --color-bg: rgba(145, 145, 145, 0.5);
  --shadow: 0 0 0.04rem #000000;
  --icon-color: var(--color-fg);
  --icon-shadow: 0 0 0.03rem rgba(0, 0, 0, 0.6);

  // combatant
  --color-combatant-fg: var(--color-fg);
  --shadow-combatant: var(--shadow);

  // encounter
  --color-encounter-fg: var(--color-fg);
  --color-encounter-bg: var(--color-bg);
  --color-cover-fg: var(--color-fg);
  --color-cover-fg-active: var(--color-fg);
  --color-cover-bg: rgba(170, 170, 169, 0.55);
  --color-cover-bg-active: rgba(123, 170, 23, 0.5);
  --shadow-encounter: var(--shadow);
  --shadow-encounter-active: var(--shadow);

  // settings
  --color-settings-fg: var(--color-fg);
  --color-settings-bg: var(--color-bg);
  --color-settings-tab-fg: var(--color-fg);
  --color-settings-tab-bg: var(--color-bg);
  --color-settings-tab-fg-active: #333333;
  --color-settings-tab-bg-active: #eeeeee;
  --shadow-settings: var(--shadow);
  --shadow-settings-tab: var(--shadow);
  --shadow-settings-tab-active: none;

  // components
  --color-form-fg: var(--color-fg);
  --color-form-fg-active: #333333;
  --color-form-fg-disabled: rgba(255, 255, 255, 0.7);
  --color-form-fg-selection: var(--color-fg);
  --color-form-bg: #555555;
  --color-form-bg-active: #eeeeee;
  --color-form-bg-disabled: var(--color-form-bg);
  --color-form-bg-selection: #8aa2d3;
  --shadow-form: var(--shadow);
  --shadow-form-active: none;
  --shadow-form-selection: none;
}
