diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..49278a5
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,21 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# EditorConfig is awesome: https://EditorConfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# css
+[*.{css,scss}]
+indent_size = 2
+
+# documentation, utils
+[*.{md,mdx,diff}]
+trim_trailing_whitespace = false
diff --git a/.github/workflows/static.yml b/.github/workflows/static.yml
new file mode 100644
index 0000000..c222c01
--- /dev/null
+++ b/.github/workflows/static.yml
@@ -0,0 +1,41 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    tags:
+      - '*'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Prepare files
+        run: |
+          mkdir -p build
+          cp src/*.css build
+          cd build
+          sed -i 's/\[URL\]/https:\/\/adamperkowski.github.io\/jellyfin/g' *.css
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: build
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.github/workflows/whiskers.yml b/.github/workflows/whiskers.yml
new file mode 100644
index 0000000..7092449
--- /dev/null
+++ b/.github/workflows/whiskers.yml
@@ -0,0 +1,18 @@
+name: Whiskers Check
+
+on:
+  push:
+    paths: ['template.tera', 'src', '.github/workflows/whiskers.yml']
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: catppuccin/setup-whiskers@v1.0.0
+        with:
+          whiskers-version: '2.5.1'
+      - run: whiskers template.tera --check
diff --git a/README.md b/README.md
index 76c29fd..c28d66c 100644
--- a/README.md
+++ b/README.md
@@ -6,9 +6,9 @@
 </h3>
 
 <p align="center">
-	<a href="https://github.com/isabelroses/jellyfin/stargazers"><img src="https://img.shields.io/github/stars/isabelroses/jellyfin?colorA=363a4f&colorB=b7bdf8&style=for-the-badge"></a>
-	<a href="https://github.com/catppuccin/template/issues"><img src="https://img.shields.io/github/issues/isabelroses/jellyfin?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
-	<a href="https://github.com/isabelroses/jellyfin/contributors"><img src="https://img.shields.io/github/contributors/isabelroses/jellyfin?colorA=363a4f&colorB=a6da95&style=for-the-badge"></a>
+	<a href="https://github.com/adamperkowski/jellyfin/stargazers"><img src="https://img.shields.io/github/stars/adamperkowski/jellyfin?colorA=363a4f&colorB=b7bdf8&style=for-the-badge"></a>
+	<a href="https://github.com/catppuccin/template/issues"><img src="https://img.shields.io/github/issues/adamperkowski/jellyfin?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+	<a href="https://github.com/adamperkowski/jellyfin/contributors"><img src="https://img.shields.io/github/contributors/adamperkowski/jellyfin?colorA=363a4f&colorB=a6da95&style=for-the-badge"></a>
 </p>
 
 <p align="center">
@@ -36,17 +36,43 @@
 
 ## Usage
 
-1. Copy your theme from:
-  - [🌻 Catppuccin Latte](/src/latte.css?raw=1)
-  - [🪴 Catppuccin Frappe](/src/frappe.css?raw=1)
-  - [🌺 Catppuccin Macchiato](/src/macchiato.css?raw=1)
-  - [🌿 Catppuccin Mocha](/src/mocha.css?raw=1)
-2. Open settings navigate to Display and from there paste the css into the section called "Custom CSS code:"
-3. Then press save and you're done!
+1. Copy the theme import rule:
+    ```css
+    @import url('https://adamperkowski.github.io/jellyfin/theme.css');
+    ```
+2. Open settings, navigate to Display and paste the CSS into the section called "Custom CSS code"
+3. Copy your preferred flavor's import rule and paste it **after** the theme import:
+  - 🌻 Latte
+    ```css
+    @import url('https://adamperkowski.github.io/jellyfin/latte.css');
+    ```
+  - 🪴 Frappé
+    ```css
+    @import url('https://adamperkowski.github.io/jellyfin/frappe.css');
+    ```
+  - 🌺 Macchiato
+    ```css
+    @import url('https://adamperkowski.github.io/jellyfin/macchiato.css');
+    ```
+  - 🌿 Mocha
+    ```css
+    @import url('https://adamperkowski.github.io/jellyfin/mocha.css');
+    ```
+4. Press save and you're done!
+
+## Customization
+
+The accent color can be overrided by adding the following **after** the imports:
+```css
+:root {
+  --main-color: var(--mauve);
+}
+```
 
 ## 💝 Thanks to
 
 - [Isabel](https://github.com/isabelroses)
+- [Adam](https://github.com/adamperkowski)
 
 &nbsp;
 
diff --git a/src/frappe.css b/src/frappe.css
index 174d129..7141c76 100644
--- a/src/frappe.css
+++ b/src/frappe.css
@@ -1,220 +1,25 @@
 :root {
-    --main-color: #85c1dc;
-    --main-background: #303446;
-    --second-background: #292c3c;
-    --hover-background: #737994;
-    --main-text: #c6d0f5;
-    --dimmer-text: #949cbb;
-    --green-color: #a6d189;
-    --red-color: #e78284;
+  --rosewater: #f2d5cf;
+  --flamingo: #eebebe;
+  --pink: #f4b8e4;
+  --mauve: #ca9ee6;
+  --red: #e78284;
+  --maroon: #ea999c;
+  --peach: #ef9f76;
+  --yellow: #e5c890;
+  --green: #a6d189;
+  --teal: #81c8be;
+  --sky: #99d1db;
+  --sapphire: #85c1dc;
+  --blue: #8caaee;
+  --lavender: #babbf1;
+
+  --main-color: var(--sapphire);
+  --main-background: #303446;
+  --second-background: #292c3c;
+  --hover-background: #414559;
+  --main-text: #c6d0f5;
+  --dimmer-text: #949cbb;
+  --green-color: var(--green);
+  --red-color: var(--red);
 }
-
-::-moz-selection {
-    background: var(--main-color);
-    color: var(--main-background);
-    text-shadow: none;
-}
-
-::selection {
-    background: var(--main-color);
-    color: var(--main-background);
-    text-shadow: none;
-}
-
-.backgroundContainer,
-.formDialogHeader,
-.dialog,
-.dashboardGeneralForm,
-html {
-    background-color: var(--main-background);
-}
-
-.skinHeader,
-.nowPlayingBar {
-    background-color: var(--second-background);
-}
-
-.mainDrawer,
-.cardBox,
-.paperList {
-    background: var(--main-background);
-}
-
-.navMenuOption-selected {
-    background-color: var(--main-color);
-}
-
-.itemName {
-    color: var(--main-text);
-}
-
-.emby-input,
-.emby-textarea,
-.emby-select {
-    background: var(--second-background);
-    border-color: var(--second-background);
-}
-
-.emby-input:focus,
-.emby-textarea:focus,
-.emby-input:hover,
-.emby-textarea:hover,
-.emby-select-withcolor {
-    border-color: var(--main-color) !important;
-}
-
-.emby-button-foreground {
-    color: var(--main-text);
-}
-
-.emby-button-foreground:hover,
-.emby-button-foreground:focus {
-    color: var(--main-color);
-}
-
-.paper-icon-button-light {
-    color: var(--main-text);
-}
-
-.paper-icon-button-light:hover,
-.paper-icon-button-light:focus,
-.listItem:hover,
-.listItem:focus,
-.navMenuOption:hover,
-.navMenuOption:focus {
-    color: var(--main-color);
-    background-color: var(--hover-background);
-}
-
-.emby-tab-button-active>.emby-button-foreground {
-    color: var(--main-color);
-}
-
-.button-submit,
-.button-submit:focus,
-.button-alt,
-.button-alt:focus,
-.submit,
-.submit:focus,
-#btnAddPerson,
-#btnAddPerson:focus,
-.btnAddTrigger,
-.btnAddTrigger:focus,
-.btnAddUser,
-.btnAddUser:focus {
-    color: var(--main-background);
-    background: var(--main-color);
-}
-
-.cardText-secondary {
-    color: var(--dimmer-text);
-}
-
-.button-cancel,
-.button-cancel:focus {
-    color: var(--main-color);
-    background: var(--main-background);
-}
-
-#btnShutdown,
-#deviceDeleteAll,
-.btnDeleteImage,
-.btnResetPassword {
-    color: var(--main-background);
-    background: var(--red-color);
-}
-
-.btnRefresh {
-    background: var(--main-color);
-    color: var(--main-background);
-}
-
-.backgroundContainer.withBackdrop,
-.backdropContainer,
-.backgroundContainer {
-    background: var(--main-background);
-}
-
-.headerRight,
-.headerLeft {
-    color: var(--main-color);
-}
-
-.listItemButton,
-.lnkMediaFolder {
-    color: var(--main-text);
-}
-
-.listItemButton:hover,
-.listItemButton:focus {
-    background-color: var(--main-color);
-}
-
-.indicator {
-    background-color: var(--main-color);
-    color: var(--main-background);
-}
-
-.playedIndicator {
-    background-color: var(--green-color);
-    color: var(--main-background);
-}
-
-.alphaPickerRow {
-    color: var(--dimmer-text);
-}
-
-.itemAction:hover,
-.itemAction:focus {
-    color: var(--main-color);
-}
-
-/* General focus element color */
-
-.layout-tv .paper-icon-button-light.show-focus:focus {
-    color: var(--main-color) !important;
-}
-
-.emby-button.show-focus:focus {
-    background: var(--main-color) !important;
-}
-
-.button-flat:focus,
-.button-flat:hover {
-    color: var(--main-color);
-}
-
-.sectionTitle,
-.cardText,
-.pageTitle,
-.detailSectionContent,
-.trackSelections,
-.emby-input,
-.checkboxLabel,
-.itemDetailsGroup,
-.checkboxOutline,
-.emby-textarea,
-.emby-select,
-.label,
-.selectLabel,
-.sidebarHeader,
-.listItem,
-.dashboardGeneralForm,
-.dashboardSections,
-.navMenuOption,
-.inputLabel,
-.content-primary,
-legend {
-    color: var(--main-text);
-}
-
-.fieldDescription,
-.secondary,
-.listItemBodyText {
-    color: var(--dimmer-text);
-}
-
-.sessionAppName,
-.sessionNowPlayingInfo {
-    color: var(--main-background);
-}
\ No newline at end of file
diff --git a/src/latte.css b/src/latte.css
index 3dc6edc..79694e5 100644
--- a/src/latte.css
+++ b/src/latte.css
@@ -1,222 +1,25 @@
 :root {
-    --main-color: #209fb5;
-    --main-background: #eff1f5;
-    --second-background: #e6e9ef;
-    --hover-background: #ccd0da;
-    --main-text: #4c4f69;
-    --dimmer-text: #7c7f93;
-    --green-color: #40a02b;
-    --red-color: #d20f39;
+  --rosewater: #dc8a78;
+  --flamingo: #dd7878;
+  --pink: #ea76cb;
+  --mauve: #8839ef;
+  --red: #d20f39;
+  --maroon: #e64553;
+  --peach: #fe640b;
+  --yellow: #df8e1d;
+  --green: #40a02b;
+  --teal: #179299;
+  --sky: #04a5e5;
+  --sapphire: #209fb5;
+  --blue: #1e66f5;
+  --lavender: #7287fd;
+
+  --main-color: var(--sapphire);
+  --main-background: #eff1f5;
+  --second-background: #e6e9ef;
+  --hover-background: #ccd0da;
+  --main-text: #4c4f69;
+  --dimmer-text: #7c7f93;
+  --green-color: var(--green);
+  --red-color: var(--red);
 }
