api-client/assets/scss/themes.scss

@mixin baseTheme {
  --font-body: "Poppins", "sans-serif";
  --font-mono: "Roboto Mono", "monospace";
  --font-icon: "Material Icons";
}

@mixin darkTheme {
  // Background color
  --bg-color: rgba(32, 33, 36, 1);
  // Light Background color
  --bg-light-color: rgba(255, 255, 255, 0.04);
  // Dark Background color
  --bg-dark-color: rgba(0, 0, 0, 0.2);
  // Text color
  --fg-color: rgba(255, 255, 255, 0.9);
  // Light Text color
  --fg-light-color: rgba(255, 255, 255, 0.5);
  // Border color
  --brd-color: rgba(255, 255, 255, 0.05);
  // Error color
  --err-color: rgba(255, 255, 255, 0.05);
  // Tooltip color
  --tt-color: rgba(48, 48, 48, 1);
  // Editor theme
  --editor-theme: "twilight";
  // Active text color
  --act-color: rgba(32, 33, 36, 1);
}

@mixin lightTheme {
  // Background color
  --bg-color: rgba(255, 255, 255, 1);
  // Light Background color
  --bg-light-color: rgba(0, 0, 0, 0.05);
  // Dark Background color
  --bg-dark-color: rgba(0, 0, 0, 0.02);
  // Text color
  --fg-color: rgba(0, 0, 0, 0.9);
  // Light Text color
  --fg-light-color: rgba(0, 0, 0, 0.6);
  // Border color
  --brd-color: rgba(0, 0, 0, 0.1);
  // Error color
  --err-color: rgba(0, 0, 0, 0.1);
  // Tooltip color
  --tt-color: rgba(255, 255, 255, 1);
  // Editor theme
  --editor-theme: "iplastic";
  // Active text color
  --act-color: rgba(255, 255, 255, 1);
}

@mixin blackTheme {
  // Background color
  --bg-color: rgba(0, 0, 0, 1);
  // Light Background color
  --bg-light-color: rgba(255, 255, 255, 0.02);
  // Dark Background color
  --bg-dark-color: rgba(255, 255, 255, 0.04);
  // Text color
  --fg-color: rgba(255, 255, 255, 0.9);
  // Light Text color
  --fg-light-color: rgba(255, 255, 255, 0.5);
  // Border color
  --brd-color: rgba(255, 255, 255, 0.05);
  // Error color
  --err-color: rgba(255, 255, 255, 0.05);
  // Tooltip color
  --tt-color: rgba(32, 32, 32, 1);
  // Editor theme
  --editor-theme: "vibrant_ink";
  // Active text color
  --act-color: rgba(0, 0, 0, 1);
}

@mixin blueTheme {
  // Acent color
  --ac-color: theme("colors.blue.400");
}

@mixin greenTheme {
  // Acent color
  --ac-color: theme("colors.green.400");
}

@mixin indigoTheme {
  // Acent color
  --ac-color: theme("colors.indigo.400");
}

@mixin purpleTheme {
  // Acent color
  --ac-color: theme("colors.purple.400");
}

@mixin pinkTheme {
  // Acent color
  --ac-color: theme("colors.pink.400");
}

@mixin redTheme {
  // Acent color
  --ac-color: theme("colors.red.400");
}

@mixin yellowTheme {
  // Acent color
  --ac-color: theme("colors.yellow.400");
}

:root {
  @include baseTheme;
  @include darkTheme;
  @include greenTheme;
}

:root.light {
  @include lightTheme;
}

:root.dark {
  @include darkTheme;
}

:root.black {
  @include blackTheme;
}

:root[data-accent="blue"] {
  @include blueTheme;
}
:root[data-accent="green"] {
  @include greenTheme;
}
:root[data-accent="indigo"] {
  @include indigoTheme;
}
:root[data-accent="purple"] {
  @include purpleTheme;
}
:root[data-accent="pink"] {
  @include pinkTheme;
}
:root[data-accent="red"] {
  @include redTheme;
}
:root[data-accent="yellow"] {
  @include yellowTheme;
}