blog/sass/_theme.scss

@use 'colors/catppuccin-macchiato' as dark;
@use 'colors/catppuccin-latte' as light;
@use 'fonts';

:root {
  --pink: #{light.$pink};
  --mauve: #{light.$mauve};
  --red: #{light.$red};
  --maroon: #{light.$maroon};
  --peach: #{light.$peach};
  --yellow: #{light.$yellow};
  --green: #{light.$green};
  --teal: #{light.$teal};
  --sky: #{light.$sky};
  --sapphire: #{light.$sapphire};
  --blue: #{light.$blue};
  --lavender: #{light.$lavender};
  --text: #{light.$text};
  --subtext1: #{light.$subtext1};
  --subtext0: #{light.$subtext0};
  --overlay2: #{light.$overlay2};
  --overlay1: #{light.$overlay1};
  --overlay0: #{light.$overlay0};
  --surface2: #{light.$surface2};
  --surface1: #{light.$surface1};
  --surface0: #{light.$surface0};
  --base: #{light.$base};
  --mantle: #{light.$mantle};
  --crust: #{light.$crust};

  --main-width: min(1000px, 95%);
  --standard-border-radius: .8rem;
  --text-font: "Ubuntu Nerd Font", Helvetica, sans-serif;
  --title-font: "Ubuntu Nerd Font", Helvetica, sans-serif;
  --mono-font: "Ubuntu Mono Nerd Font", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --pink: #{dark.$pink};
    --mauve: #{dark.$mauve};
    --red: #{dark.$red};
    --maroon: #{dark.$maroon};
    --peach: #{dark.$peach};
    --yellow: #{dark.$yellow};
    --green: #{dark.$green};
    --teal: #{dark.$teal};
    --sky: #{dark.$sky};
    --sapphire: #{dark.$sapphire};
    --blue: #{dark.$blue};
    --lavender: #{dark.$lavender};
    --text: #{dark.$text};
    --subtext1: #{dark.$subtext1};
    --subtext0: #{dark.$subtext0};
    --overlay2: #{dark.$overlay2};
    --overlay1: #{dark.$overlay1};
    --overlay0: #{dark.$overlay0};
    --surface2: #{dark.$surface2};
    --surface1: #{dark.$surface1};
    --surface0: #{dark.$surface0};
    --base: #{dark.$base};
    --mantle: #{dark.$mantle};
    --crust: #{dark.$crust};
  }

  img,
  video {
    opacity: 0.8;
  }
}