-
-::-moz-selection {
-    background: var(--main-color);
-    color: var(--main-background);
-    text-shadow: none;
-}
-
-::selection {
-    background: var(--main-color);
-    color: var(--main-background);
-    text-shadow: none;
-}
-
-.backgroundContainer,
-.formDialogHeader,
-.dialog,
-.dashboardGeneralForm,
-html {
-    background-color: var(--main-background);
-}
-
-.skinHeader,
-.nowPlayingBar {
-    background-color: var(--second-background);
-}
-
-.mainDrawer,
-.cardBox,
-.paperList {
-    background: var(--main-background);
-}
-
-.navMenuOption-selected,
-.navMenuOption-selected:hover {
-    background-color: var(--main-color);
-    color: var(--main-background);
-}
-
-.itemName {
-    color: var(--main-text);
-}
-
-.emby-input,
-.emby-textarea,
-.emby-select {
-    background: var(--second-background);
-    border-color: var(--second-background);
-}
-
-.emby-input:focus,
-.emby-textarea:focus,
-.emby-input:hover,
-.emby-textarea:hover,
-.emby-select-withcolor {
-    border-color: var(--main-color) !important;
-}
-
-.emby-button-foreground {
-    color: var(--main-text);
-}
-
-.emby-button-foreground:hover,
-.emby-button-foreground:focus {
-    color: var(--main-color);
-}
-
-.paper-icon-button-light {
-    color: var(--main-text);
-}
-
-.paper-icon-button-light:hover,
-.paper-icon-button-light:focus,
-.listItem:hover,
-.listItem:focus,
-.navMenuOption:hover,
-.navMenuOption:focus {
-    color: var(--main-color);
-    background-color: var(--hover-background);
-}
-
-.emby-tab-button-active>.emby-button-foreground {
-    color: var(--main-color);
-}
-
-.button-submit,
-.button-submit:focus,
-.button-alt,
-.button-alt:focus,
-.submit,
-.submit:focus,
-#btnAddPerson,
-#btnAddPerson:focus,
-.btnAddTrigger,
-.btnAddTrigger:focus,
-.btnAddUser,
-.btnAddUser:focus {
-    color: var(--main-background);
-    background: var(--main-color);
-}
-
-.cardText-secondary {
-    color: var(--dimmer-text);
-}
-
-.button-cancel,
-.button-cancel:focus {
-    color: var(--main-color);
-    background: var(--main-background);
-}
-
-#btnShutdown,
-#deviceDeleteAll,
-.btnDeleteImage,
-.btnResetPassword {
-    color: var(--main-background);
-    background: var(--red-color);
-}
-
-.btnRefresh {
-    background: var(--main-color);
-    color: var(--main-background);
-}
-
-.backgroundContainer.withBackdrop,
-.backdropContainer,
-.backgroundContainer {
-    background: var(--main-background);
-}
-
-.headerRight,
-.headerLeft {
-    color: var(--main-color);
-}
-
-.listItemButton,
-.lnkMediaFolder {
-    color: var(--main-text);
-}
-
-.listItemButton:hover,
-.listItemButton:focus {
-    background-color: var(--main-color);
-}
-
-.indicator {
-    background-color: var(--main-color);
-    color: var(--main-background);
-}
-
-.playedIndicator {
-    background-color: var(--green-color);
-    color: var(--main-background);
-}
-
-.alphaPickerRow {
-    color: var(--dimmer-text);
-}
-
-.itemAction:hover,
-.itemAction:focus {
-    color: var(--main-color);
-}
-
-/* General focus element color */
-
-.layout-tv .paper-icon-button-light.show-focus:focus {
-    color: var(--main-color) !important;
-}
-
-.emby-button.show-focus:focus {
-    background: var(--main-color) !important;
-}
-
-.button-flat:focus,
-.button-flat:hover {
-    color: var(--main-color);
-}
-
-.sectionTitle,
-.cardText,
-.pageTitle,
-.detailSectionContent,
-.trackSelections,
-.emby-input,
-.checkboxLabel,
-.itemDetailsGroup,
-.checkboxOutline,
-.emby-textarea,
-.emby-select,
-.label,
-.selectLabel,
-.sidebarHeader,
-.listItem,
-.dashboardGeneralForm,
-.dashboardSections,
-.navMenuOption,
-.inputLabel,
-.content-primary,
-legend {
-    color: var(--main-text);
-}
-
-.fieldDescription,
-.secondary,
-.listItemBodyText {
-    color: var(--dimmer-text);
-}
-
-.sessionAppName,
-.sessionNowPlayingInfo {
-    color: var(--main-background);
-}
\ No newline at end of file
diff --git a/src/macchiato.css b/src/macchiato.css
index 5b83caf..089cfca 100644
--- a/src/macchiato.css
+++ b/src/macchiato.css
@@ -1,220 +1,25 @@
 :root {
-    --main-color: #7dc4e4;
-    --main-background: #24273a;
-    --second-background: #1e2030;
-    --hover-background: #363a4f;
-    --main-text: #cad3f5;
-    --dimmer-text: #939ab7;
-    --green-color: #a6da95;
-    --red-color: #ed8796;
+  --rosewater: #f4dbd6;
+  --flamingo: #f0c6c6;
+  --pink: #f5bde6;
+  --mauve: #c6a0f6;
+  --red: #ed8796;
+  --maroon: #ee99a0;
+  --peach: #f5a97f;
+  --yellow: #eed49f;
+  --green: #a6da95;
+  --teal: #8bd5ca;
+  --sky: #91d7e3;
+  --sapphire: #7dc4e4;
+  --blue: #8aadf4;
+  --lavender: #b7bdf8;
+
+  --main-color: var(--sapphire);
+  --main-background: #24273a;
+  --second-background: #1e2030;
+  --hover-background: #363a4f;
+  --main-text: #cad3f5;
+  --dimmer-text: #939ab7;
+  --green-color: var(--green);
+  --red-color: var(--red);
 }
