diff --git a/src/themes/_base.scss b/src/themes/_base.scss
new file mode 100644
index 0000000000..26eebfc875
--- /dev/null
+++ b/src/themes/_base.scss
@@ -0,0 +1,467 @@
+@use '../styles/mixins' as *;
+
+// Theme options
+$dark: true !default;
+
+// Color palette
+$common-white: #fff !default;
+$background-default: #101010 !default;
+$background-paper: #202020 !default;
+$primary-main: #00a4dc !default;
+$primary-dark: #00729a !default;
+$primary-light: #33b6e3 !default;
+$primary-hover: rgba(0, 164, 220, 0.2) !default;
+$primary-contrastText: rgba(0, 0, 0, 0.87) !default;
+$error-main: #c62828 !default;
+$error-dark: #8a1c1c !default;
+$error-light: #d15353 !default;
+$error-contrastText: #fff !default;
+$text-primary: #fff !default;
+$text-secondary: rgba(255, 255, 255, 0.7) !default;
+$action-focus: rgba(255, 255, 255, 0.12) !default;
+$action-hover: rgba(255, 255, 255, 0.08) !default;
+$divider: rgba(255, 255, 255, 0.12) !default;
+
+// Components
+$appBar-defaultBg: #202020 !default;
+// NOTE: This color is not part of the MUI theme
+$appBar-transparentBg: rgba(0, 0, 0, 0.4) !default;
+$filledInput-bg: rgba(255, 255, 255, 0.09) !default;
+$alert-infoFilledBg: #0288d1 !default;
+$alert-infoFilledColor: #fff !default;
+$button-inheritContainedBg: #424242 !default;
+$button-inheritContainedHoverBg: #616161 !default;
+$snackbarContent-bg: #303030 !default;
+$snackbarContent-color: rgba(255, 255, 255, 0.87) !default;
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: #3b3b3b #202020;
+}
+
+.skinHeader,
+html {
+    @include var(color, --jf-palette-text-secondary, $text-secondary);
+}
+
+.wizardStartForm,
+.ui-corner-all,
+.ui-shadow {
+    @include var(background-color, --jf-palette-background-default, $background-default);
+}
+
+.emby-collapsible-button {
+    @include var(border-color, --jf-palette-divider, $divider);
+}
+
+.skinHeader-withBackground {
+    @include var(background-color, --jf-palette-AppBar-defaultBg, $appBar-defaultBg);
+}
+
+.skinHeader.semiTransparent {
+    @include var(background-color, --jf-palette-AppBar-transparentBg, $appBar-transparentBg);
+    backdrop-filter: none !important;
+
+    .layout-tv & {
+        background: none;
+    }
+}
+
+.pageTitleWithDefaultLogo {
+    background-image: if($dark, url(@jellyfin/ux-web/banner-light.png), url(@jellyfin/ux-web/banner-dark.png));
+
+    .layout-tv & {
+        background-image: url(@jellyfin/ux-web/icon-transparent.png);
+    }
+}
+
+.backgroundContainer,
+.dialog,
+.nowPlayingPlaylist,
+.nowPlayingContextMenu,
+html {
+    @include var(background-color, --jf-palette-background-default, $background-default);
+}
+
+.backgroundContainer.withBackdrop {
+    opacity: 0.86;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .paper-icon-button-light:hover:not(:disabled) {
+        @include var(color, --jf-palette-primary-main, $primary-main);
+        background-color: $primary-hover;
+        background-color: rgba(var(--jf-palette-primary-mainChannel) / var(--jf-palette-action-selectedOpacity));
+    }
+}
+
+.paper-icon-button-light:active:not(:disabled) {
+    @include var(color, --jf-palette-primary-main, $primary-main);
+    background-color: $primary-hover;
+    background-color: rgba(var(--jf-palette-primary-mainChannel) / var(--jf-palette-action-selectedOpacity));
+}
+
+.paper-icon-button-light.show-focus:focus {
+    @include var(color, --jf-palette-primary-main, $primary-main);
+}
+
+.fab,
+.raised {
+    @include var(background, --jf-palette-Button-inheritContainedBg, $button-inheritContainedBg);
+    @include var(color, --jf-palette-text-secondary, $text-secondary);
+
+    &:focus,
+    &:hover {
+        @include var(background, --jf-palette-Button-inheritContainedHoverBg, $button-inheritContainedHoverBg);
+    }
+}
+
+.button-submit {
+    @include var(background, --jf-palette-primary-main, $primary-main);
+    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+
+    &:focus {
+        @include var(background, --jf-palette-primary-light, $primary-light);
+    }
+}
+
+.button-delete {
+    @include var(background, --jf-palette-error-main, $error-main);
+    @include var(color, --jf-palette-error-contrastText, $error-contrastText);
+}
+
+.checkboxLabel {
+    color: inherit;
+}
+
+.checkboxListLabel,
+.inputLabel,
+.inputLabelUnfocused,
+.paperListLabel,
+.textareaLabelUnfocused {
+    @include var(color, --jf-palette-text-secondary, $text-secondary);
+}
+
+.inputLabelFocused,
+.selectLabelFocused,
+.textareaLabelFocused {
+    @include var(color, --jf-palette-primary-main, $primary-main);
+}
+
+.checkboxOutline {
+    border-color: currentColor;
+}
+
+.collapseContent,
+.formDialogFooter:not(.formDialogFooter-clear),
+.formDialogHeader:not(.formDialogHeader-clear),
+.paperList,
+.visualCardBox {
+    @include var(background-color, --jf-palette-background-paper, $background-paper);
+}
+
+.layout-tv .formDialogFooter:not(.formDialogFooter-clear) {
+    background-color: transparent;
+}
+
+.cardText-secondary,
+.fieldDescription,
+.guide-programNameCaret,
+.listItem .secondary,
+.nowPlayingBarSecondaryText,
+.programSecondaryTitle,
+.secondaryText {
+    @include var(color, --jf-palette-text-secondary, $text-secondary);
+}
+
+.actionsheetDivider {
+    @include var(background, --jf-palette-divider, $divider);
+}
+
+.cardFooter-vibrant .cardText-secondary {
+    color: inherit;
+    opacity: 0.5;
+}
+
+.toast {
+    @include var(background, --jf-palette-SnackbarContent-bg, $snackbarContent-bg);
+    @include var(color, --jf-palette-SnackbarContent-color, $snackbarContent-color);
+}
+
+.appfooter,
+.playlistSectionButton {
+    @include var(background, --jf-palette-background-paper, $background-paper);
+    @include var(color, --jf-palette-text-secondary, $text-secondary);
+}
+
+.itemSelectionPanel {
+    @include var(border-color, --jf-palette-primary-main, $primary-main);
+    border-width: 1px;
+    border-style: solid;
+}
+
+.selectionCommandsPanel {
+    @include var(background, --jf-palette-primary-main, $primary-main);
+    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+}
+
+.upNextDialog-countdownText {
+    @include var(color, --jf-palette-primary-main, $primary-main);
+}
+
+.alphaPickerButton {
+    @include var(color, --jf-palette-text-secondary, $text-secondary);
+    background-color: transparent;
+
+    &-selected {
+        @include var(color, --jf-palette-text-primary, $text-primary);
+    }
+
+    &-tv:focus {
+        @include var(background-color, --jf-palette-primary-main, $primary-main);
+        @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+    }
+}
+
+.noBackdropTransparency .detailPagePrimaryContainer,
+.noBackdropTransparency .detailPageSecondaryContainer {
+    @include var(background-color, --jf-palette-background-default, $background-default);
+}
+
+.listItem-border {
+    @include var(border-color, --jf-palette-divider, $divider);
+}
+
+.listItem:focus {
+    @include var(background-color, --jf-palette-action-focus, $action-focus);
+}
+
+.listItem:hover {
+    @include var(background-color, --jf-palette-action-hover, $action-hover);
+}
+
+.progressring-spiner {
+    @include var(border-color, --jf-palette-primary-main, $primary-main);
+}
+
+.button-flat:hover {
+    @include var(color, --jf-palette-primary-main, $primary-main);
+}
+
+.button-link {
+    @include var(color, --jf-palette-primary-main, $primary-main);
+}
+
+.mediaInfoText {
+    @include var(border-color, --jf-palette-text-secondary, $text-secondary);
+    border-style: solid;
+    border-width: 1px;
+}
+
+.emby-input,
+.emby-textarea {
+    @include var(background, --jf-palette-FilledInput-bg, $filledInput-bg);
+    @include var(border-color, --jf-palette-FilledInput-bg, $filledInput-bg);
+    color: inherit;
+    border-width: 0.16em;
+    border-style: solid;
+    border-radius: 0.2em;
+
+    &:focus {
+        @include var(border-color, --jf-palette-primary-main, $primary-main);
+    }
+}
+
+.emby-select-withcolor {
+    @include var(background, --jf-palette-FilledInput-bg, $filledInput-bg);
+    @include var(border-color, --jf-palette-FilledInput-bg, $filledInput-bg);
+    color: inherit;
+    border-width: 0.07em;
+    border-style: solid;
+}
+
+.emby-select-withcolor > option {
+    @include var(background, --jf-palette-background-paper, $background-paper);
+    color: inherit;
+}
+
+.emby-select-withcolor:focus {
+    @include var(border-color, --jf-palette-primary-main, $primary-main, true);
+}
+
+.emby-select-tv-withcolor:focus {
+    @include var(background-color, --jf-palette-primary-main, $primary-main, true);
+    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText, true);
+}
+
+.emby-checkbox:checked + span + .checkboxOutline {
+    @include var(border-color, --jf-palette-primary-main, $primary-main);
+}
+
+.emby-checkbox:focus + span + .checkboxOutline {
+    @include var(border-color, --jf-palette-common-white, $common-white);
+}
+
+.emby-checkbox:checked + span + .checkboxOutline,
+.itemProgressBarForeground {
+    @include var(background-color, --jf-palette-primary-main, $primary-main);
+}
+
+.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
+    @include var(border-color, --jf-palette-primary-main, $primary-main);
+}
+
+.itemProgressBarForeground-recording {
+    @include var(background-color, --jf-palette-error-light, $error-light);
+}
+
+.countIndicator,
+.fullSyncIndicator,
+.mediaSourceIndicator,
+.playedIndicator {
+    @include var(background, --jf-palette-primary-main, $primary-main);
+    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+}
+
+.mainDrawer,
+.drawer-open {
+    @include var(background-color, --jf-palette-background-default, $background-default);
+}
+
+.navMenuOption:hover {
+    @include var(background, --jf-palette-action-hover, $action-hover);
+}
+
+.navMenuOption-selected {
+    @include var(background, --jf-palette-primary-main, $primary-main, true);
+    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+}
+
+.emby-button.show-focus:focus {
+    @include var(background, --jf-palette-primary-main, $primary-main);
+    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+}
+
+.emby-tab-button {
+    @include var(color, --jf-palette-text-secondary, $text-secondary);
+}
+
+.emby-tab-button-active {
+    @include var(color, --jf-palette-text-primary, $text-primary);
+}
+
+.emby-tab-button.show-focus:focus,
+.emby-tab-button:hover {
+    @include var(color, --jf-palette-primary-main, $primary-main);
+}
+
+.channelPrograms,
+.guide-channelHeaderCell,
+.programCell {
+    border-color: rgba(255, 255, 255, 0.05);
+}
+
+.guide-channelHeaderCell:focus,
+.programCell:focus {
+    @include var(background-color, --jf-palette-primary-main, $primary-main, true);
+    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText, true);
+}
+
+.guide-programTextIcon {
+    color: #1e1e1e;
+    background: #555;
+}
+
+.guide-headerTimeslots {
+    color: inherit;
+}
+
+.guide-date-tab-button.emby-tab-button-active,
+.guide-date-tab-button:focus {
+    @include var(color, --jf-palette-primary-main, $primary-main);
+}
+
+.guide-date-tab-button.show-focus:focus {
+    @include var(background-color, --jf-palette-primary-main, $primary-main);
+    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
+}
+
+.infoBanner {
+    @include var(background, --jf-palette-Alert-infoFilledBg, $alert-infoFilledBg);
+    @include var(color, --jf-palette-Alert-infoFilledColor, $alert-infoFilledColor);
+    padding: 1em;
+    border-radius: 0.25em;
+}
+
+.ratingbutton-icon-withrating,
+.playstatebutton-icon-played {
+    @include var(background-color, --jf-palette-error-light, $error-light);
+}
+
+.buttonActive {
+    @include var(color, --jf-palette-primary-main, $primary-main, true);
+}
+
+.card:focus .cardBox.visualCardBox,
+.card:focus .cardBox:not(.visualCardBox) .cardScalable {
+    @include var(border-color, --jf-palette-primary-main, $primary-main, true);
+}
+
+::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+}
+
+::-webkit-scrollbar-track-piece {
+    background-color: #3b3b3b;
+}
+
+.layout-desktop ::-webkit-scrollbar,
+.layout-tv ::-webkit-scrollbar {
+    width: 0.4em;
+    height: 0.4em;
+}
+
+::-webkit-scrollbar-thumb:horizontal,
+::-webkit-scrollbar-thumb:vertical {
+    border-radius: 2px;
+    background: center no-repeat #888;
+}
+
+.timeslotHeaders-desktop::-webkit-scrollbar {
+    height: 0.7em;
+}
+
+.metadataSidebarIcon {
+    @include var(color, --jf-palette-primary-main, $primary-main);
+}
+
+#comicsPlayer,
+#bookPlayer,
+#pdfPlayer {
+    @include var(background-color, --jf-palette-background-default, $background-default);
+}
+
+#comicsPlayer .swiper-pagination {
+    @include var(background-color, --jf-palette-background-default, $background-default);
+    @include var(color, --jf-palette-text-primary, $text-primary);
+}
+
+#bookPlayer .topButtons,
+#comicsPlayer .actionButtonIcon,
+#pdfPlayer .actionButtonIcon {
+    @include var(color, --jf-palette-text-primary, $text-primary);
+}
+
+#dialogToc {
+    @include var(background-color, --jf-palette-background-default, $background-default);
+}
+
+#dialogToc .toc li a,
+#dialogToc .bookplayerButtonIcon {
+    @include var(color, --jf-palette-text-secondary, $text-secondary);
+
+    &:active,
+    &:hover {
+        @include var(color, --jf-palette-primary-main, $primary-main);
+    }
+}
diff --git a/src/themes/dark/theme.scss b/src/themes/dark/theme.scss
index 6a7d641f52..e4b386e13f 100644
--- a/src/themes/dark/theme.scss
+++ b/src/themes/dark/theme.scss
@@ -1,169 +1,7 @@
-@use '../../styles/mixins' as *;
-
-// Theme options
-$dark: true !default;
-
-// Color palette
-$common-white: #fff !default;
-$background-default: #101010 !default;
-$background-paper: #202020 !default;
-$primary-main: #00a4dc !default;
-$primary-dark: #00729a !default;
-$primary-light: #33b6e3 !default;
-$primary-hover: rgba(0, 164, 220, 0.2) !default;
-$primary-contrastText: rgba(0, 0, 0, 0.87) !default;
-$error-main: #c62828 !default;
-$error-dark: #8a1c1c !default;
-$error-light: #d15353 !default;
-$error-contrastText: #fff !default;
-$text-primary: #fff !default;
-$text-secondary: rgba(255, 255, 255, 0.7) !default;
-$action-focus: rgba(255, 255, 255, 0.12) !default;
-$action-hover: rgba(255, 255, 255, 0.08) !default;
-$divider: rgba(255, 255, 255, 0.12) !default;
-
-// Components
-$appBar-defaultBg: #202020 !default;
-// NOTE: This color is not part of the MUI theme
-$appBar-transparentBg: rgba(0, 0, 0, 0.4) !default;
-$filledInput-bg: rgba(255, 255, 255, 0.09) !default;
-$alert-infoFilledBg: #0288d1 !default;
-$alert-infoFilledColor: #fff !default;
-$button-inheritContainedBg: #424242 !default;
-$button-inheritContainedHoverBg: #616161 !default;
-$snackbarContent-bg: #303030 !default;
-$snackbarContent-color: rgba(255, 255, 255, 0.87) !default;
-
-* {
-    scrollbar-width: thin;
-    scrollbar-color: #3b3b3b #202020;
-}
-
-.skinHeader,
-html {
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
-}
-
-.wizardStartForm,
-.ui-corner-all,
-.ui-shadow {
-    @include var(background-color, --jf-palette-background-default, $background-default);
-}
-
-.emby-collapsible-button {
-    @include var(border-color, --jf-palette-divider, $divider);
-}
-
-.skinHeader-withBackground {
-    @include var(background-color, --jf-palette-AppBar-defaultBg, $appBar-defaultBg);
-}
-
-.skinHeader.semiTransparent {
-    @include var(background-color, --jf-palette-AppBar-transparentBg, $appBar-transparentBg);
-    backdrop-filter: none !important;
-
-    .layout-tv & {
-        background: none;
-    }
-}
-
-.pageTitleWithDefaultLogo {
-    background-image: if($dark, url(@jellyfin/ux-web/banner-light.png), url(@jellyfin/ux-web/banner-dark.png));
-
-    .layout-tv & {
-        background-image: url(@jellyfin/ux-web/icon-transparent.png);
-    }
-}
-
-.backgroundContainer,
-.dialog,
-.nowPlayingPlaylist,
-.nowPlayingContextMenu,
-html {
-    @include var(background-color, --jf-palette-background-default, $background-default);
-}
-
-.backgroundContainer.withBackdrop {
-    opacity: 0.86;
-}
-
-@media (hover: hover) and (pointer: fine) {
-    .paper-icon-button-light:hover:not(:disabled) {
-        @include var(color, --jf-palette-primary-main, $primary-main);
-        background-color: $primary-hover;
-        background-color: rgba(var(--jf-palette-primary-mainChannel) / var(--jf-palette-action-selectedOpacity));
-    }
-}
-
-.paper-icon-button-light:active:not(:disabled) {
-    @include var(color, --jf-palette-primary-main, $primary-main);
-    background-color: $primary-hover;
-    background-color: rgba(var(--jf-palette-primary-mainChannel) / var(--jf-palette-action-selectedOpacity));
-}
-
-.paper-icon-button-light.show-focus:focus {
-    @include var(color, --jf-palette-primary-main, $primary-main);
-}
-
-.fab,
-.raised {
-    @include var(background, --jf-palette-Button-inheritContainedBg, $button-inheritContainedBg);
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
-
-    &:focus,
-    &:hover {
-        @include var(background, --jf-palette-Button-inheritContainedHoverBg, $button-inheritContainedHoverBg);
-    }
-}
-
-.button-submit {
-    @include var(background, --jf-palette-primary-main, $primary-main);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
-
-    &:focus {
-        @include var(background, --jf-palette-primary-light, $primary-light);
-    }
-}
-
-.button-delete {
-    @include var(background, --jf-palette-error-main, $error-main);
-    @include var(color, --jf-palette-error-contrastText, $error-contrastText);
-}
-
-.checkboxLabel {
-    color: inherit;
-}
-
-.checkboxListLabel,
-.inputLabel,
-.inputLabelUnfocused,
-.paperListLabel,
-.textareaLabelUnfocused {
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
-}
-
-.inputLabelFocused,
-.selectLabelFocused,
-.textareaLabelFocused {
-    @include var(color, --jf-palette-primary-main, $primary-main);
-}
-
-.checkboxOutline {
-    border-color: currentColor;
-}
-
-.collapseContent,
-.formDialogFooter:not(.formDialogFooter-clear),
-.formDialogHeader:not(.formDialogHeader-clear),
-.paperList,
-.visualCardBox {
-    @include var(background-color, --jf-palette-background-paper, $background-paper);
-}
-
-.layout-tv .formDialogFooter:not(.formDialogFooter-clear) {
-    background-color: transparent;
-}
+/* Import the base theme */
+@use '../base';
 
