Merge pull request #524 from sgoudham/feat/add-catppuccin

feat(theme): add `catppuccin`

Author: GilbN

css/community-theme-options/catppuccin-frappe.css

@@ -0,0 +1,34 @@
+:root {
+  --main-bg-color: #303446;
+
+  --modal-bg-color: #292c3c;
+  --modal-header-color: #232634;
+  --modal-footer-color: #232634;
+
+  --drop-down-menu-bg: #414559;
+
+  --button-color: #414559;
+  --button-color-hover: #51576d;
+  --button-text: var(--text);
+  --button-text-hover: var(--text-hover);
+
+  --accent-color: 137, 180, 250; /* Mocha Blue */
+  --accent-color-hover: rgb(var(--accent-color), 0.8);
+  --link-color: var(--text);
+  --link-color-hover: #8caaee;
+  --label-text-color: #fff; /* have to break convention here */
+
+  --text: #c6d0f5;
+  --text-hover: var(--text);
+  --text-muted: a5adce;
+
+  /* Specials */
+  --arr-queue-color: #a6d189; /* Servarr apps + Bazarr */
+  --plex-poster-unwatched: #ef9f76;
+  --petio-spinner: invert(66%) sepia(15%) saturate(1451%) hue-rotate(185deg) brightness(105%) contrast(96%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ /* Blue */
+  --gitea-color-primary-dark-4: var(--accent-color);
+  --overseerr-gradient: linear-gradient(
+    var(--main-bg-color),
+    var(--main-bg-color)
+  ); /* Make sure this is compatible with whatever takes in the gradient */
+}

css/community-theme-options/catppuccin-latte.css

@@ -0,0 +1,34 @@
+:root {
+  --main-bg-color: #eff1f5;
+
+  --modal-bg-color: #e6e9ef;
+  --modal-header-color: #dce0e8;
+  --modal-footer-color: #dce0e8;
+
+  --drop-down-menu-bg: #ccd0da;
+
+  --button-color: #ccd0da;
+  --button-color-hover: #bcc0cc;
+  --button-text: var(--text);
+  --button-text-hover: var(--text-hover);
+
+  --accent-color: 137, 180, 250; /* Mocha Blue */
+  --accent-color-hover: rgb(var(--accent-color), 0.8);
+  --link-color: var(--text);
+  --link-color-hover: #1e66f5;
+  --label-text-color: #fff; /* have to break convention here */
+
+  --text: #4c4f69;
+  --text-hover: var(--text);
+  --text-muted: 6c6f85;
+
+  /* Specials */
+  --arr-queue-color: #40a02b; /* Servarr apps + Bazarr */
+  --plex-poster-unwatched: #fe640b;
+  --petio-spinner: invert(66%) sepia(15%) saturate(1451%) hue-rotate(185deg) brightness(105%) contrast(96%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ /* Blue */
+  --gitea-color-primary-dark-4: var(--accent-color);
+  --overseerr-gradient: linear-gradient(
+    var(--main-bg-color),
+    var(--main-bg-color)
+  ); /* Make sure this is compatible with whatever takes in the gradient */
+}

css/community-theme-options/catppuccin-macchiato.css

@@ -0,0 +1,34 @@
+:root {
+  --main-bg-color: #24273a;
+
+  --modal-bg-color: #1e2030;
+  --modal-header-color: #181926;
+  --modal-footer-color: #181926;
+
+  --drop-down-menu-bg: #363a4f;
+
+  --button-color: #363a4f;
+  --button-color-hover: #494d64;
+  --button-text: var(--text);
+  --button-text-hover: var(--text-hover);
+
+  --accent-color: 137, 180, 250; /* Mocha Blue */
+  --accent-color-hover: rgb(var(--accent-color), 0.8);
+  --link-color: var(--text);
+  --link-color-hover: #8aadf4;
+  --label-text-color: #fff; /* have to break convention here */
+
+  --text: #cad3f5;
+  --text-hover: var(--text);
+  --text-muted: a5adcb;
+
+  /* Specials */
+  --arr-queue-color: #a6da95; /* Servarr apps + Bazarr */
+  --plex-poster-unwatched: #f5a97f;
+  --petio-spinner: invert(66%) sepia(15%) saturate(1451%) hue-rotate(185deg) brightness(105%) contrast(96%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ /* Blue */
+  --gitea-color-primary-dark-4: var(--accent-color);
+  --overseerr-gradient: linear-gradient(
+    var(--main-bg-color),
+    var(--main-bg-color)
+  ); /* Make sure this is compatible with whatever takes in the gradient */
+}

css/community-theme-options/catppuccin-mocha.css

@@ -0,0 +1,34 @@
+:root {
+  --main-bg-color: #1e1e2e;
+
+  --modal-bg-color: #181825;
+  --modal-header-color: #11111b;
+  --modal-footer-color: #11111b;
+
+  --drop-down-menu-bg: #313244;
+
+  --button-color: #313244;
+  --button-color-hover: #45475a;
+  --button-text: var(--text);
+  --button-text-hover: var(--text-hover);
+
+  --accent-color: 137, 180, 250; /* Mocha Blue */
+  --accent-color-hover: rgb(var(--accent-color), 0.8);
+  --link-color: var(--text);
+  --link-color-hover: #89b4fa;
+  --label-text-color: #fff; /* have to break convention here */
+
+  --text: #cdd6f4;
+  --text-hover: var(--text);
+  --text-muted: a6adc8;
+
+  /* Specials */
+  --arr-queue-color: #a6e3a1; /* Servarr apps + Bazarr */
+  --plex-poster-unwatched: #fab387;
+  --petio-spinner: invert(66%) sepia(15%) saturate(1451%) hue-rotate(185deg) brightness(105%) contrast(96%); /* Made with https://codepen.io/jsm91/embed/ZEEawyZ */ /* Blue */
+  --gitea-color-primary-dark-4: var(--accent-color);
+  --overseerr-gradient: linear-gradient(
+    var(--main-bg-color),
+    var(--main-bg-color)
+  ); /* Make sure this is compatible with whatever takes in the gradient */
+}