theme.scss

$component-themes: ('light', 'dark');
$component-colors: ('primary', 'secondary', 'error');

$dark-theme: (
  /* Primary */
  primary: #bb86fc,
  on-primary: #000000,
  /* Secondary */
  secondary: #03dac6,
  on-secondary: #000000,
  /* Text */
  text: #d3d3d3,
  on-text: #686868,
  /* Background */
  background: #121212,
  on-background: #fafafa,
  /* Error */
  error: #cf6679,
  on-error: #000000
);

$light-theme: (
  /* Primary */
  primary: #6200ee,
  on-primary: #ffffff,
  /* Secondary */
  secondary: #028f81,
  on-secondary: #ffffff,
  /* Text */
  text: #686868,
  on-text: #d3d3d3,
  /* Background */
  background: #fafafa,
  on-background: #526488,
  /* Error */
  error: #b00020,
  on-error: #ffffff
);

$theme-list: (dark: $dark-theme, light: $light-theme);

@function t($t, $p) {
  @return map-get(map-get($theme-list, $t), $p)
}