+/* Card background color variants */
 .defaultCardBackground1 {
     background-color: #00455c;
 }
@@ -184,206 +22,17 @@ html {
     background-color: #007ea8;
 }
 
-.cardText-secondary,
-.fieldDescription,
-.guide-programNameCaret,
-.listItem .secondary,
-.nowPlayingBarSecondaryText,
-.programSecondaryTitle,
-.secondaryText {
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
-}
-
-.actionsheetDivider {
-    @include var(background, --jf-palette-divider, $divider);
-}
-
-.cardFooter-vibrant .cardText-secondary {
-    color: inherit;
-    opacity: 0.5;
-}
-
-.toast {
-    @include var(background, --jf-palette-SnackbarContent-bg, $snackbarContent-bg);
-    @include var(color, --jf-palette-SnackbarContent-color, $snackbarContent-color);
-}
-
-.appfooter,
-.playlistSectionButton {
-    @include var(background, --jf-palette-background-paper, $background-paper);
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
-}
-
-.itemSelectionPanel {
-    @include var(border-color, --jf-palette-primary-main, $primary-main);
-    border-width: 1px;
-    border-style: solid;
-}
-
-.selectionCommandsPanel {
-    @include var(background, --jf-palette-primary-main, $primary-main);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
-}
-
-.upNextDialog-countdownText {
-    @include var(color, --jf-palette-primary-main, $primary-main);
-}
-
-.alphaPickerButton {
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
-    background-color: transparent;
-
-    &-selected {
-        @include var(color, --jf-palette-text-primary, $text-primary);
-    }
-
-    &-tv:focus {
-        @include var(background-color, --jf-palette-primary-main, $primary-main);
-        @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
-    }
-}
-
+/* Detail ribbon on item details pages */
 .detailRibbon {
     background: rgba(32, 32, 32, 0.8);
     background: rgba(var(--jf-palette-background-paperChannel) / 0.8);
-}
 