-
-::-moz-selection {
-    background: var(--main-color);
-    color: var(--main-background);
-    text-shadow: none;
-}
-
-::selection {
-    background: var(--main-color);
-    color: var(--main-background);
-    text-shadow: none;
-}
-
-.backgroundContainer,
-.formDialogHeader,
-.dialog,
-.dashboardGeneralForm,
-html {
-    background-color: var(--main-background);
-}
-
-.skinHeader,
-.nowPlayingBar {
-    background-color: var(--second-background);
-}
-
-.mainDrawer,
-.cardBox,
-.paperList {
-    background: var(--main-background);
-}
-
-.navMenuOption-selected {
-    background-color: var(--main-color);
-}
-
-.itemName {
-    color: var(--main-text);
-}
-
-.emby-input,
-.emby-textarea,
-.emby-select {
-    background: var(--second-background);
-    border-color: var(--second-background);
-}
-
-.emby-input:focus,
-.emby-textarea:focus,
-.emby-input:hover,
-.emby-textarea:hover,
-.emby-select-withcolor {
-    border-color: var(--main-color) !important;
-}
-
-.emby-button-foreground {
-    color: var(--main-text);
-}
-
-.emby-button-foreground:hover,
-.emby-button-foreground:focus {
-    color: var(--main-color);
-}
-
-.paper-icon-button-light {
-    color: var(--main-text);
-}
-
-.paper-icon-button-light:hover,
-.paper-icon-button-light:focus,
-.listItem:hover,
-.listItem:focus,
-.navMenuOption:hover,
-.navMenuOption:focus {
-    color: var(--main-color);
-    background-color: var(--hover-background);
-}
-
-.emby-tab-button-active>.emby-button-foreground {
-    color: var(--main-color);
-}
-
-.button-submit,
-.button-submit:focus,
-.button-alt,
-.button-alt:focus,
-.submit,
-.submit:focus,
-#btnAddPerson,
-#btnAddPerson:focus,
-.btnAddTrigger,
-.btnAddTrigger:focus,
-.btnAddUser,
-.btnAddUser:focus {
-    color: var(--main-background);
-    background: var(--main-color);
-}
-
-.cardText-secondary {
-    color: var(--dimmer-text);
-}
-
-.button-cancel,
-.button-cancel:focus {
-    color: var(--main-color);
-    background: var(--main-background);
-}
-
-#btnShutdown,
-#deviceDeleteAll,
-.btnDeleteImage,
-.btnResetPassword {
-    color: var(--main-background);
-    background: var(--red-color);
-}
-
-.btnRefresh {
-    background: var(--main-color);
-    color: var(--main-background);
-}
-
-.backgroundContainer.withBackdrop,
-.backdropContainer,
-.backgroundContainer {
-    background: var(--main-background);
-}
-
-.headerRight,
-.headerLeft {
-    color: var(--main-color);
-}
-
-.listItemButton,
-.lnkMediaFolder {
-    color: var(--main-text);
-}
-
-.listItemButton:hover,
-.listItemButton:focus {
-    background-color: var(--main-color);
-}
-
-.indicator {
-    background-color: var(--main-color);
-    color: var(--main-background);
-}
-
-.playedIndicator {
-    background-color: var(--green-color);
-    color: var(--main-background);
-}
-
-.alphaPickerRow {
-    color: var(--dimmer-text);
-}
-
-.itemAction:hover,
-.itemAction:focus {
-    color: var(--main-color);
-}
-
-/* General focus element color */
-
-.layout-tv .paper-icon-button-light.show-focus:focus {
-    color: var(--main-color) !important;
-}
-
-.emby-button.show-focus:focus {
-    background: var(--main-color) !important;
-}
-
-.button-flat:focus,
-.button-flat:hover {
-    color: var(--main-color);
-}
-
-.sectionTitle,
-.cardText,
-.pageTitle,
-.detailSectionContent,
-.trackSelections,
-.emby-input,
-.checkboxLabel,
-.itemDetailsGroup,
-.checkboxOutline,
-.emby-textarea,
-.emby-select,
-.label,
-.selectLabel,
-.sidebarHeader,
-.listItem,
-.dashboardGeneralForm,
-.dashboardSections,
-.navMenuOption,
-.inputLabel,
-.content-primary,
-legend {
-    color: var(--main-text);
-}
-
-.fieldDescription,
-.secondary,
-.listItemBodyText {
-    color: var(--dimmer-text);
-}
-
-.sessionAppName,
-.sessionNowPlayingInfo {
-    color: var(--main-background);
-}
\ No newline at end of file
diff --git a/src/mocha.css b/src/mocha.css
index aa17764..04c9462 100644
--- a/src/mocha.css
+++ b/src/mocha.css
@@ -1,220 +1,25 @@
 :root {
-    --main-color: #74c7ec;
-    --main-background: #1E1E2E;
-    --second-background: #181825;
-    --hover-background: #313244;
-    --main-text: #CDD6F4;
-    --dimmer-text: #9399B2;
-    --green-color: #a6e3a1;
-    --red-color: #f38ba8;
+  --rosewater: #f5e0dc;
+  --flamingo: #f2cdcd;
+  --pink: #f5c2e7;
+  --mauve: #cba6f7;
+  --red: #f38ba8;
+  --maroon: #eba0ac;
+  --peach: #fab387;
+  --yellow: #f9e2af;
+  --green: #a6e3a1;
+  --teal: #94e2d5;
+  --sky: #89dceb;
+  --sapphire: #74c7ec;
+  --blue: #89b4fa;
+  --lavender: #b4befe;
+
+  --main-color: var(--sapphire);
+  --main-background: #1e1e2e;
+  --second-background: #181825;
+  --hover-background: #313244;
+  --main-text: #cdd6f4;
+  --dimmer-text: #9399b2;
+  --green-color: var(--green);
+  --red-color: var(--red);
 }