-.layout-tv .detailRibbon {
-    background: none;
-}
-
-.noBackdropTransparency .detailPagePrimaryContainer,
-.noBackdropTransparency .detailPageSecondaryContainer {
-    @include var(background-color, --jf-palette-background-default, $background-default);
-}
-
-.listItem-border {
-    @include var(border-color, --jf-palette-divider, $divider);
-}
-
-.listItem:focus {
-    @include var(background-color, --jf-palette-action-focus, $action-focus);
-}
-
-.listItem:hover {
-    @include var(background-color, --jf-palette-action-hover, $action-hover);
-}
-
-.progressring-spiner {
-    @include var(border-color, --jf-palette-primary-main, $primary-main);
-}
-
-.button-flat:hover {
-    @include var(color, --jf-palette-primary-main, $primary-main);
-}
-
-.button-link {
-    @include var(color, --jf-palette-primary-main, $primary-main);
-}
-
-.mediaInfoText {
-    @include var(border-color, --jf-palette-text-secondary, $text-secondary);
-    border-style: solid;
-    border-width: 1px;
-}
-
-.emby-input,
-.emby-textarea {
-    @include var(background, --jf-palette-FilledInput-bg, $filledInput-bg);
-    @include var(border-color, --jf-palette-FilledInput-bg, $filledInput-bg);
-    color: inherit;
-    border-width: 0.16em;
-    border-style: solid;
-    border-radius: 0.2em;
-
-    &:focus {
-        @include var(border-color, --jf-palette-primary-main, $primary-main);
+    .layout-tv & {
+        background: none;
     }
 }
 
-.emby-select-withcolor {
-    @include var(background, --jf-palette-FilledInput-bg, $filledInput-bg);
-    @include var(border-color, --jf-palette-FilledInput-bg, $filledInput-bg);
-    color: inherit;
-    border-width: 0.07em;
-    border-style: solid;
-}
-
-.emby-select-withcolor > option {
-    @include var(background, --jf-palette-background-paper, $background-paper);
-    color: inherit;
-}
-
-.emby-select-withcolor:focus {
-    @include var(border-color, --jf-palette-primary-main, $primary-main, true);
-}
-
-.emby-select-tv-withcolor:focus {
-    @include var(background-color, --jf-palette-primary-main, $primary-main, true);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText, true);
-}
-
-.emby-checkbox:checked + span + .checkboxOutline {
-    @include var(border-color, --jf-palette-primary-main, $primary-main);
-}
-
-.emby-checkbox:focus + span + .checkboxOutline {
-    @include var(border-color, --jf-palette-common-white, $common-white);
-}
-
-.emby-checkbox:checked + span + .checkboxOutline,
-.itemProgressBarForeground {
-    @include var(background-color, --jf-palette-primary-main, $primary-main);
-}
-
-.emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
-    @include var(border-color, --jf-palette-primary-main, $primary-main);
-}
-
-.itemProgressBarForeground-recording {
-    @include var(background-color, --jf-palette-error-light, $error-light);
-}
-
-.countIndicator,
-.fullSyncIndicator,
-.mediaSourceIndicator,
-.playedIndicator {
-    @include var(background, --jf-palette-primary-main, $primary-main);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
-}
-
-.mainDrawer,
-.drawer-open {
-    @include var(background-color, --jf-palette-background-default, $background-default);
-}
-
-.navMenuOption:hover {
-    @include var(background, --jf-palette-action-hover, $action-hover);
-}
-
-.navMenuOption-selected {
-    @include var(background, --jf-palette-primary-main, $primary-main, true);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
-}
-
-.emby-button.show-focus:focus {
-    @include var(background, --jf-palette-primary-main, $primary-main);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
-}
-
-.emby-tab-button {
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
-}
-
-.emby-tab-button-active {
-    @include var(color, --jf-palette-text-primary, $text-primary);
-}
-
-.emby-tab-button.show-focus:focus,
-.emby-tab-button:hover {
-    @include var(color, --jf-palette-primary-main, $primary-main);
-}
-
+/* Live TV guide */
 .channelPrograms,
 .guide-channelHeaderCell,
 .programCell {
@@ -409,108 +58,3 @@ html {
 .programCell-active {
     background: #1e1e1e !important;
 }
-
-.guide-channelHeaderCell:focus,
-.programCell:focus {
-    @include var(background-color, --jf-palette-primary-main, $primary-main, true);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText, true);
-}
-
-.guide-programTextIcon {
-    color: #1e1e1e;
-    background: #555;
-}
-
-.guide-headerTimeslots {
-    color: inherit;
-}
-
-.guide-date-tab-button.emby-tab-button-active,
-.guide-date-tab-button:focus {
-    @include var(color, --jf-palette-primary-main, $primary-main);
-}
-
-.guide-date-tab-button.show-focus:focus {
-    @include var(background-color, --jf-palette-primary-main, $primary-main);
-    @include var(color, --jf-palette-primary-contrastText, $primary-contrastText);
-}
-
-.infoBanner {
-    @include var(background, --jf-palette-Alert-infoFilledBg, $alert-infoFilledBg);
-    @include var(color, --jf-palette-Alert-infoFilledColor, $alert-infoFilledColor);
-    padding: 1em;
-    border-radius: 0.25em;
-}
-
-.ratingbutton-icon-withrating,
-.playstatebutton-icon-played {
-    @include var(background-color, --jf-palette-error-light, $error-light);
-}
-
-.buttonActive {
-    @include var(color, --jf-palette-primary-main, $primary-main, true);
-}
-
-.card:focus .cardBox.visualCardBox,
-.card:focus .cardBox:not(.visualCardBox) .cardScalable {
-    @include var(border-color, --jf-palette-primary-main, $primary-main, true);
-}
-
-::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-}
-
-::-webkit-scrollbar-track-piece {
-    background-color: #3b3b3b;
-}
-
-.layout-desktop ::-webkit-scrollbar,
-.layout-tv ::-webkit-scrollbar {
-    width: 0.4em;
-    height: 0.4em;
-}
-
-::-webkit-scrollbar-thumb:horizontal,
-::-webkit-scrollbar-thumb:vertical {
-    border-radius: 2px;
-    background: center no-repeat #888;
-}
-
-.timeslotHeaders-desktop::-webkit-scrollbar {
-    height: 0.7em;
-}
-
-.metadataSidebarIcon {
-    @include var(color, --jf-palette-primary-main, $primary-main);
-}
-
-#comicsPlayer,
-#bookPlayer,
-#pdfPlayer {
-    @include var(background-color, --jf-palette-background-default, $background-default);
-}
-
-#comicsPlayer .swiper-pagination {
-    @include var(background-color, --jf-palette-background-default, $background-default);
-    @include var(color, --jf-palette-text-primary, $text-primary);
-}
-
-#bookPlayer .topButtons,
-#comicsPlayer .actionButtonIcon,
-#pdfPlayer .actionButtonIcon {
-    @include var(color, --jf-palette-text-primary, $text-primary);
-}
-
-#dialogToc {
-    @include var(background-color, --jf-palette-background-default, $background-default);
-}
-
-#dialogToc .toc li a,
-#dialogToc .bookplayerButtonIcon {
-    @include var(color, --jf-palette-text-secondary, $text-secondary);
-
-    &:active,
-    &:hover {
-        @include var(color, --jf-palette-primary-main, $primary-main);
-    }
-}