-
-::-moz-selection {
-    background: var(--main-color);
-    color: var(--main-background);
-    text-shadow: none;
-}
-
-::selection {
-    background: var(--main-color);
-    color: var(--main-background);
-    text-shadow: none;
-}
-
-.backgroundContainer,
-.formDialogHeader,
-.dialog,
-.dashboardGeneralForm,
-html {
-    background-color: var(--main-background);
-}
-
-.skinHeader,
-.nowPlayingBar {
-    background-color: var(--second-background);
-}
-
-.mainDrawer,
-.cardBox,
-.paperList {
-    background: var(--main-background);
-}
-
-.navMenuOption-selected {
-    background-color: var(--main-color);
-}
-
-.itemName {
-    color: var(--main-text);
-}
-
-.emby-input,
-.emby-textarea,
-.emby-select {
-    background: var(--second-background);
-    border-color: var(--second-background);
-}
-
-.emby-input:focus,
-.emby-textarea:focus,
-.emby-input:hover,
-.emby-textarea:hover,
-.emby-select-withcolor {
-    border-color: var(--main-color) !important;
-}
-
-.emby-button-foreground {
-    color: var(--main-text);
-}
-
-.emby-button-foreground:hover,
-.emby-button-foreground:focus {
-    color: var(--main-color);
-}
-
-.paper-icon-button-light {
-    color: var(--main-text);
-}
-
-.paper-icon-button-light:hover,
-.paper-icon-button-light:focus,
-.listItem:hover,
-.listItem:focus,
-.navMenuOption:hover,
-.navMenuOption:focus {
-    color: var(--main-color);
-    background-color: var(--hover-background);
-}
-
-.emby-tab-button-active>.emby-button-foreground {
-    color: var(--main-color);
-}
-
-.button-submit,
-.button-submit:focus,
-.button-alt,
-.button-alt:focus,
-.submit,
-.submit:focus,
-#btnAddPerson,
-#btnAddPerson:focus,
-.btnAddTrigger,
-.btnAddTrigger:focus,
-.btnAddUser,
-.btnAddUser:focus {
-    color: var(--main-background);
-    background: var(--main-color);
-}
-
-.cardText-secondary {
-    color: var(--dimmer-text);
-}
-
-.button-cancel,
-.button-cancel:focus {
-    color: var(--main-color);
-    background: var(--main-background);
-}
-
-#btnShutdown,
-#deviceDeleteAll,
-.btnDeleteImage,
-.btnResetPassword {
-    color: var(--main-background);
-    background: var(--red-color);
-}
-
-.btnRefresh {
-    background: var(--main-color);
-    color: var(--main-background);
-}
-
-.backgroundContainer.withBackdrop,
-.backdropContainer,
-.backgroundContainer {
-    background: var(--main-background);
-}
-
-.headerRight,
-.headerLeft {
-    color: var(--main-color);
-}
-
-.listItemButton,
-.lnkMediaFolder {
-    color: var(--main-text);
-}
-
-.listItemButton:hover,
-.listItemButton:focus {
-    background-color: var(--main-color);
-}
-
-.indicator {
-    background-color: var(--main-color);
-    color: var(--main-background);
-}
-
-.playedIndicator {
-    background-color: var(--green-color);
-    color: var(--main-background);
-}
-
-.alphaPickerRow {
-    color: var(--dimmer-text);
-}
-
-.itemAction:hover,
-.itemAction:focus {
-    color: var(--main-color);
-}
-
-/* General focus element color */
-
-.layout-tv .paper-icon-button-light.show-focus:focus {
-    color: var(--main-color) !important;
-}
-
-.emby-button.show-focus:focus {
-    background: var(--main-color) !important;
-}
-
-.button-flat:focus,
-.button-flat:hover {
-    color: var(--main-color);
-}
-
-.sectionTitle,
-.cardText,
-.pageTitle,
-.detailSectionContent,
-.trackSelections,
-.emby-input,
-.checkboxLabel,
-.itemDetailsGroup,
-.checkboxOutline,
-.emby-textarea,
-.emby-select,
-.label,
-.selectLabel,
-.sidebarHeader,
-.listItem,
-.dashboardGeneralForm,
-.dashboardSections,
-.navMenuOption,
-.inputLabel,
-.content-primary,
-legend {
-    color: var(--main-text);
-}
-
-.fieldDescription,
-.secondary,
-.listItemBodyText {
-    color: var(--dimmer-text);
-}
-
-.sessionAppName,
-.sessionNowPlayingInfo {
-    color: var(--main-background);
-}
\ No newline at end of file
diff --git a/src/theme.css b/src/theme.css
new file mode 100644
index 0000000..4c7aafe
--- /dev/null
+++ b/src/theme.css
@@ -0,0 +1,274 @@
+* {
+  scrollbar-color: var(--hover-background) var(--second-background);
+}
+
+::-moz-selection {
+  background: var(--main-color);
+  color: var(--main-background);
+  text-shadow: none;
+}
+
+::selection {
+  background: var(--main-color);
+  color: var(--main-background);
+  text-shadow: none;
+}
+
+.mdl-slider {
+  color: var(--main-color);
+}
+
+.mdl-slider-background-upper {
+  background-color: var(--dimmer-text);
+}
+
+.mdl-slider::-webkit-slider-thumb,
+.mdl-slider-background-lower {
+  background-color: var(--main-color);
+}
+
+.mdl-slider-background-flex {
+  background-color: var(--hover-background);
+}
+
+.backgroundContainer,
+.formDialogHeader,
+.dialog,
+.dashboardGeneralForm,
+html {
+  color: var(--main-text);
+  background-color: var(--main-background);
+}
+
+.sliderBubble,
+.skinHeader,
+.nowPlayingBar {
+  color: var(--main-text);
+  background-color: var(--second-background);
+}
+
+.nowPlayingBarSecondaryText {
+  color: var(--dimmer-text);
+}
+
+.mainDrawer,
+.cardBox,
+.paperList {
+  background: var(--main-background);
+}
+
+.navMenuOption-selected {
+  background-color: var(--main-color);
+}
+
+.itemName {
+  color: var(--main-text);
+}
+
+.ratingbutton-icon-withrating {
+  color: var(--red-color);
+}
+
+.emby-input,
+.emby-textarea,
+.emby-select {
+  background: var(--second-background);
+  border-color: var(--second-background);
+}
+
+.emby-input:focus,
+.emby-textarea:focus,
+.emby-select-withcolor:focus {
+  border-color: var(--main-color) !important;
+}
+
+.emby-checkbox:checked + span + .checkboxOutline,
+.itemProgressBarForeground {
+  color: var(--main-text);
+  background-color: var(--main-color);
+  border-color: var(--main-color);
+}
+
+.fab, .raised {
+  background-color: var(--second-background);
+  color: var(--main-text);
+}
+
+.emby-button-foreground {
+  color: var(--main-text);
+}
+
+.emby-button-foreground:focus {
+  color: var(--main-color);
+}
+
+.paper-icon-button-light {
+  color: var(--main-text);
+}
+
+.paper-icon-button-light:hover:not(:disabled),
+.paper-icon-button-light:focus,
+.listItem:hover,
+.listItem:focus,
+.navMenuOption:hover,
+.navMenuOption:focus {
+  color: var(--main-color);
+  background-color: var(--hover-background);
+}
+
+.emby-tab-button-active>.emby-button-foreground {
+  color: var(--main-color);
+}
+
+.button-submit,
+.button-submit:focus,
+.button-alt,
+.button-alt:focus,
+.submit,
+.submit:focus,
+#btnAddPerson,
+#btnAddPerson:focus,
+.btnAddTrigger,
+.btnAddTrigger:focus,
+.btnAddUser,
+.btnAddUser:focus {
+  color: var(--main-background);
+  background: var(--main-color);
+}
+
+.cardText-secondary {
+  color: var(--dimmer-text);
+}
+
+.button-cancel,
+.button-cancel:focus {
+  color: var(--main-color);
+  background: var(--main-background);
+}
+
+#btnShutdown,
+#deviceDeleteAll,
+.btnDeleteImage,
+.btnResetPassword {
+  color: var(--main-background);
+  background: var(--red-color);
+}
+
+.btnRefresh {
+  background: var(--main-color);
+  color: var(--main-background);
+}
+
+.backgroundContainer.withBackdrop,
+.backdropContainer,
+.backgroundContainer {
+  background: var(--main-background);
+}
+
+.headerRight,
+.headerLeft {
+  color: var(--main-color);
+}
+
+.MuiButtonBase-root,
+.MuiSvgIcon-root,
+.listItemButton,
+.lnkMediaFolder {
+  color: var(--main-text) !important;
+}
+
+.Mui-selected {
+  background-color: var(--main-background) !important;
+}
+
+.MuiPaper-root,
+.MuiBox-root,
+.MuiTableContainer-root,
+.MuiTableRow-root,
+.MuiTableCell-root,
+.MuiTableFooter-root,
+.MuiList-root {
+  background-color: var(--second-background);
+  border-color: var(--hover-background) !important;
+  outline-color: var(--main-color);
+}
+
+.MuiToolbar-root {
+  background-color: var(--main-background);
+}
+
+.listItemButton:focus {
+  background-color: var(--main-color);
+}
+
+.indicator {
+  background-color: var(--main-color);
+  color: var(--main-background);
+}
+
+.playedIndicator {
+  background-color: var(--green-color);
+  color: var(--main-background);
+}
+
+.alphaPickerRow {
+  color: var(--dimmer-text);
+}
+
+.itemAction:focus {
+  color: var(--main-color);
+}
+
+/* General focus element color */
+
+.layout-tv .paper-icon-button-light.show-focus:focus {
+  color: var(--main-color) !important;
+}
+
+.emby-button.show-focus:focus {
+  background: var(--main-color) !important;
+}
+
+.button-flat:focus {
+  color: var(--main-color);
+}
+
+.sectionTitle,
+.cardText,
+.pageTitle,
+.detailSectionContent,
+.trackSelections,
+.emby-input,
+.checkboxLabel,
+.itemDetailsGroup,
+.checkboxOutline,
+.emby-textarea,
+.emby-select,
+.label,
+.selectLabel,
+.sidebarHeader,
+.listItem,
+.MuiMenuItem-root,
+.dashboardGeneralForm,
+.dashboardSections,
+.navMenuOption,
+.inputLabel,
+.content-primary,
+legend {
+  color: var(--main-text);
+}
+
+.fieldDescription,
+.secondary,
+.listItemBodyText {
+  color: var(--dimmer-text);
+}
+
+.listItem-border {
+  border-color: var(--hover-background) !important;
+}
+
+.sessionAppName,
+.sessionNowPlayingInfo {
+  color: var(--main-background);
+}
diff --git a/template.tera b/template.tera
new file mode 100644
index 0000000..67dfb45
--- /dev/null
+++ b/template.tera
@@ -0,0 +1,32 @@
+---
+whiskers:
+  version: 2.5.1
+  matrix:
+    - flavor
+  filename: 'src/{{flavor.identifier}}.css'
+---
+:root {
+  --rosewater: #{{rosewater.hex}};
+  --flamingo: #{{flamingo.hex}};
+  --pink: #{{pink.hex}};
+  --mauve: #{{mauve.hex}};
+  --red: #{{red.hex}};
+  --maroon: #{{maroon.hex}};
+  --peach: #{{peach.hex}};
+  --yellow: #{{yellow.hex}};
+  --green: #{{green.hex}};
+  --teal: #{{teal.hex}};
+  --sky: #{{sky.hex}};
+  --sapphire: #{{sapphire.hex}};
+  --blue: #{{blue.hex}};
+  --lavender: #{{lavender.hex}};
+
+  --main-color: var(--sapphire);
+  --main-background: #{{base.hex}};
+  --second-background: #{{mantle.hex}};
+  --hover-background: #{{surface0.hex}};
+  --main-text: #{{text.hex}};
+  --dimmer-text: #{{overlay2.hex}};
+  --green-color: var(--green);
+  --red-color: var(--red);
+}