From c7678da6649b07e97cee9594f295d804b619f593 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 10 Dec 2023 17:53:27 -0600
Subject: [PATCH] Update:Setup css colors for themes, add light theme colors
 #916

---
 assets/app.css                                |  7 ++--
 assets/tailwind.css                           | 33 +++++++++++++++++++
 components/app/Appbar.vue                     |  6 ++--
 components/app/AudioPlayer.vue                | 30 ++++++++---------
 components/app/SideDrawer.vue                 | 10 +++---
 components/bookshelf/Shelf.vue                |  2 +-
 components/cards/AuthorCard.vue               |  2 +-
 components/cards/ItemSearchCard.vue           |  6 ++--
 components/cards/LazyBookCard.vue             | 16 ++++-----
 components/cards/LazyCollectionCard.vue       |  2 +-
 components/cards/LazyListBookCard.vue         |  8 ++---
 components/cards/LazyPlaylistCard.vue         |  2 +-
 components/cards/LazySeriesCard.vue           |  2 +-
 components/cards/TagSearchCard.vue            |  2 +-
 components/connection/ServerConnectForm.vue   | 20 +++++------
 components/home/BookshelfNavBar.vue           |  4 +--
 components/modals/BookmarksModal.vue          |  4 +--
 components/modals/ChaptersModal.vue           |  8 ++---
 components/modals/Dialog.vue                  |  8 ++---
 components/modals/FilterModal.vue             |  8 ++---
 components/modals/FullscreenModal.vue         |  2 +-
 components/modals/ItemDetailsModal.vue        |  4 +--
 components/modals/LibrariesModal.vue          |  4 +--
 components/modals/Modal.vue                   |  2 +-
 components/modals/OrderModal.vue              |  4 +--
 components/modals/PlaybackSpeedModal.vue      | 10 +++---
 components/modals/SleepTimerLengthModal.vue   |  6 ++--
 components/modals/SleepTimerModal.vue         |  8 ++---
 components/modals/bookmarks/BookmarkItem.vue  | 10 +++---
 .../modals/playlists/AddCreateModal.vue       |  2 +-
 .../rssfeeds/RssFeedMetadataBuilder.vue       | 10 +++---
 components/modals/rssfeeds/RssFeedModal.vue   | 10 +++---
 components/tables/ChaptersTable.vue           |  2 +-
 components/tables/TracksTable.vue             |  2 +-
 components/tables/collection/BookTableRow.vue |  4 +--
 .../collection/CollectionBooksTable.vue       |  4 +--
 components/tables/ebook/EbookFilesTable.vue   |  2 +-
 components/tables/playlist/ItemTableRow.vue   |  4 +--
 .../tables/playlist/PlaylistItemsTable.vue    |  4 +--
 components/tables/podcast/EpisodeRow.vue      | 12 +++----
 components/tables/podcast/EpisodesTable.vue   | 12 +++----
 .../tables/podcast/LatestEpisodeRow.vue       | 16 ++++-----
 components/ui/Btn.vue                         | 12 ++++---
 components/ui/Checkbox.vue                    |  2 +-
 components/ui/Dropdown.vue                    | 14 ++++----
 components/ui/DropdownMenu.vue                |  6 ++--
 components/ui/IconBtn.vue                     |  2 +-
 components/ui/Menu.vue                        | 10 +++---
 components/ui/TextInput.vue                   |  6 ++--
 layouts/blank.vue                             |  2 +-
 layouts/default.vue                           |  2 +-
 pages/account.vue                             |  4 +--
 pages/collection/_id.vue                      |  2 +-
 pages/connect.vue                             |  4 +--
 pages/downloading.vue                         |  6 ++--
 pages/item/_id/_episode/index.vue             | 18 +++++-----
 pages/item/_id/index.vue                      | 26 +++++++--------
 pages/localMedia/folders/_id.vue              |  8 ++---
 pages/localMedia/folders/index.vue            |  8 ++---
 pages/localMedia/item/_id.vue                 | 12 +++----
 pages/media/_id/history.vue                   | 12 +++----
 pages/playlist/_id.vue                        |  2 +-
 pages/search.vue                              |  8 ++---
 pages/settings.vue                            |  6 ++--
 pages/stats.vue                               | 12 +++----
 plugins/init.client.js                        | 10 +++---
 tailwind.config.js                            | 11 ++++---
 67 files changed, 279 insertions(+), 240 deletions(-)
 create mode 100644 assets/tailwind.css

diff --git a/assets/app.css b/assets/app.css
index f6d6fd30..33561947 100644
--- a/assets/app.css
+++ b/assets/app.css
@@ -1,3 +1,4 @@
+@import "./tailwind.css";
 @import "./fonts.css";
 @import './defaultStyles.css';
 @import './absicons.css';
@@ -148,15 +149,15 @@ Bookshelf Label
 .tracksTable {
   border-collapse: collapse;
   width: 100%;
-  border: 1px solid #474747;
+  border: 1px solid rgb(var(--color-secondary));
 }
 
 .tracksTable tr:nth-child(even) {
-  background-color: #2e2e2e;
+  background-color: rgb(var(--color-secondary));
 }
 
 .tracksTable tr {
-  background-color: #373838;
+  background-color: rgb(var(--color-bg));
 }
 
 .tracksTable td {
diff --git a/assets/tailwind.css b/assets/tailwind.css
new file mode 100644
index 00000000..3e7d07ed
--- /dev/null
+++ b/assets/tailwind.css
@@ -0,0 +1,33 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    color: white;
+    --color-bg: 56 56 56;
+    --color-bg-hover: 102 104 107;
+    --color-fg: 230 237 243;
+    --color-fg-muted: 142 147 153;
+    --color-primary: 35 35 35;
+    --color-secondary: 47 48 48;
+    --color-border: 75 85 89;
+    --gradient-item-page: linear-gradient(169deg, rgba(0, 0, 0, 0.4) 0%, rgba(55, 56, 56, 1) 80%);
+    --gradient-audio-player: linear-gradient(169deg, rgba(0, 0, 0, 0) 0%, rgba(38, 38, 38, 1) 80%);
+    --gradient-minimized-audio-player: linear-gradient(145deg, rgba(38, 38, 38, 0.5) 0%, rgba(38, 38, 38, 0.9) 20%, rgb(38, 38, 38) 60%);
+  }
+
+  html[data-theme='light'] {
+    color: black;
+    --color-bg: 255 255 255;
+    --color-bg-hover: 208 210 212;
+    --color-fg: 37 37 37;
+    --color-fg-muted: 101 109 118;
+    --color-primary: 222 222 222;
+    --color-secondary: 246 248 250;
+    --color-border: 189 191 191;
+    --gradient-item-page: linear-gradient(169deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 1) 80%);
+    --gradient-audio-player: linear-gradient(169deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 1) 80%);
+    --gradient-minimized-audio-player: linear-gradient(145deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.9) 20%, rgb(255, 255, 255) 60%);
+  }
+}
\ No newline at end of file
diff --git a/components/app/Appbar.vue b/components/app/Appbar.vue
index c07c000d..04bcfd52 100644
--- a/components/app/Appbar.vue
+++ b/components/app/Appbar.vue
@@ -4,13 +4,13 @@
       <nuxt-link v-show="!showBack" to="/" class="mr-3">
         <img src="/Logo.png" class="h-10 w-10" />
       </nuxt-link>
-      <a v-if="showBack" @click="back" class="rounded-full h-10 w-10 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-2 cursor-pointer">
-        <span class="material-icons text-3xl text-white">arrow_back</span>
+      <a v-if="showBack" @click="back" class="rounded-full h-10 w-10 flex items-center justify-center mr-2 cursor-pointer">
+        <span class="material-icons text-3xl text-fg">arrow_back</span>
       </a>
       <div v-if="user && currentLibrary">
         <div class="pl-1.5 pr-2.5 py-2 bg-bg bg-opacity-30 rounded-md flex items-center" @click="clickShowLibraryModal">
           <ui-library-icon :icon="currentLibraryIcon" :size="4" font-size="base" />
-          <p class="text-smleading-4 ml-2 mt-0.5 max-w-24 truncate">{{ currentLibraryName }}</p>
+          <p class="text-sm leading-4 ml-2 mt-0.5 max-w-24 truncate">{{ currentLibraryName }}</p>
         </div>
       </div>
 
diff --git a/components/app/AudioPlayer.vue b/components/app/AudioPlayer.vue
index 1ef175e1..5c6e0eb4 100644
--- a/components/app/AudioPlayer.vue
+++ b/components/app/AudioPlayer.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="playbackSession" id="streamContainer" class="fixed top-0 left-0 layout-wrapper right-0 z-50 pointer-events-none" :class="{ fullscreen: showFullscreen, 'ios-player': $platform === 'ios', 'web-player': $platform === 'web' }">
     <div v-if="showFullscreen" class="w-full h-full z-10 absolute top-0 left-0 pointer-events-auto" :style="{ backgroundColor: coverRgb }">
-      <div class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: linear-gradient(169deg, rgba(0, 0, 0, 0) 0%, rgba(38, 38, 38, 1) 80%)" />
+      <div class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: var(--gradient-audio-player)" />
 
       <div class="top-4 left-4 absolute cursor-pointer">
         <span class="material-icons text-5xl" :class="{ 'text-black text-opacity-75': coverBgIsLight }" @click="collapseFullscreen">expand_more</span>
@@ -17,9 +17,9 @@
 
     <div v-if="useChapterTrack && useTotalTrack && showFullscreen" class="absolute total-track w-full z-30 px-6">
       <div class="flex">
-        <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem">{{ currentTimePretty }}</p>
+        <p class="font-mono text-fg" style="font-size: 0.8rem">{{ currentTimePretty }}</p>
         <div class="flex-grow" />
-        <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem">{{ totalTimeRemainingPretty }}</p>
+        <p class="font-mono text-fg" style="font-size: 0.8rem">{{ totalTimeRemainingPretty }}</p>
       </div>
       <div class="w-full">
         <div class="h-1 w-full bg-gray-500 bg-opacity-50 relative rounded-full">
@@ -42,49 +42,49 @@
 
     <div class="title-author-texts absolute z-30 left-0 right-0 overflow-hidden" @click="clickTitleAndAuthor">
       <p class="title-text truncate">{{ title }}</p>
-      <p class="author-text text-white text-opacity-75 truncate">{{ authorName }}</p>
+      <p class="author-text text-fg text-opacity-75 truncate">{{ authorName }}</p>
     </div>
 
     <div id="playerContent" class="playerContainer w-full z-20 absolute bottom-0 left-0 right-0 p-2 pointer-events-auto transition-all" :style="{ backgroundColor: showFullscreen ? '' : coverRgb }" @click="clickContainer">
       <div v-if="showFullscreen" class="absolute bottom-4 left-0 right-0 w-full pb-4 pt-2 mx-auto px-6" style="max-width: 414px">
         <div class="flex items-center justify-between pointer-events-auto">
-          <span v-if="!isPodcast && serverLibraryItemId && networkConnected" class="material-icons text-3xl text-white text-opacity-75 cursor-pointer" @click="$emit('showBookmarks')">{{ bookmarks.length ? 'bookmark' : 'bookmark_border' }}</span>
+          <span v-if="!isPodcast && serverLibraryItemId && networkConnected" class="material-icons text-3xl text-fg-muted cursor-pointer" @click="$emit('showBookmarks')">{{ bookmarks.length ? 'bookmark' : 'bookmark_border' }}</span>
           <!-- hidden for podcasts but still using this as a placeholder -->
           <span v-else class="material-icons text-3xl text-white text-opacity-0">bookmark</span>
 
-          <span class="font-mono text-white text-opacity-75 cursor-pointer" style="font-size: 1.35rem" @click="$emit('selectPlaybackSpeed')">{{ currentPlaybackRate }}x</span>
-          <svg v-if="!sleepTimerRunning" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-white text-opacity-75 cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" @click.stop="$emit('showSleepTimer')">
+          <span class="font-mono text-fg-muted cursor-pointer" style="font-size: 1.35rem" @click="$emit('selectPlaybackSpeed')">{{ currentPlaybackRate }}x</span>
+          <svg v-if="!sleepTimerRunning" xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-fg-muted cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor" @click.stop="$emit('showSleepTimer')">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
           </svg>
           <div v-else class="h-7 w-7 flex items-center justify-around cursor-pointer" @click.stop="$emit('showSleepTimer')">
             <p class="text-xl font-mono text-success">{{ sleepTimeRemainingPretty }}</p>
           </div>
 
-          <span class="material-icons text-3xl text-white cursor-pointer" :class="chapters.length ? 'text-opacity-75' : 'text-opacity-10'" @click="clickChaptersBtn">format_list_bulleted</span>
+          <span class="material-icons text-3xl text-fg cursor-pointer" :class="chapters.length ? 'text-opacity-75' : 'text-opacity-10'" @click="clickChaptersBtn">format_list_bulleted</span>
         </div>
       </div>
-      <div v-else class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: linear-gradient(145deg, rgba(38, 38, 38, 0.5) 0%, rgba(38, 38, 38, 0.9) 20%, rgb(38, 38, 38) 60%)" />
+      <div v-else class="w-full h-full absolute top-0 left-0 pointer-events-none" style="background: var(--gradient-minimized-audio-player)" />
 
       <div id="playerControls" class="absolute right-0 bottom-0 mx-auto" style="max-width: 414px">
         <div class="flex items-center max-w-full" :class="lockUi ? 'justify-center' : 'justify-between'">
-          <span v-show="showFullscreen && !lockUi" class="material-icons next-icon text-white text-opacity-75 cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
-          <span v-show="!lockUi" class="material-icons jump-icon text-white cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpBackwards">{{ jumpBackwardsIcon }}</span>
+          <span v-show="showFullscreen && !lockUi" class="material-icons next-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpChapterStart">first_page</span>
+          <span v-show="!lockUi" class="material-icons jump-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpBackwards">{{ jumpBackwardsIcon }}</span>
           <div class="play-btn cursor-pointer shadow-sm flex items-center justify-center rounded-full text-primary mx-4 relative overflow-hidden" :style="{ backgroundColor: coverRgb }" :class="{ 'animate-spin': seekLoading }" @mousedown.prevent @mouseup.prevent @click.stop="playPauseClick">
             <div v-if="!coverBgIsLight" class="absolute top-0 left-0 w-full h-full bg-white bg-opacity-20 pointer-events-none" />
 
             <span v-if="!isLoading" class="material-icons" :class="{ 'text-white': coverRgb && !coverBgIsLight }">{{ seekLoading ? 'autorenew' : !isPlaying ? 'play_arrow' : 'pause' }}</span>
             <widgets-spinner-icon v-else class="h-8 w-8" />
           </div>
-          <span v-show="!lockUi" class="material-icons jump-icon text-white cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpForward">{{ jumpForwardIcon }}</span>
-          <span v-show="showFullscreen && !lockUi" class="material-icons next-icon text-white cursor-pointer" :class="nextChapter && !isLoading ? 'text-opacity-75' : 'text-opacity-10'" @click.stop="jumpNextChapter">last_page</span>
+          <span v-show="!lockUi" class="material-icons jump-icon text-fg cursor-pointer" :class="isLoading ? 'text-opacity-10' : 'text-opacity-75'" @click.stop="jumpForward">{{ jumpForwardIcon }}</span>
+          <span v-show="showFullscreen && !lockUi" class="material-icons next-icon text-fg cursor-pointer" :class="nextChapter && !isLoading ? 'text-opacity-75' : 'text-opacity-10'" @click.stop="jumpNextChapter">last_page</span>
         </div>
       </div>
 
       <div id="playerTrack" class="absolute left-0 w-full px-6">
         <div class="flex pointer-events-none">
-          <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem" ref="currentTimestamp">0:00</p>
+          <p class="font-mono text-fg" style="font-size: 0.8rem" ref="currentTimestamp">0:00</p>
           <div class="flex-grow" />
-          <p class="font-mono text-white text-opacity-90" style="font-size: 0.8rem">{{ timeRemainingPretty }}</p>
+          <p class="font-mono text-fg" style="font-size: 0.8rem">{{ timeRemainingPretty }}</p>
         </div>
         <div ref="track" class="h-1.5 w-full bg-gray-500 bg-opacity-50 relative rounded-full" :class="{ 'animate-pulse': isLoading }" @click.stop>
           <div ref="readyTrack" class="h-full bg-gray-600 absolute top-0 left-0 rounded-full pointer-events-none" />
diff --git a/components/app/SideDrawer.vue b/components/app/SideDrawer.vue
index d80bc7a0..72111e98 100644
--- a/components/app/SideDrawer.vue
+++ b/components/app/SideDrawer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="fixed top-0 left-0 right-0 layout-wrapper w-full z-50 overflow-hidden pointer-events-none">
     <div class="absolute top-0 left-0 w-full h-full bg-black transition-opacity duration-200" :class="show ? 'bg-opacity-60 pointer-events-auto' : 'bg-opacity-0'" @click="clickBackground" />
-    <div class="absolute top-0 right-0 w-64 h-full bg-primary transform transition-transform py-6 pointer-events-auto" :class="show ? '' : 'translate-x-64'" @click.stop>
+    <div class="absolute top-0 right-0 w-64 h-full bg-bg transform transition-transform py-6 pointer-events-auto" :class="show ? '' : 'translate-x-64'" @click.stop>
       <div class="px-6 mb-4">
         <p v-if="user" class="text-base">
           Welcome,
@@ -11,19 +11,19 @@
 
       <div class="w-full overflow-y-auto">
         <template v-for="item in navItems">
-          <button v-if="item.action" :key="item.text" class="w-full hover:bg-bg hover:bg-opacity-60 flex items-center py-3 px-6 text-gray-300" @click="clickAction(item.action)">
+          <button v-if="item.action" :key="item.text" class="w-full hover:bg-bg/60 flex items-center py-3 px-6 text-fg-muted" @click="clickAction(item.action)">
             <span class="text-lg" :class="item.iconOutlined ? 'material-icons-outlined' : 'material-icons'">{{ item.icon }}</span>
             <p class="pl-4">{{ item.text }}</p>
           </button>
-          <nuxt-link v-else :to="item.to" :key="item.text" class="w-full hover:bg-bg hover:bg-opacity-60 flex items-center py-3 px-6 text-gray-300" :class="currentRoutePath.startsWith(item.to) ? 'bg-bg bg-opacity-60' : ''">
+          <nuxt-link v-else :to="item.to" :key="item.text" class="w-full hover:bg-bg/60 flex items-center py-3 px-6 text-fg" :class="currentRoutePath.startsWith(item.to) ? 'bg-bg-hover/50' : 'text-fg-muted'">
             <span class="text-lg" :class="item.iconOutlined ? 'material-icons-outlined' : 'material-icons'">{{ item.icon }}</span>
             <p class="pl-4">{{ item.text }}</p>
           </nuxt-link>
         </template>
       </div>
-      <div class="absolute bottom-0 left-0 w-full py-6 px-6 text-gray-300">
+      <div class="absolute bottom-0 left-0 w-full py-6 px-6 text-fg">
         <div v-if="serverConnectionConfig" class="mb-4 flex justify-center">
-          <p class="text-xs text-gray-400" style="word-break: break-word">{{ serverConnectionConfig.address }} (v{{ serverSettings.version }})</p>
+          <p class="text-xs text-fg-muted" style="word-break: break-word">{{ serverConnectionConfig.address }} (v{{ serverSettings.version }})</p>
         </div>
         <div class="flex items-center">
           <p class="text-xs">{{ $config.version }}</p>
diff --git a/components/bookshelf/Shelf.vue b/components/bookshelf/Shelf.vue
index 367850fc..2095a673 100644
--- a/components/bookshelf/Shelf.vue
+++ b/components/bookshelf/Shelf.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full relative">
     <div v-if="altViewEnabled" class="px-5 pb-3 pt-4">
-      <p class="font-semibold text-gray-100" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ label }}</p>
+      <p class="font-semibold" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ label }}</p>
     </div>
 
     <div class="flex items-end px-3 max-w-full overflow-x-auto" :class="altViewEnabled ? '' : 'bookshelfRow'" :style="{ height: shelfHeight + 'px', paddingBottom: entityPaddingBottom + 'px' }">
diff --git a/components/cards/AuthorCard.vue b/components/cards/AuthorCard.vue
index a52c2cf1..ad6fcf69 100644
--- a/components/cards/AuthorCard.vue
+++ b/components/cards/AuthorCard.vue
@@ -6,7 +6,7 @@
 
       <!-- Author name & num books overlay -->
       <div v-show="!searching && !nameBelow" class="absolute bottom-0 left-0 w-full py-1 bg-black bg-opacity-60 px-2">
-        <p class="text-center font-semibold truncate" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
+        <p class="text-center font-semibold truncate text-white" :style="{ fontSize: sizeMultiplier * 0.75 + 'rem' }">{{ name }}</p>
         <p class="text-center text-gray-200" :style="{ fontSize: sizeMultiplier * 0.65 + 'rem' }">{{ numBooks }} {{ $strings.LabelBooks }}</p>
       </div>
 
diff --git a/components/cards/ItemSearchCard.vue b/components/cards/ItemSearchCard.vue
index be65d810..8586b8ba 100644
--- a/components/cards/ItemSearchCard.vue
+++ b/components/cards/ItemSearchCard.vue
@@ -5,10 +5,10 @@
       <p v-if="matchKey !== 'title'" class="truncate text-sm">{{ title }}</p>
       <p v-else class="truncate text-sm" v-html="matchHtml" />
 
-      <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-gray-300">{{ matchHtml }}</p>
+      <p v-if="matchKey === 'subtitle'" class="truncate text-xs text-fg-muted">{{ matchHtml }}</p>
 
-      <p v-if="matchKey !== 'authors'" class="text-xs text-gray-200 truncate">by {{ authorName }}</p>
-      <p v-else class="truncate text-xs text-gray-200" v-html="matchHtml" />
+      <p v-if="matchKey !== 'authors'" class="text-xs text-fg truncate">by {{ authorName }}</p>
+      <p v-else class="truncate text-xs text-fg" v-html="matchHtml" />
 
       <div v-if="matchKey === 'series' || matchKey === 'tags' || matchKey === 'isbn' || matchKey === 'asin' || matchKey === 'episode' || matchKey === 'narrators'" class="m-0 p-0 truncate text-xs" v-html="matchHtml" />
     </div>
diff --git a/components/cards/LazyBookCard.vue b/components/cards/LazyBookCard.vue
index 334b0241..8a743f68 100644
--- a/components/cards/LazyBookCard.vue
+++ b/components/cards/LazyBookCard.vue
@@ -10,20 +10,20 @@
       <p class="truncate" :style="{ fontSize: 0.9 * sizeMultiplier + 'rem' }">
         {{ displayTitle }}
       </p>
-      <p class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
-      <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
+      <p class="truncate text-fg-muted" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displayLineTwo || '&nbsp;' }}</p>
+      <p v-if="displaySortLine" class="truncate text-fg-muted" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
     </div>
 
     <div v-if="seriesSequenceList" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20 text-right" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #78350f">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequenceList }}</p>
+      <p class="text-white" :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ seriesSequenceList }}</p>
     </div>
     <div v-else-if="booksInSeries" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }" style="background-color: #cd9d49dd">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ booksInSeries }}</p>
+      <p class="text-white" :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ booksInSeries }}</p>
     </div>
 
     <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
       <div v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
-        <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="text-gray-300 text-center">{{ title }}</p>
+        <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="text-fg-muted text-center">{{ title }}</p>
       </div>
 
       <img v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
@@ -75,19 +75,19 @@
 
     <!-- Podcast Episode # -->
     <div v-if="recentEpisodeNumber !== null && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md z-10" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">
+      <p class="text-white" :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">
         Episode<span v-if="recentEpisodeNumber"> #{{ recentEpisodeNumber }}</span>
       </p>
     </div>
 
     <!-- Podcast Num Episodes -->
     <div v-else-if="numEpisodes && !numEpisodesIncomplete && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodes }}</p>
+      <p class="text-white" :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodes }}</p>
     </div>
 
     <!-- Podcast Num Episodes Incomplete -->
     <div v-else-if="numEpisodesIncomplete && !isSelectionMode" class="absolute rounded-full bg-black bg-opacity-90 box-shadow-md z-10 flex items-center justify-center" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', width: 1.25 * sizeMultiplier + 'rem', height: 1.25 * sizeMultiplier + 'rem' }">
-      <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodesIncomplete }}</p>
+      <p class="text-white" :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">{{ numEpisodesIncomplete }}</p>
     </div>
   </div>
 </template>
diff --git a/components/cards/LazyCollectionCard.vue b/components/cards/LazyCollectionCard.vue
index 85e6b5b2..7126ac8b 100644
--- a/components/cards/LazyCollectionCard.vue
+++ b/components/cards/LazyCollectionCard.vue
@@ -5,7 +5,7 @@
       <covers-collection-cover ref="cover" :book-items="books" :width="width" :height="height" :book-cover-aspect-ratio="bookCoverAspectRatio" />
     </div>
 
-    <div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-mdtext-center" :style="{ width: Math.min(240, width) + 'px' }">
+    <div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(240, width) + 'px' }">
       <div class="w-full h-full flex items-center justify-center rounded-sm border" :class="isAltViewEnabled ? 'altBookshelfLabel' : 'shinyBlack'" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
       </div>
diff --git a/components/cards/LazyListBookCard.vue b/components/cards/LazyListBookCard.vue
index 4a7c3649..1e4a9433 100644
--- a/components/cards/LazyListBookCard.vue
+++ b/components/cards/LazyListBookCard.vue
@@ -18,10 +18,10 @@
         <p class="whitespace-normal" :style="{ fontSize: 0.8 * sizeMultiplier + 'rem' }">
           <span v-if="seriesSequence">#{{ seriesSequence }}&nbsp;</span>{{ displayTitle }}
         </p>
-        <p class="truncate text-gray-400" :style="{ fontSize: 0.7 * sizeMultiplier + 'rem' }">{{ displayAuthor }}</p>
-        <p v-if="displaySortLine" class="truncate text-gray-400" :style="{ fontSize: 0.7 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
-        <p v-if="duration" class="truncate text-gray-400" :style="{ fontSize: 0.7 * sizeMultiplier + 'rem' }">{{ $elapsedPretty(duration) }}</p>
-        <p v-if="episodes" class="truncate text-gray-400" :style="{ fontSize: 0.7 * sizeMultiplier + 'rem' }">{{ episodes }}</p>
+        <p class="truncate text-fg-muted" :style="{ fontSize: 0.7 * sizeMultiplier + 'rem' }">{{ displayAuthor }}</p>
+        <p v-if="displaySortLine" class="truncate text-fg-muted" :style="{ fontSize: 0.7 * sizeMultiplier + 'rem' }">{{ displaySortLine }}</p>
+        <p v-if="duration" class="truncate text-fg-muted" :style="{ fontSize: 0.7 * sizeMultiplier + 'rem' }">{{ $elapsedPretty(duration) }}</p>
+        <p v-if="episodes" class="truncate text-fg-muted" :style="{ fontSize: 0.7 * sizeMultiplier + 'rem' }">{{ episodes }}</p>
       </div>
 
       <div v-if="localLibraryItem || isLocal" class="absolute top-0 right-0 z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
diff --git a/components/cards/LazyPlaylistCard.vue b/components/cards/LazyPlaylistCard.vue
index 44448f70..1518e6da 100644
--- a/components/cards/LazyPlaylistCard.vue
+++ b/components/cards/LazyPlaylistCard.vue
@@ -4,7 +4,7 @@
     <div class="w-full h-full bg-primary relative rounded overflow-hidden">
       <covers-playlist-cover ref="cover" :items="items" :width="width" :height="height" />
     </div>
-    <div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-mdtext-center" :style="{ width: Math.min(160, width) + 'px' }">
+    <div class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(160, width) + 'px' }">
       <div class="w-full h-full flex items-center justify-center rounded-sm border" :class="isAltViewEnabled ? 'altBookshelfLabel' : 'shinyBlack'" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
       </div>
diff --git a/components/cards/LazySeriesCard.vue b/components/cards/LazySeriesCard.vue
index 7ca5076c..a52a828d 100644
--- a/components/cards/LazySeriesCard.vue
+++ b/components/cards/LazySeriesCard.vue
@@ -10,7 +10,7 @@
     <div v-if="isAltViewEnabled && isCategorized" class="absolute z-30 left-0 right-0 mx-auto -bottom-8 h-8 py-1 rounded-md text-center">
       <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
     </div>
-    <div v-if="!isCategorized" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-mdtext-center" :style="{ width: Math.min(240, width) + 'px' }">
+    <div v-if="!isCategorized" class="categoryPlacard absolute z-30 left-0 right-0 mx-auto -bottom-6 h-6 rounded-md text-center" :style="{ width: Math.min(240, width) + 'px' }">
       <div class="w-full h-full flex items-center justify-center rounded-sm border" :class="isAltViewEnabled ? 'altBookshelfLabel' : 'shinyBlack'" :style="{ padding: `0rem ${0.5 * sizeMultiplier}rem` }">
         <p class="truncate" :style="{ fontSize: labelFontSize + 'rem' }">{{ title }}</p>
       </div>
diff --git a/components/cards/TagSearchCard.vue b/components/cards/TagSearchCard.vue
index c4068a28..3f3d689a 100644
--- a/components/cards/TagSearchCard.vue
+++ b/components/cards/TagSearchCard.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex h-full px-1 overflow-hidden">
     <div class="w-10 h-10 flex items-center justify-center">
-      <span class="material-icons text-2xl text-gray-200">local_offer</span>
+      <span class="material-icons text-2xl text-fg">local_offer</span>
     </div>
     <div class="flex-grow px-2 tagSearchCardContent h-full">
       <p class="truncate text-sm">{{ tag }}</p>
diff --git a/components/connection/ServerConnectForm.vue b/components/connection/ServerConnectForm.vue
index 2f6312e9..c54395e4 100644
--- a/components/connection/ServerConnectForm.vue
+++ b/components/connection/ServerConnectForm.vue
@@ -3,12 +3,12 @@
     <div v-show="!loggedIn" class="mt-8 bg-primary overflow-hidden shadow rounded-lg px-4 py-6 w-full">
       <!-- list of server connection configs -->
       <template v-if="!showForm">
-        <div v-for="config in serverConnectionConfigs" :key="config.id" class="flex items-center py-4 my-1 border-b border-white border-opacity-10 relative" @click="connectToServer(config)">
-          <span class="material-icons-outlined text-xl text-gray-300">dns</span>
-          <p class="pl-3 pr-6 text-base text-gray-200">{{ config.name }}</p>
+        <div v-for="config in serverConnectionConfigs" :key="config.id" class="flex items-center py-4 my-1 border-b border-fg/10 relative" @click="connectToServer(config)">
+          <span class="material-icons-outlined text-xl text-fg-muted">dns</span>
+          <p class="pl-3 pr-6 text-base text-fg">{{ config.name }}</p>
 
           <div class="absolute top-0 right-0 h-full px-4 flex items-center" @click.stop="editServerConfig(config)">
-            <span class="material-icons text-lg text-gray-300">more_vert</span>
+            <span class="material-icons text-lg text-fg-muted">more_vert</span>
           </div>
         </div>
         <div class="my-1 py-4 w-full">
@@ -20,7 +20,7 @@
         <!-- server address input -->
         <form v-if="!showAuth" @submit.prevent="submit" novalidate class="w-full">
           <div v-if="serverConnectionConfigs.length" class="flex items-center mb-4" @click="showServerList">
-            <span class="material-icons text-gray-300">arrow_back</span>
+            <span class="material-icons text-fg-muted">arrow_back</span>
           </div>
           <h2 class="text-lg leading-7 mb-2">{{ $strings.LabelServerAddress }}</h2>
           <ui-text-input v-model="serverConfig.address" :disabled="processing || !networkConnected || !!serverConfig.id" placeholder="http://55.55.55.55:13378" type="url" class="w-full h-10" />
@@ -31,15 +31,15 @@
         <!-- username/password and auth methods -->
         <template v-else>
           <div v-if="serverConfig.id" class="flex items-center mb-4" @click="showServerList">
-            <span class="material-icons text-gray-300">arrow_back</span>
+            <span class="material-icons text-fg-muted">arrow_back</span>
           </div>
 
           <div class="flex items-center">
-            <p class="text-gray-300">{{ serverConfig.address }}</p>
+            <p class="text-fg-muted">{{ serverConfig.address }}</p>
             <div class="flex-grow" />
             <span v-if="!serverConfig.id" class="material-icons" style="font-size: 1.1rem" @click="editServerAddress">edit</span>
           </div>
-          <div class="w-full h-px bg-white bg-opacity-10 my-2" />
+          <div class="w-full h-px bg-fg/10 my-2" />
           <form v-if="isLocalAuthEnabled" @submit.prevent="submitAuth" class="pt-3">
             <ui-text-input v-model="serverConfig.username" :disabled="processing" :placeholder="$strings.LabelUsername" class="w-full mb-2 text-lg" />
             <ui-text-input v-model="password" type="password" :disabled="processing" :placeholder="$strings.LabelPassword" class="w-full mb-2 text-lg" />
@@ -50,7 +50,7 @@
               <ui-btn :disabled="processing || !networkConnected" type="submit" class="mt-1 h-10">{{ networkConnected ? $strings.ButtonSubmit : $strings.MessageNoNetworkConnection }}</ui-btn>
             </div>
           </form>
-          <div v-if="isLocalAuthEnabled && isOpenIDAuthEnabled" class="w-full h-px bg-white bg-opacity-10 my-4" />
+          <div v-if="isLocalAuthEnabled && isOpenIDAuthEnabled" class="w-full h-px bg-fg/10 my-4" />
           <ui-btn v-if="isOpenIDAuthEnabled" :disabled="processing" class="h-10 w-full" @click="clickLoginWithOpenId">{{ oauth.buttonText }}</ui-btn>
         </template>
       </div>
@@ -62,7 +62,7 @@
       </div>
     </div>
 
-    <div :class="processing ? 'opacity-100' : 'opacity-0 pointer-events-none'" class="fixed w-full h-full top-0 left-0 bg-black bg-opacity-75 flex items-center justify-center z-30 transition-opacity duration-500">
+    <div :class="processing ? 'opacity-100' : 'opacity-0 pointer-events-none'" class="fixed w-full h-full top-0 left-0 bg-black/75 flex items-center justify-center z-30 transition-opacity duration-500">
       <div>
         <div class="absolute top-0 left-0 w-full p-6 flex items-center flex-col justify-center z-0 short:hidden">
           <img src="/Logo.png" class="h-20 w-20 mb-2" />
diff --git a/components/home/BookshelfNavBar.vue b/components/home/BookshelfNavBar.vue
index ebc3d6aa..792fa60b 100644
--- a/components/home/BookshelfNavBar.vue
+++ b/components/home/BookshelfNavBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full h-9 bg-bg relative">
-    <div id="bookshelf-navbar" class="absolute z-10 top-0 left-0 w-full h-full flex bg-secondary text-gray-200">
-      <nuxt-link v-for="item in items" :key="item.to" :to="item.to" class="h-full flex-grow flex items-center justify-center" :class="routeName === item.routeName ? 'bg-primary' : 'text-gray-400'">
+    <div id="bookshelf-navbar" class="absolute z-10 top-0 left-0 w-full h-full flex bg-secondary">
+      <nuxt-link v-for="item in items" :key="item.to" :to="item.to" class="h-full flex-grow flex items-center justify-center" :class="routeName === item.routeName ? 'bg-primary' : 'text-fg-muted'">
         <p v-if="routeName === item.routeName" class="text-sm font-semibold">{{ item.text }}</p>
         <span v-else-if="item.iconPack === 'abs-icons'" class="abs-icons" :class="`icon-${item.icon} ${item.iconClass || ''}`"></span>
         <span v-else :class="`${item.iconPack} ${item.iconClass || ''}`">{{ item.icon }}</span>
diff --git a/components/modals/BookmarksModal.vue b/components/modals/BookmarksModal.vue
index 33f074ac..d1457d69 100644
--- a/components/modals/BookmarksModal.vue
+++ b/components/modals/BookmarksModal.vue
@@ -6,7 +6,7 @@
       </div>
     </template>
     <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
-      <div ref="container" class="w-full rounded-lg bg-primary border border-white border-opacity-20 overflow-y-auto overflow-x-hidden" style="max-height: 80vh" @click.stop.prevent>
+      <div ref="container" class="w-full rounded-lg bg-primary border border-border overflow-y-auto overflow-x-hidden" style="max-height: 80vh" @click.stop.prevent>
         <div class="w-full h-full p-4" v-show="showBookmarkTitleInput">
           <div class="flex mb-4 items-center">
             <div class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-white hover:bg-opacity-10 cursor-pointer" @click.stop="showBookmarkTitleInput = false">
@@ -31,7 +31,7 @@
           <div v-if="!bookmarks.length" class="flex h-32 items-center justify-center">
             <p class="text-xl">{{ $strings.MessageNoBookmarks }}</p>
           </div>
-          <div v-show="canCreateBookmark" class="flex px-4 py-2 items-center text-center justify-between border-b border-white border-opacity-10 bg-blue-500 bg-opacity-20 cursor-pointer text-white text-opacity-80 hover:bg-opacity-40 hover:text-opacity-100" @click.stop="createBookmark">
+          <div v-show="canCreateBookmark" class="flex px-4 py-2 items-center text-center justify-between border-b border-fg/10 bg-success cursor-pointer text-white text-opacity-80" @click.stop="createBookmark">
             <span class="material-icons">add</span>
             <p class="text-base pl-2">{{ $strings.ButtonCreateBookmark }}</p>
             <p class="text-sm font-mono">
diff --git a/components/modals/ChaptersModal.vue b/components/modals/ChaptersModal.vue
index 31cb8845..5ea5f69a 100644
--- a/components/modals/ChaptersModal.vue
+++ b/components/modals/ChaptersModal.vue
@@ -7,14 +7,14 @@
     </template>
 
     <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
-      <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-secondary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
+      <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-secondary rounded-lg border border-fg/20" style="max-height: 75%" @click.stop>
         <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="(chapter, index) in chapters">
-            <li :key="chapter.id" :id="`chapter-row-${chapter.id}`" class="text-gray-50 select-none relative py-4 cursor-pointer" :class="currentChapterId === chapter.id ? 'bg-primary bg-opacity-80' : ''" role="option" @click="clickedOption(chapter)">
+            <li :key="chapter.id" :id="`chapter-row-${chapter.id}`" class="text-fg select-none relative py-4 cursor-pointer" :class="currentChapterId === chapter.id ? 'bg-primary bg-opacity-80' : ''" role="option" @click="clickedOption(chapter)">
               <div class="relative flex items-center pl-3 pr-20">
-                <p class="font-normal block truncate text-sm text-white text-opacity-80">{{ index + 1 }} - {{ chapter.title }}</p>
+                <p class="font-normal block truncate text-sm text-fg/80">{{ index + 1 }} - {{ chapter.title }}</p>
                 <div class="absolute top-0 right-3 -mt-0.5">
-                  <span class="font-mono text-white text-opacity-90 leading-3 text-sm" style="letter-spacing: -0.5px">{{ $secondsToTimestamp(chapter.start / _playbackRate) }}</span>
+                  <span class="font-mono text-fg-muted leading-3 text-sm" style="letter-spacing: -0.5px">{{ $secondsToTimestamp(chapter.start / _playbackRate) }}</span>
                 </div>
               </div>
 
diff --git a/components/modals/Dialog.vue b/components/modals/Dialog.vue
index 9086e3a2..4e5c71c3 100644
--- a/components/modals/Dialog.vue
+++ b/components/modals/Dialog.vue
@@ -7,14 +7,14 @@
     </template>
 
     <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
-      <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white/20 p-2" style="max-height: 75%" @click.stop>
+      <div ref="container" class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-fg/20 p-2" style="max-height: 75%" @click.stop>
         <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="item in itemsToShow">
             <slot :name="item.value" :item="item" :selected="item.value === selected">
-              <li :key="item.value" :ref="`item-${item.value}`" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400" :class="selected === item.value ? 'bg-success bg-opacity-10' : ''" :style="{ paddingTop: itemPaddingY, paddingBottom: itemPaddingY }" role="option" @click="clickedOption(item.value)">
+              <li :key="item.value" :ref="`item-${item.value}`" class="text-fg select-none relative cursor-pointer hover:bg-black-400" :class="selected === item.value ? 'bg-success bg-opacity-10' : ''" :style="{ paddingTop: itemPaddingY, paddingBottom: itemPaddingY }" role="option" @click="clickedOption(item.value)">
                 <div class="relative flex items-center px-3">
-                  <span v-if="item.icon" class="material-icons-outlined text-xl mr-2 text-white text-opacity-80">{{ item.icon }}</span>
-                  <p class="font-normal block truncate text-base text-white text-opacity-80">{{ item.text }}</p>
+                  <span v-if="item.icon" class="material-icons-outlined text-xl mr-2 text-fg text-opacity-80">{{ item.icon }}</span>
+                  <p class="font-normal block truncate text-base text-fg text-opacity-80">{{ item.text }}</p>
                 </div>
               </li>
             </slot>
diff --git a/components/modals/FilterModal.vue b/components/modals/FilterModal.vue
index b21ff8de..ae15f882 100644
--- a/components/modals/FilterModal.vue
+++ b/components/modals/FilterModal.vue
@@ -6,10 +6,10 @@
       </div>
     </template>
     <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
-      <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
+      <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-fg/20" style="max-height: 75%" @click.stop>
         <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="item in items">
-            <li :key="item.value" class="text-gray-50 select-none relative py-4 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
+            <li :key="item.value" class="text-fg select-none relative py-4 pr-9 cursor-pointer" :class="item.value === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
               <div class="flex items-center justify-between">
                 <span class="font-normal ml-3 block truncate text-lg">{{ item.text }}</span>
               </div>
@@ -20,7 +20,7 @@
           </template>
         </ul>
         <ul v-show="sublist" class="h-full w-full rounded-lg" role="listbox" aria-labelledby="listbox-label">
-          <li class="text-gray-50 select-none relative py-3 pl-9 cursor-pointer hover:bg-black-400" role="option" @click="sublist = null">
+          <li class="text-fg select-none relative py-3 pl-9 cursor-pointer" role="option" @click="sublist = null">
             <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
               <span class="material-icons text-2xl">arrow_left</span>
             </div>
@@ -34,7 +34,7 @@
             </div>
           </li>
           <template v-for="item in sublistItems">
-            <li :key="item.value" class="text-gray-50 select-none relative px-4 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item.value}` === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item.value)">
+            <li :key="item.value" class="text-fg select-none relative px-4 cursor-pointer" :class="`${sublist}.${item.value}` === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item.value)">
               <div class="flex items-center">
                 <span class="font-normal truncate py-3 text-base">{{ item.text }}</span>
               </div>
diff --git a/components/modals/FullscreenModal.vue b/components/modals/FullscreenModal.vue
index 86cc7c59..9f99ca4f 100644
--- a/components/modals/FullscreenModal.vue
+++ b/components/modals/FullscreenModal.vue
@@ -1,6 +1,6 @@
 <template>
   <div ref="wrapper" class="modal modal-bg w-screen fixed bottom-0 left-0 flex items-center justify-center z-50" :class="halfScreen ? 'h-[50vh]' : 'h-screen'" @click.stop @touchstart.stop @touchend.stop>
-    <div ref="content" class="relative text-white h-full w-full bg-bg">
+    <div ref="content" class="relative text-fg h-full w-full bg-bg">
       <slot />
     </div>
   </div>
diff --git a/components/modals/ItemDetailsModal.vue b/components/modals/ItemDetailsModal.vue
index a7d6bb66..ae00a929 100644
--- a/components/modals/ItemDetailsModal.vue
+++ b/components/modals/ItemDetailsModal.vue
@@ -7,12 +7,12 @@
     </template>
 
     <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
-      <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20 p-2" style="max-height: 75%" @click.stop>
+      <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-border p-2" style="max-height: 75%" @click.stop>
         <p class="mb-2">{{ mediaMetadata.title }}</p>
 
         <div v-if="size" class="text-sm mb-2">{{ $strings.LabelSize }}: {{ $bytesPretty(size) }}</div>
 
-        <p class="mb-1 text-xs text-gray-200">ID: {{ _libraryItem.id }}</p>
+        <p class="mb-1 text-xs text-fg">ID: {{ _libraryItem.id }}</p>
       </div>
     </div>
   </modals-modal>
diff --git a/components/modals/LibrariesModal.vue b/components/modals/LibrariesModal.vue
index ed0e2db4..a2a57dbc 100644
--- a/components/modals/LibrariesModal.vue
+++ b/components/modals/LibrariesModal.vue
@@ -7,10 +7,10 @@
     </template>
 
     <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click="show = false">
-      <div class="w-full overflow-x-hidden overflow-y-auto bg-secondary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
+      <div class="w-full overflow-x-hidden overflow-y-auto bg-secondary rounded-lg border border-border" style="max-height: 75%" @click.stop>
         <ul class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="library in libraries">
-            <li :key="library.id" class="text-gray-50 select-none relative py-3 cursor-pointer" :class="currentLibraryId === library.id ? 'bg-primary bg-opacity-80' : ''" role="option" @click="clickedOption(library)">
+            <li :key="library.id" class="text-fg select-none relative py-3 cursor-pointer" :class="currentLibraryId === library.id ? 'bg-primary bg-opacity-80' : ''" role="option" @click="clickedOption(library)">
               <div v-show="currentLibraryId === library.id" class="absolute top-0 left-0 w-0.5 bg-warning h-full" />
               <div class="flex items-center px-3">
                 <ui-library-icon :icon="library.icon" />
diff --git a/components/modals/Modal.vue b/components/modals/Modal.vue
index 400775e3..353cfdae 100644
--- a/components/modals/Modal.vue
+++ b/components/modals/Modal.vue
@@ -6,7 +6,7 @@
       <span class="material-icons text-4xl">close</span>
     </div>
     <slot name="outer" />
-    <div ref="content" style="min-height: 200px" class="relative text-white max-h-screen" :style="{ height: modalHeight, width: modalWidth, maxWidth: maxWidth }" v-click-outside="clickBg">
+    <div ref="content" style="min-height: 200px" class="relative text-fg max-h-screen" :style="{ height: modalHeight, width: modalWidth, maxWidth: maxWidth }" v-click-outside="clickBg">
       <slot />
     </div>
   </div>
diff --git a/components/modals/OrderModal.vue b/components/modals/OrderModal.vue
index c2106e8a..9cc98de6 100644
--- a/components/modals/OrderModal.vue
+++ b/components/modals/OrderModal.vue
@@ -1,9 +1,9 @@
 <template>
   <modals-modal v-model="show" width="90%">
-    <div class="w-full h-full bg-primary rounded-lg border border-white border-opacity-20">
+    <div class="w-full h-full bg-primary rounded-lg border border-fg/20">
       <ul class="w-full rounded-lg text-base" role="listbox" aria-labelledby="listbox-label">
         <template v-for="item in items">
-          <li :key="item.value" class="text-gray-50 select-none relative py-4 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
+          <li :key="item.value" class="text-fg select-none relative py-4 pr-9 cursor-pointer" :class="item.value === selected ? 'bg-bg bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
             <div class="flex items-center">
               <span class="font-normal ml-3 block truncate text-lg">{{ item.text }}</span>
             </div>
diff --git a/components/modals/PlaybackSpeedModal.vue b/components/modals/PlaybackSpeedModal.vue
index 6e711e10..1e40a814 100644
--- a/components/modals/PlaybackSpeedModal.vue
+++ b/components/modals/PlaybackSpeedModal.vue
@@ -7,24 +7,24 @@
     </template>
 
     <div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center">
-      <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
+      <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-border" style="max-height: 75%" @click.stop>
         <ul class="w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="rate in rates">
-            <li :key="rate" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" :class="rate === selected ? 'bg-bg bg-opacity-80' : ''" role="option" @click="clickedOption(rate)">
+            <li :key="rate" class="text-fg select-none relative py-4" :class="rate === selected ? 'bg-bg-hover/50' : ''" role="option" @click="clickedOption(rate)">
               <div class="flex items-center justify-center">
                 <span class="font-normal block truncate text-lg">{{ rate }}x</span>
               </div>
             </li>
           </template>
         </ul>
-        <div class="flex items-center justify-center py-3 border-t border-white border-opacity-10">
-          <button :disabled="!canDecrement" @click="decrement" class="icon-num-btn w-8 h-8 text-white text-opacity-75 rounded border border-white border-opacity-20 flex items-center justify-center">
+        <div class="flex items-center justify-center py-3 border-t border-fg/10">
+          <button :disabled="!canDecrement" @click="decrement" class="icon-num-btn w-8 h-8 text-fg-muted rounded border border-border flex items-center justify-center">
             <span class="material-icons">remove</span>
           </button>
           <div class="w-24 text-center">
             <p class="text-xl">{{ playbackRate }}<span class="text-lg">⨯</span></p>
           </div>
-          <button :disabled="!canIncrement" @click="increment" class="icon-num-btn w-8 h-8 text-white text-opacity-75 rounded border border-white border-opacity-20 flex items-center justify-center">
+          <button :disabled="!canIncrement" @click="increment" class="icon-num-btn w-8 h-8 text-fg-muted rounded border border-border flex items-center justify-center">
             <span class="material-icons">add</span>
           </button>
         </div>
diff --git a/components/modals/SleepTimerLengthModal.vue b/components/modals/SleepTimerLengthModal.vue
index f1313d91..bad7252f 100644
--- a/components/modals/SleepTimerLengthModal.vue
+++ b/components/modals/SleepTimerLengthModal.vue
@@ -27,18 +27,18 @@
         </div>
         <ul v-else class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="timeout in timeouts">
-            <li :key="timeout" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(timeout)">
+            <li :key="timeout" class="text-fg select-none relative py-4" role="option" @click="clickedOption(timeout)">
               <div class="flex items-center justify-center">
                 <span class="font-normal block truncate text-lg">{{ timeout }} min</span>
               </div>
             </li>
           </template>
-          <li class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="clickedChapterOption">
+          <li class="text-fg select-none relative py-4" role="option" @click="clickedChapterOption">
             <div class="flex items-center justify-center">
               <span class="font-normal block truncate text-lg text-center">{{ $strings.LabelEndOfChapter }}</span>
             </div>
           </li>
-          <li class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="manualTimerModal = true">
+          <li class="text-fg select-none relative py-4" role="option" @click="manualTimerModal = true">
             <div class="flex items-center justify-center">
               <span class="font-normal block truncate text-lg text-center">{{ $strings.LabelCustomTime }}</span>
             </div>
diff --git a/components/modals/SleepTimerModal.vue b/components/modals/SleepTimerModal.vue
index a8e31c9a..96897df1 100644
--- a/components/modals/SleepTimerModal.vue
+++ b/components/modals/SleepTimerModal.vue
@@ -13,7 +13,7 @@
         manualTimerModal = false
       "
     >
-      <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
+      <div class="w-full overflow-x-hidden overflow-y-auto bg-primary rounded-lg border border-border" style="max-height: 75%" @click.stop>
         <div v-if="manualTimerModal" class="p-4">
           <div class="flex mb-4" @click="manualTimerModal = false">
             <span class="material-icons text-3xl">arrow_back</span>
@@ -27,18 +27,18 @@
         </div>
         <ul v-else-if="!sleepTimerRunning" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
           <template v-for="timeout in timeouts">
-            <li :key="timeout" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(timeout)">
+            <li :key="timeout" class="text-fg select-none relative py-4" role="option" @click="clickedOption(timeout)">
               <div class="flex items-center justify-center">
                 <span class="font-normal block truncate text-lg">{{ timeout }} min</span>
               </div>
             </li>
           </template>
-          <li v-if="currentEndOfChapterTime" class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="clickedChapterOption(timeout)">
+          <li v-if="currentEndOfChapterTime" class="text-fg select-none relative py-4" role="option" @click="clickedChapterOption(timeout)">
             <div class="flex items-center justify-center">
               <span class="font-normal block truncate text-lg text-center">{{ $strings.LabelEndOfChapter }}</span>
             </div>
           </li>
-          <li class="text-gray-50 select-none relative py-4 cursor-pointer hover:bg-black-400" role="option" @click="manualTimerModal = true">
+          <li class="text-fg select-none relative py-4" role="option" @click="manualTimerModal = true">
             <div class="flex items-center justify-center">
               <span class="font-normal block truncate text-lg text-center">{{ $strings.LabelCustomTime }}</span>
             </div>
diff --git a/components/modals/bookmarks/BookmarkItem.vue b/components/modals/bookmarks/BookmarkItem.vue
index 7ec4dd44..bdfbd7f2 100644
--- a/components/modals/bookmarks/BookmarkItem.vue
+++ b/components/modals/bookmarks/BookmarkItem.vue
@@ -1,17 +1,17 @@
 <template>
-  <div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-1 py-4 justify-start cursor-pointer hover:bg-bg relative" :class="highlight ? 'bg-bg bg-opacity-60' : ' bg-opacity-20'" @click="click">
+  <div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-1 py-4 justify-start relative" :class="highlight ? 'bg-bg bg-opacity-60' : ' bg-opacity-20'" @click="click">
     <div class="flex-grow overflow-hidden px-2">
       <div class="flex items-center mb-0.5">
-        <i class="material-icons text-lg pr-1 -mb-1" :class="highlight ? 'text-success' : 'text-white/60'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</i>
+        <i class="material-icons text-lg pr-1 -mb-1" :class="highlight ? 'text-success' : 'text-fg-muted'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</i>
         <p class="truncate text-sm">
           {{ bookmark.title }}
         </p>
       </div>
-      <p class="text-sm font-mono text-gray-300 flex items-center"><span class="material-icons text-base text-white/60 pl-px pr-1">schedule</span>{{ $secondsToTimestamp(bookmark.time) }}</p>
+      <p class="text-sm font-mono text-fg-muted flex items-center"><span class="material-icons text-base pl-px pr-1">schedule</span>{{ $secondsToTimestamp(bookmark.time) }}</p>
     </div>
     <div class="h-full flex items-center justify-end transform w-16 pr-2" @click.stop>
-      <span class="material-icons text-2xl mr-2 text-gray-200 hover:text-yellow-400" @click.stop="editClick">edit</span>
-      <span class="material-icons text-2xl text-gray-200 hover:text-error cursor-pointer" @click.stop="deleteClick">delete</span>
+      <span class="material-icons text-2xl mr-2 text-fg hover:text-yellow-400" @click.stop="editClick">edit</span>
+      <span class="material-icons text-2xl text-fg hover:text-error" @click.stop="deleteClick">delete</span>
     </div>
   </div>
 </template>
diff --git a/components/modals/playlists/AddCreateModal.vue b/components/modals/playlists/AddCreateModal.vue
index 6125050b..f829778f 100644
--- a/components/modals/playlists/AddCreateModal.vue
+++ b/components/modals/playlists/AddCreateModal.vue
@@ -11,7 +11,7 @@
     <div v-if="showPlaylistNameInput" class="w-full h-full max-h-[calc(100vh-128px)] flex items-center">
       <div class="w-full px-4">
         <div class="flex mb-4 items-center">
-          <div class="w-9 h-9 flex items-center justify-center rounded-full hover:bg-white hover:bg-opacity-10 cursor-pointer" @click.stop="showPlaylistNameInput = false">
+          <div class="w-9 h-9 flex items-center justify-center rounded-full cursor-pointer" @click.stop="showPlaylistNameInput = false">
             <span class="material-icons text-3xl">arrow_back</span>
           </div>
           <p class="text-xl pl-2">{{ $strings.HeaderNewPlaylist }}</p>
diff --git a/components/modals/rssfeeds/RssFeedMetadataBuilder.vue b/components/modals/rssfeeds/RssFeedMetadataBuilder.vue
index 4fcd1a2a..6c94cd93 100644
--- a/components/modals/rssfeeds/RssFeedMetadataBuilder.vue
+++ b/components/modals/rssfeeds/RssFeedMetadataBuilder.vue
@@ -1,22 +1,22 @@
 <template>
   <div class="w-full py-2 text-sm">
     <div class="flex -mb-px">
-      <div class="w-1/2 h-6 rounded-tl-md relative border border-white/10 flex items-center justify-center cursor-pointer" :class="!showAdvancedView ? 'text-white bg-bg border-b-bg' : 'text-gray-400 bg-primary bg-opacity-70'" @click="showAdvancedView = false">
+      <div class="w-1/2 h-6 rounded-tl-md relative border border-fg/10 flex items-center justify-center cursor-pointer" :class="!showAdvancedView ? 'text-fg bg-bg border-b-bg' : 'text-fg-muted bg-primary bg-opacity-70'" @click="showAdvancedView = false">
         <p class="text-sm">{{ $strings.HeaderRSSFeedGeneral }}</p>
       </div>
-      <div class="w-1/2 h-6 rounded-tr-md relative border border-white/10 flex items-center justify-center -ml-px cursor-pointer" :class="showAdvancedView ? 'text-white bg-bg border-b-bg' : 'text-gray-400 bg-primary bg-opacity-70'" @click="showAdvancedView = true">
+      <div class="w-1/2 h-6 rounded-tr-md relative border border-fg/10 flex items-center justify-center -ml-px cursor-pointer" :class="showAdvancedView ? 'text-fg bg-bg border-b-bg' : 'text-fg-muted bg-primary bg-opacity-70'" @click="showAdvancedView = true">
         <p class="text-sm">{{ $strings.HeaderAdvanced }}</p>
       </div>
     </div>
-    <div class="px-2 py-4 md:p-4 border border-white/10 rounded-b-md mr-px" style="min-height: 220px">
+    <div class="px-2 py-4 md:p-4 border border-fg/10 rounded-b-md mr-px" style="min-height: 220px">
       <template v-if="!showAdvancedView">
         <div class="flex-grow pt-2 mb-2">
-          <ui-checkbox v-model="preventIndexing" :label="$strings.LabelPreventIndexing" checkbox-bg="primary" border-color="gray-600" label-class="pl-2" />
+          <ui-checkbox v-model="preventIndexing" :label="$strings.LabelPreventIndexing" checkbox-bg="primary" border-color="border" label-class="pl-2" />
         </div>
       </template>
       <template v-else>
         <div class="flex-grow pt-2 mb-2">
-          <ui-checkbox v-model="preventIndexing" :label="$strings.LabelPreventIndexing" checkbox-bg="primary" border-color="gray-600" label-class="pl-2" />
+          <ui-checkbox v-model="preventIndexing" :label="$strings.LabelPreventIndexing" checkbox-bg="primary" border-color="border" label-class="pl-2" />
         </div>
         <div class="w-full relative mb-1">
           <ui-text-input-with-label v-model="ownerName" :label="$strings.LabelRSSFeedCustomOwnerName" />
diff --git a/components/modals/rssfeeds/RssFeedModal.vue b/components/modals/rssfeeds/RssFeedModal.vue
index e63368b5..c400d1aa 100644
--- a/components/modals/rssfeeds/RssFeedModal.vue
+++ b/components/modals/rssfeeds/RssFeedModal.vue
@@ -14,25 +14,25 @@
 
           <ui-text-input v-model="currentFeed.feedUrl" class="text-sm" readonly />
 
-          <span class="material-icons absolute right-2 bottom-2 p-0.5 text-base" :class="linkCopied ? 'text-success' : 'text-gray-300'" @click="copyToClipboard(currentFeed.feedUrl)">{{ linkCopied ? 'done' : 'content_copy' }}</span>
+          <span class="material-icons absolute right-2 bottom-2 p-0.5 text-base" :class="linkCopied ? 'text-success' : 'text-fg-muted'" @click="copyToClipboard(currentFeed.feedUrl)">{{ linkCopied ? 'done' : 'content_copy' }}</span>
         </div>
 
         <div v-if="currentFeed.meta" class="mt-5">
           <div class="flex py-0.5">
             <div class="w-48">
-              <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelRSSFeedPreventIndexing }}</span>
+              <span class="text-fg-muted uppercase text-sm">{{ $strings.LabelRSSFeedPreventIndexing }}</span>
             </div>
             <div>{{ currentFeed.meta.preventIndexing ? $strings.ButtonYes : $strings.LabelNo }}</div>
           </div>
           <div v-if="currentFeed.meta.ownerName" class="flex py-0.5">
             <div class="w-48">
-              <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelRSSFeedCustomOwnerName }}</span>
+              <span class="text-fg-muted uppercase text-sm">{{ $strings.LabelRSSFeedCustomOwnerName }}</span>
             </div>
             <div>{{ currentFeed.meta.ownerName }}</div>
           </div>
           <div v-if="currentFeed.meta.ownerEmail" class="flex py-0.5">
             <div class="w-48">
-              <span class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelRSSFeedCustomOwnerEmail }}</span>
+              <span class="text-fg-muted uppercase text-sm">{{ $strings.LabelRSSFeedCustomOwnerEmail }}</span>
             </div>
             <div>{{ currentFeed.meta.ownerEmail }}</div>
           </div>
@@ -41,7 +41,7 @@
       <div v-else class="w-full">
         <div class="w-full relative mb-2">
           <ui-text-input-with-label v-model="newFeedSlug" :label="$strings.LabelRSSFeedSlug" />
-          <p class="text-xs text-gray-400 py-0.5 px-1">{{ $getString('MessageFeedURLWillBe', [demoFeedUrl]) }}</p>
+          <p class="text-xs text-fg-muted py-0.5 px-1">{{ $getString('MessageFeedURLWillBe', [demoFeedUrl]) }}</p>
         </div>
         <modals-rssfeeds-rss-feed-metadata-builder v-model="metadataDetails" />
 
diff --git a/components/tables/ChaptersTable.vue b/components/tables/ChaptersTable.vue
index 756f6d35..95e60cd7 100644
--- a/components/tables/ChaptersTable.vue
+++ b/components/tables/ChaptersTable.vue
@@ -2,7 +2,7 @@
   <div class="w-full my-4">
     <div class="w-full bg-primary px-4 py-2 flex items-center" :class="expanded ? 'rounded-t-md' : 'rounded-md'" @click.stop="clickBar">
       <p class="pr-2">{{ $strings.HeaderChapters }}</p>
-      <div class="h-6 w-6 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
+      <div class="h-6 w-6 rounded-full bg-fg/10 flex items-center justify-center">
         <span class="text-xs font-mono">{{ chapters.length }}</span>
       </div>
       <div class="flex-grow" />
diff --git a/components/tables/TracksTable.vue b/components/tables/TracksTable.vue
index f59b544c..4ada98f0 100644
--- a/components/tables/TracksTable.vue
+++ b/components/tables/TracksTable.vue
@@ -2,7 +2,7 @@
   <div class="w-full my-4">
     <div class="w-full bg-primary px-4 py-2 flex items-center" :class="showTracks ? 'rounded-t-md' : 'rounded-md'" @click.stop="clickBar">
       <p class="pr-2">{{ $strings.HeaderAudioTracks }}</p>
-      <div class="h-6 w-6 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
+      <div class="h-6 w-6 rounded-full bg-fg/10 flex items-center justify-center">
         <span class="text-xs font-mono">{{ tracks.length }}</span>
       </div>
       <div class="flex-grow" />
diff --git a/components/tables/collection/BookTableRow.vue b/components/tables/collection/BookTableRow.vue
index d91667fa..98331687 100644
--- a/components/tables/collection/BookTableRow.vue
+++ b/components/tables/collection/BookTableRow.vue
@@ -7,8 +7,8 @@
       <div class="book-table-content h-full px-2 flex items-center">
         <div class="max-w-full">
           <p class="truncate block text-sm">{{ bookTitle }}</p>
-          <p class="truncate block text-gray-400 text-xs">{{ bookAuthor }}</p>
-          <p v-if="media.duration" class="text-xxs text-gray-500">{{ bookDuration }}</p>
+          <p class="truncate block text-fg-muted text-xs">{{ bookAuthor }}</p>
+          <p v-if="media.duration" class="text-xxs text-fg-muted">{{ bookDuration }}</p>
         </div>
       </div>
       <div class="w-8 min-w-8 flex justify-center">
diff --git a/components/tables/collection/CollectionBooksTable.vue b/components/tables/collection/CollectionBooksTable.vue
index e1293b70..b7abb7d9 100644
--- a/components/tables/collection/CollectionBooksTable.vue
+++ b/components/tables/collection/CollectionBooksTable.vue
@@ -3,12 +3,12 @@
     <div class="w-full h-14 flex items-center px-4 bg-primary">
       <p class="pr-4">{{ $strings.HeaderCollectionItems }}</p>
 
-      <div class="w-6 h-6 md:w-7 md:h-7 bg-white bg-opacity-10 rounded-full flex items-center justify-center">
+      <div class="w-6 h-6 md:w-7 md:h-7 bg-fg/10 rounded-full flex items-center justify-center">
         <span class="text-xs md:text-sm font-mono leading-none">{{ books.length }}</span>
       </div>
 
       <div class="flex-grow" />
-      <p v-if="totalDuration" class="text-sm text-gray-200">{{ totalDurationPretty }}</p>
+      <p v-if="totalDuration" class="text-sm text-fg">{{ totalDurationPretty }}</p>
     </div>
     <template v-for="book in booksCopy">
       <tables-collection-book-table-row :key="book.id" :book="book" :collection-id="collectionId" class="item collection-book-item" @edit="editBook" />
diff --git a/components/tables/ebook/EbookFilesTable.vue b/components/tables/ebook/EbookFilesTable.vue
index b534cab2..1542b654 100644
--- a/components/tables/ebook/EbookFilesTable.vue
+++ b/components/tables/ebook/EbookFilesTable.vue
@@ -2,7 +2,7 @@
   <div class="w-full my-2">
     <div class="w-full bg-primary px-4 py-2 flex items-center" :class="showFiles ? 'rounded-t-md' : 'rounded-md'" @click.stop="clickBar">
       <p class="pr-2">{{ $strings.HeaderEbookFiles }}</p>
-      <div class="h-6 w-6 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
+      <div class="h-6 w-6 rounded-full bg-fg/10 flex items-center justify-center">
         <span class="text-xs font-mono">{{ ebookFiles.length }}</span>
       </div>
       <div class="flex-grow" />
diff --git a/components/tables/playlist/ItemTableRow.vue b/components/tables/playlist/ItemTableRow.vue
index 5889849b..40fda325 100644
--- a/components/tables/playlist/ItemTableRow.vue
+++ b/components/tables/playlist/ItemTableRow.vue
@@ -8,8 +8,8 @@
         <div class="item-table-content h-full px-2 flex items-center">
           <div class="max-w-full">
             <p class="truncate block text-sm">{{ itemTitle }} <span v-if="localLibraryItem" class="material-icons text-success text-base align-text-bottom">download_done</span></p>
-            <p v-if="authorName" class="truncate block text-gray-300 text-xs">{{ authorName }}</p>
-            <p class="text-xxs text-gray-400">{{ itemDuration }}</p>
+            <p v-if="authorName" class="truncate block text-fg-muted text-xs">{{ authorName }}</p>
+            <p class="text-xxs text-fg-muted">{{ itemDuration }}</p>
           </div>
         </div>
         <div class="w-8 min-w-8 flex justify-center">
diff --git a/components/tables/playlist/PlaylistItemsTable.vue b/components/tables/playlist/PlaylistItemsTable.vue
index 1249ec5b..72e77af6 100644
--- a/components/tables/playlist/PlaylistItemsTable.vue
+++ b/components/tables/playlist/PlaylistItemsTable.vue
@@ -3,12 +3,12 @@
     <div class="w-full h-14 flex items-center px-3">
       <p class="pr-2">{{ $strings.HeaderPlaylistItems }}</p>
 
-      <div class="w-6 h-6 md:w-7 md:h-7 bg-white bg-opacity-10 rounded-full flex items-center justify-center">
+      <div class="w-6 h-6 md:w-7 md:h-7 bg-fg bg-opacity-10 rounded-full flex items-center justify-center">
         <span class="text-xs md:text-sm font-mono leading-none">{{ items.length }}</span>
       </div>
 
       <div class="flex-grow" />
-      <p v-if="totalDuration" class="text-sm text-gray-200">{{ totalDurationPretty }}</p>
+      <p v-if="totalDuration" class="text-sm text-fg">{{ totalDurationPretty }}</p>
     </div>
     <template v-for="item in items">
       <tables-playlist-item-table-row :key="item.id" :item="item" :playlist-id="playlistId" @showMore="showMore" />
diff --git a/components/tables/podcast/EpisodeRow.vue b/components/tables/podcast/EpisodeRow.vue
index 36312d13..2916eb60 100644
--- a/components/tables/podcast/EpisodeRow.vue
+++ b/components/tables/podcast/EpisodeRow.vue
@@ -11,24 +11,24 @@
         <p v-else>No Local Media Progress</p>
       </template> -->
 
-      <p v-if="publishedAt" class="text-xs text-gray-400 mb-1">Published {{ $formatDate(publishedAt, 'MMM do, yyyy') }}</p>
+      <p v-if="publishedAt" class="text-xs text-fg-muted mb-1">Published {{ $formatDate(publishedAt, 'MMM do, yyyy') }}</p>
 
       <p class="text-sm font-semibold">
         {{ title }}
       </p>
 
-      <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5" v-html="subtitle" />
+      <p class="text-sm text-fg episode-subtitle mt-1.5 mb-0.5" v-html="subtitle" />
 
       <div v-if="episodeNumber || season || episodeType" class="flex py-2 items-center -mx-0.5">
-        <div v-if="episodeNumber" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-gray-200">Episode #{{ episodeNumber }}</div>
-        <div v-if="season" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-gray-200">Season #{{ season }}</div>
-        <div v-if="episodeType" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-gray-200 capitalize">
+        <div v-if="episodeNumber" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-fg">Episode #{{ episodeNumber }}</div>
+        <div v-if="season" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-fg">Season #{{ season }}</div>
+        <div v-if="episodeType" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-fg capitalize">
           {{ episodeType }}
         </div>
       </div>
 
       <div class="flex items-center pt-2">
-        <div class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
+        <div class="h-8 px-4 border border-border rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
           <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
           <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
         </div>
diff --git a/components/tables/podcast/EpisodesTable.vue b/components/tables/podcast/EpisodesTable.vue
index 4af48f9f..c730cf46 100644
--- a/components/tables/podcast/EpisodesTable.vue
+++ b/components/tables/podcast/EpisodesTable.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
     <!-- Podcast episode downloads queue -->
-    <div v-if="episodeDownloadsQueued.length" class="px-4 py-2 my-2 bg-info bg-opacity-40 text-sm font-semibold rounded-md text-gray-100 relative w-full">
+    <div v-if="episodeDownloadsQueued.length" class="px-4 py-2 my-2 bg-info bg-opacity-40 text-sm font-semibold rounded-md text-fg relative w-full">
       <div class="flex items-center">
         <p class="text-sm py-1">{{ $getString('MessageEpisodesQueuedForDownload', [episodeDownloadsQueued.length]) }}</p>
         <div class="flex-grow" />
@@ -10,7 +10,7 @@
     </div>
 
     <!-- Podcast episodes currently downloading -->
-    <div v-if="episodesDownloading.length" class="px-4 py-2 my-2 bg-success bg-opacity-20 text-sm font-semibold rounded-md text-gray-100 relative w-full">
+    <div v-if="episodesDownloading.length" class="px-4 py-2 my-2 bg-success bg-opacity-20 text-sm font-semibold rounded-md text-fg relative w-full">
       <div v-for="episode in episodesDownloading" :key="episode.id" class="flex items-center">
         <widgets-loading-spinner />
         <p class="text-sm py-1 pl-4">{{ $strings.MessageDownloadingEpisode }} "{{ episode.episodeDisplayTitle }}"</p>
@@ -23,18 +23,18 @@
       <div class="flex-grow" />
 
       <button v-if="isAdminOrUp && !fetchingRSSFeed" class="outline:none mx-1 pt-0.5 relative" @click="searchEpisodes">
-        <span class="material-icons text-xl text-gray-200">search</span>
+        <span class="material-icons text-xl text-fg">search</span>
       </button>
       <widgets-loading-spinner v-else-if="fetchingRSSFeed" class="mx-1" />
 
       <button class="outline:none mx-3 pt-0.5 relative" @click="showFilters">
-        <span class="material-icons text-xl text-gray-200">filter_alt</span>
+        <span class="material-icons text-xl text-fg">filter_alt</span>
         <div v-show="filterKey !== 'all' && episodesAreFiltered" class="absolute top-0 right-0 w-1.5 h-1.5 rounded-full bg-success border border-green-300 shadow-sm z-10 pointer-events-none" />
       </button>
 
       <div class="flex items-center border border-white border-opacity-25 rounded px-2" @click="clickSort">
-        <p class="text-sm text-gray-200">{{ sortText }}</p>
-        <span class="material-icons ml-1 text-gray-200">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
+        <p class="text-sm text-fg">{{ sortText }}</p>
+        <span class="material-icons ml-1 text-fg">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
       </div>
     </div>
 
diff --git a/components/tables/podcast/LatestEpisodeRow.vue b/components/tables/podcast/LatestEpisodeRow.vue
index f72a9017..0194618d 100644
--- a/components/tables/podcast/LatestEpisodeRow.vue
+++ b/components/tables/podcast/LatestEpisodeRow.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full py-4 overflow-hidden relative border-b border-white border-opacity-10" @click.stop="goToEpisodePage">
+  <div class="w-full py-4 overflow-hidden relative border-b border-border" @click.stop="goToEpisodePage">
     <div v-if="episode" class="w-full px-1">
       <div class="flex mb-2">
         <div class="w-10 min-w-10">
@@ -7,9 +7,9 @@
         </div>
         <div class="flex-grow px-2">
           <div class="-mt-0.5 mb-0.5" @click.stop>
-            <nuxt-link :to="`/item/${libraryItemId}`" class="text-sm text-gray-200 underline">{{ podcast.metadata.title }}</nuxt-link>
+            <nuxt-link :to="`/item/${libraryItemId}`" class="text-sm text-fg underline">{{ podcast.metadata.title }}</nuxt-link>
           </div>
-          <p v-if="publishedAt" class="text-xs text-gray-300">{{ $dateDistanceFromNow(publishedAt) }}</p>
+          <p v-if="publishedAt" class="text-xs text-fg-muted">{{ $dateDistanceFromNow(publishedAt) }}</p>
         </div>
       </div>
 
@@ -17,18 +17,18 @@
         {{ title }}
       </p>
 
-      <p class="text-sm text-gray-200 episode-subtitle mt-1.5 mb-0.5" v-html="subtitle" />
+      <p class="text-sm text-fg episode-subtitle mt-1.5 mb-0.5" v-html="subtitle" />
 
       <div v-if="episodeNumber || season || episodeType" class="flex pt-2 items-center -mx-0.5">
-        <div v-if="episodeNumber" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-gray-200">{{ $strings.LabelEpisode }} #{{ episodeNumber }}</div>
-        <div v-if="season" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-gray-200">{{ $strings.LabelSeason }} #{{ season }}</div>
-        <div v-if="episodeType" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-gray-200 capitalize">
+        <div v-if="episodeNumber" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-fg">{{ $strings.LabelEpisode }} #{{ episodeNumber }}</div>
+        <div v-if="season" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-fg">{{ $strings.LabelSeason }} #{{ season }}</div>
+        <div v-if="episodeType" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-50 rounded-full text-xs font-light text-fg capitalize">
           {{ episodeType }}
         </div>
       </div>
 
       <div class="flex items-center pt-2">
-        <div class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
+        <div class="h-8 px-4 border border-border hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-fg text-opacity-40' : ''" @click.stop="playClick">
           <span class="material-icons" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
           <p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
         </div>
diff --git a/components/ui/Btn.vue b/components/ui/Btn.vue
index 0b0f187f..12ccf24c 100644
--- a/components/ui/Btn.vue
+++ b/components/ui/Btn.vue
@@ -1,15 +1,15 @@
 <template>
-  <nuxt-link v-if="to" :to="to" class="btn outline-none rounded-md shadow-md relative border border-gray-600 text-center" :disabled="disabled || loading" :class="classList">
+  <nuxt-link v-if="to" :to="to" class="btn outline-none rounded-md shadow-md relative border border-border text-center" :disabled="disabled || loading" :class="classList">
     <slot />
-    <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
+    <div v-if="loading" class="text-fg absolute top-0 left-0 w-full h-full flex items-center justify-center">
       <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
       </svg>
     </div>
   </nuxt-link>
-  <button v-else class="btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @mousedown.prevent @click="click">
+  <button v-else class="btn outline-none rounded-md shadow-md relative border border-border" :disabled="disabled || loading" :type="type" :class="classList" @mousedown.prevent @click="click">
     <slot />
-    <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
+    <div v-if="loading" class="text-fg absolute top-0 left-0 w-full h-full flex items-center justify-center">
       <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
       </svg>
@@ -41,7 +41,9 @@ export default {
     classList() {
       var list = []
       if (this.loading) list.push('text-opacity-0')
-      list.push('text-white')
+      if (this.color === 'success') {
+        list.push('text-white')
+      }
       list.push(`bg-${this.color}`)
       if (this.small) {
         list.push('text-sm')
diff --git a/components/ui/Checkbox.vue b/components/ui/Checkbox.vue
index f2717041..4c144dca 100644
--- a/components/ui/Checkbox.vue
+++ b/components/ui/Checkbox.vue
@@ -4,7 +4,7 @@
       <input v-model="selected" :disabled="disabled" type="checkbox" class="opacity-0 absolute" :class="!disabled ? 'cursor-pointer' : ''" />
       <svg v-if="selected" class="fill-current pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
     </div>
-    <div v-if="label" class="select-none text-gray-100" :class="labelClassname">{{ label }}</div>
+    <div v-if="label" class="select-none text-fg" :class="labelClassname">{{ label }}</div>
   </label>
 </template>
 
diff --git a/components/ui/Dropdown.vue b/components/ui/Dropdown.vue
index 9a2416e7..f5975941 100644
--- a/components/ui/Dropdown.vue
+++ b/components/ui/Dropdown.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="relative w-full" v-click-outside="clickedOutside">
-    <p class="text-sm font-semibold" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
-    <button type="button" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
-      <span class="flex items-center" :class="!selectedText ? 'text-gray-300' : 'text-white'">
+    <p class="text-sm font-semibold" :class="disabled ? 'text-fg-muted' : ''">{{ label }}</p>
+    <button type="button" :disabled="disabled" class="relative w-full border border-border rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
+      <span class="flex items-center" :class="!selectedText ? 'text-fg-muted' : 'text-fg'">
         <span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText || placeholder || '' }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
@@ -11,9 +11,9 @@
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-gray-600 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none text-sm" role="listbox">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-border shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-bg ring-opacity-5 overflow-auto focus:outline-none text-sm" role="listbox">
         <template v-for="item in items">
-          <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(item.value)">
+          <li :key="item.value" class="text-fg select-none relative py-2 cursor-pointer hover:bg-black-400" role="option" @click="clickedOption(item.value)">
             <div class="flex items-center">
               <span class="font-normal ml-3 block truncate font-sans text-sm">{{ item.text }}</span>
             </div>
@@ -65,8 +65,8 @@ export default {
       if (this.small) classes.push('h-9')
       else classes.push('h-10')
 
-      if (this.disabled) classes.push('cursor-not-allowed border-gray-600 bg-primary bg-opacity-70 border-opacity-70 text-gray-400')
-      else classes.push('cursor-pointer border-gray-600 bg-primary text-gray-100')
+      if (this.disabled) classes.push('cursor-not-allowed border-border bg-primary bg-opacity-70 border-opacity-70 text-fg-muted')
+      else classes.push('cursor-pointer border-border bg-primary text-fg')
 
       return classes.join(' ')
     }
diff --git a/components/ui/DropdownMenu.vue b/components/ui/DropdownMenu.vue
index 46814959..00954186 100644
--- a/components/ui/DropdownMenu.vue
+++ b/components/ui/DropdownMenu.vue
@@ -4,17 +4,17 @@
       <slot />
     </div>
     <transition name="menu">
-      <ul ref="menu" v-show="showMenu" class="absolute z-50 -mt-px bg-primary border border-gray-600 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" style="width: 160px">
+      <ul ref="menu" v-show="showMenu" class="absolute z-50 -mt-px bg-primary border border-border shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-bg ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" style="width: 160px">
         <template v-for="item in items">
           <nuxt-link :key="item.value" v-if="item.to" :to="item.to">
-            <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
+            <li :key="item.value" class="text-fg select-none relative py-2" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
               <div class="flex items-center px-2">
                 <span v-if="item.icon" class="material-icons-outlined text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
                 <span class="font-normal block truncate font-sans text-center">{{ item.text }}</span>
               </div>
             </li>
           </nuxt-link>
-          <li v-else :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
+          <li v-else :key="item.value" class="text-fg select-none relative py-2" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
             <div class="flex items-center px-2">
               <span v-if="item.icon" class="material-icons-outlined text-lg mr-2" :class="item.iconClass ? item.iconClass : ''">{{ item.icon }}</span>
               <span class="font-normal block truncate font-sans text-center">{{ item.text }}</span>
diff --git a/components/ui/IconBtn.vue b/components/ui/IconBtn.vue
index f5820801..4e330364 100644
--- a/components/ui/IconBtn.vue
+++ b/components/ui/IconBtn.vue
@@ -1,6 +1,6 @@
 <template>
   <button class="icon-btn rounded-md flex items-center justify-center h-9 w-9 relative" @mousedown.prevent :disabled="disabled || loading" :class="className" @click="clickBtn">
-    <div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
+    <div v-if="loading" class="text-fg absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
       <svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
         <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
       </svg>
diff --git a/components/ui/Menu.vue b/components/ui/Menu.vue
index b2c564fb..26f5a708 100644
--- a/components/ui/Menu.vue
+++ b/components/ui/Menu.vue
@@ -1,25 +1,25 @@
 <template>
   <div class="relative" v-click-outside="clickOutside">
-    <button type="button" class="relative w-full bg-fg border border-gray-500 rounded shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="showMenu = !showMenu">
+    <button type="button" class="relative w-full bg-fg border border-border rounded shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="showMenu = !showMenu">
       <span class="flex items-center">
         <span class="block truncate">{{ label }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-        <span class="material-icons text-gray-100">person</span>
+        <span class="material-icons text-fg">person</span>
       </span>
     </button>
 
     <transition name="menu">
-      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-gray-600 shadow-lg max-h-56 rounded-b-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-activedescendant="listbox-option-3">
+      <ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border bordesr-border shadow-lg max-h-56 rounded-b-md py-1 text-base ring-1 ring-bg ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-activedescendant="listbox-option-3">
         <template v-for="item in items">
           <nuxt-link :key="item.value" v-if="item.to" :to="item.to">
-            <li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
+            <li :key="item.value" class="text-fg select-none relative py-2" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
               <div class="flex items-center">
                 <span class="font-normal ml-3 block truncate font-sans">{{ item.text }}</span>
               </div>
             </li>
           </nuxt-link>
-          <li v-else :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
+          <li v-else :key="item.value" class="text-fg select-none relative py-2" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
             <div class="flex items-center">
               <span class="font-normal ml-3 block truncate font-sans">{{ item.text }}</span>
             </div>
diff --git a/components/ui/TextInput.vue b/components/ui/TextInput.vue
index 2d335ad1..d9914e47 100644
--- a/components/ui/TextInput.vue
+++ b/components/ui/TextInput.vue
@@ -54,13 +54,13 @@ export default {
     },
     inputClass() {
       var classes = [`bg-${this.bg}`, `rounded-${this.rounded}`]
-      if (this.disabled) classes.push('text-gray-300')
-      else classes.push('text-white')
+      if (this.disabled) classes.push('text-fg-muted')
+      else classes.push('text-fg')
 
       if (this.prependIcon) classes.push('pl-10 pr-2')
       else classes.push('px-2')
 
-      if (!this.borderless) classes.push('border border-gray-600')
+      if (!this.borderless) classes.push('border border-border')
       return classes.join(' ')
     }
   },
diff --git a/layouts/blank.vue b/layouts/blank.vue
index 789d695d..d180a565 100644
--- a/layouts/blank.vue
+++ b/layouts/blank.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full layout-wrapper bg-bg text-white">
+  <div class="w-full layout-wrapper bg-bg">
     <Nuxt />
   </div>
 </template>
diff --git a/layouts/default.vue b/layouts/default.vue
index c0643123..cd4ef429 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full layout-wrapper bg-bg text-white">
+  <div class="w-full layout-wrapper bg-bg">
     <app-appbar />
     <div id="content" class="overflow-hidden relative" :class="isPlayerOpen ? 'playerOpen' : ''">
       <Nuxt :key="currentLang" />
diff --git a/pages/account.vue b/pages/account.vue
index 5a926515..83a3573b 100644
--- a/pages/account.vue
+++ b/pages/account.vue
@@ -7,8 +7,8 @@
     <ui-btn color="primary flex items-center justify-between gap-2 ml-auto text-base mt-8" @click="logout">{{ $strings.ButtonSwitchServerUser }}<span class="material-icons" style="font-size: 1.1rem">logout</span></ui-btn>
 
     <div class="flex justify-center items-center my-4 left-0 right-0 bottom-0 absolute">
-      <p class="text-sm text-white">{{ $strings.MessageReportBugsAndContribute }} <a class="underline" href="https://github.com/advplyr/audiobookshelf-app" target="_blank">GitHub</a></p>
-      <a href="https://github.com/advplyr/audiobookshelf-app" target="_blank" class="text-white hover:text-gray-200 hover:scale-150 hover:rotate-6 transform duration-500 ml-2">
+      <p class="text-sm text-fg">{{ $strings.MessageReportBugsAndContribute }} <a class="underline" href="https://github.com/advplyr/audiobookshelf-app" target="_blank">GitHub</a></p>
+      <a href="https://github.com/advplyr/audiobookshelf-app" target="_blank" class="text-fg hover:scale-150 hover:rotate-6 transform duration-500 ml-2">
         <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24">
           <path
             d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
diff --git a/pages/collection/_id.vue b/pages/collection/_id.vue
index 0f03bf9b..0babb957 100644
--- a/pages/collection/_id.vue
+++ b/pages/collection/_id.vue
@@ -19,7 +19,7 @@
         </div>
 
         <div class="my-8 max-w-2xl px-2">
-          <p class="text-base text-gray-100">{{ description }}</p>
+          <p class="text-base text-fg">{{ description }}</p>
         </div>
 
         <tables-collection-books-table :books="bookItems" :collection-id="collection.id" />
diff --git a/pages/connect.vue b/pages/connect.vue
index 589340d1..fac1d084 100644
--- a/pages/connect.vue
+++ b/pages/connect.vue
@@ -8,7 +8,7 @@
         <img src="/Logo.png" class="h-20 w-20 mb-2" />
         <h1 class="text-2xl">audiobookshelf</h1>
       </div>
-      <p class="hidden absolute short:block top-1.5 left-12 p-2text-xl">audiobookshelf</p>
+      <p class="hidden absolute short:block top-1.5 left-12 p-2 text-xl">audiobookshelf</p>
 
       <connection-server-connect-form v-if="deviceData" />
     </div>
@@ -16,7 +16,7 @@
     <div class="flex items-center justify-center pt-4 fixed bottom-4 left-0 right-0">
       <a href="https://github.com/advplyr/audiobookshelf-app" target="_blank" class="text-sm pr-2">{{ $strings.MessageFollowTheProjectOnGithub }}</a>
       <a href="https://github.com/advplyr/audiobookshelf-app" target="_blank"
-        ><svg class="w-8 h-8 text-gray-100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
+        ><svg class="w-8 h-8 text-fg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
           <path
             d="M12 2.247a10 10 0 0 0-3.162 19.487c.5.088.687-.212.687-.475c0-.237-.012-1.025-.012-1.862c-2.513.462-3.163-.613-3.363-1.175a3.636 3.636 0 0 0-1.025-1.413c-.35-.187-.85-.65-.013-.662a2.001 2.001 0 0 1 1.538 1.025a2.137 2.137 0 0 0 2.912.825a2.104 2.104 0 0 1 .638-1.338c-2.225-.25-4.55-1.112-4.55-4.937a3.892 3.892 0 0 1 1.025-2.688a3.594 3.594 0 0 1 .1-2.65s.837-.262 2.75 1.025a9.427 9.427 0 0 1 5 0c1.912-1.3 2.75-1.025 2.75-1.025a3.593 3.593 0 0 1 .1 2.65a3.869 3.869 0 0 1 1.025 2.688c0 3.837-2.338 4.687-4.563 4.937a2.368 2.368 0 0 1 .675 1.85c0 1.338-.012 2.413-.012 2.75c0 .263.187.575.687.475A10.005 10.005 0 0 0 12 2.247z"
             fill="currentColor"
diff --git a/pages/downloading.vue b/pages/downloading.vue
index 14749e59..c793533b 100644
--- a/pages/downloading.vue
+++ b/pages/downloading.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-full py-6 px-4 overflow-y-auto">
-    <p class="mb-4 text-base text-white">{{ $strings.HeaderDownloads }} ({{ downloadItemParts.length }})</p>
+    <p class="mb-4 text-base text-fg">{{ $strings.HeaderDownloads }} ({{ downloadItemParts.length }})</p>
 
     <div v-if="!downloadItemParts.length" class="py-6 text-center text-lg">No download item parts</div>
     <template v-for="(itemPart, num) in downloadItemParts">
@@ -8,14 +8,14 @@
         <div class="flex">
           <div class="w-14">
             <span v-if="itemPart.completed" class="material-icons text-success">check_circle_outline</span>
-            <span v-else class="font-semibold text-gray-200">{{ Math.round(itemPart.progress) }}%</span>
+            <span v-else class="font-semibold text-fg">{{ Math.round(itemPart.progress) }}%</span>
           </div>
           <div class="flex-grow px-2">
             <p class="truncate">{{ itemPart.filename }}</p>
           </div>
         </div>
 
-        <div v-if="num + 1 < downloadItemParts.length" class="flex border-t border-white border-opacity-10 my-3" />
+        <div v-if="num + 1 < downloadItemParts.length" class="flex border-t border-border my-3" />
       </div>
     </template>
   </div>
diff --git a/pages/item/_id/_episode/index.vue b/pages/item/_id/_episode/index.vue
index 611b3f16..90d5227f 100644
--- a/pages/item/_id/_episode/index.vue
+++ b/pages/item/_id/_episode/index.vue
@@ -6,25 +6,25 @@
       </div>
       <div class="flex-grow px-2">
         <div class="-mt-0.5 mb-0.5">
-          <nuxt-link :to="`/item/${libraryItemId}`" class="text-sm text-gray-200 underline">{{ podcast.metadata.title }}</nuxt-link>
+          <nuxt-link :to="`/item/${libraryItemId}`" class="text-sm text-fg underline">{{ podcast.metadata.title }}</nuxt-link>
         </div>
-        <p v-if="publishedAt" class="text-xs text-gray-300">{{ $dateDistanceFromNow(publishedAt) }}</p>
+        <p v-if="publishedAt" class="text-xs text-fg-muted">{{ $dateDistanceFromNow(publishedAt) }}</p>
       </div>
     </div>
 
     <p class="text-lg font-semibold">{{ title }}</p>
 
     <div v-if="episodeNumber || season || episodeType" class="flex py-2 items-center -mx-0.5">
-      <div v-if="episodeNumber" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-60 rounded-full text-xs font-light text-gray-200">{{ $strings.LabelEpisode }} #{{ episodeNumber }}</div>
-      <div v-if="season" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-60 rounded-full text-xs font-light text-gray-200">{{ $strings.LabelSeason }} #{{ season }}</div>
-      <div v-if="episodeType" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-60 rounded-full text-xs font-light text-gray-200 capitalize">{{ episodeType }}</div>
+      <div v-if="episodeNumber" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-60 rounded-full text-xs font-light text-fg">{{ $strings.LabelEpisode }} #{{ episodeNumber }}</div>
+      <div v-if="season" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-60 rounded-full text-xs font-light text-fg">{{ $strings.LabelSeason }} #{{ season }}</div>
+      <div v-if="episodeType" class="px-2 pt-px pb-0.5 mx-0.5 bg-primary bg-opacity-60 rounded-full text-xs font-light text-fg capitalize">{{ episodeType }}</div>
     </div>
 
     <!-- user progress card -->
-    <div v-if="progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-gray-200 mt-4 relative" :class="resettingProgress ? 'opacity-25' : ''">
+    <div v-if="progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-fg mt-4 relative" :class="resettingProgress ? 'opacity-25' : ''">
       <p class="leading-6">{{ $strings.LabelYourProgress }}: {{ Math.round(progressPercent * 100) }}%</p>
-      <p v-if="progressPercent < 1" class="text-gray-400 text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
-      <p v-else class="text-gray-400 text-xs">{{ $strings.LabelFinished }} {{ $formatDate(userProgressFinishedAt) }}</p>
+      <p v-if="progressPercent < 1" class="text-fg-muted text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
+      <p v-else class="text-fg-muted text-xs">{{ $strings.LabelFinished }} {{ $formatDate(userProgressFinishedAt) }}</p>
     </div>
 
     <!-- action buttons -->
@@ -41,7 +41,7 @@
       </ui-btn>
     </div>
 
-    <p class="text-sm text-gray-200 mt-1.5 mb-0.5 default-style" v-html="description" />
+    <p class="text-sm text-fg mt-1.5 mb-0.5 default-style" v-html="description" />
 
     <!-- loading overlay -->
     <div v-if="processing" class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-30 flex items-center justify-center">
diff --git a/pages/item/_id/index.vue b/pages/item/_id/index.vue
index 8a65cda5..f340421f 100644
--- a/pages/item/_id/index.vue
+++ b/pages/item/_id/index.vue
@@ -2,7 +2,7 @@
   <div id="item-page" class="w-full h-full px-3 pb-4 overflow-y-auto overflow-x-hidden relative bg-bg">
     <div class="fixed top-0 left-0 w-full h-full pointer-events-none p-px z-10">
       <div class="w-full h-full" :style="{ backgroundColor: coverRgb }" />
-      <div class="w-full h-full absolute top-0 left-0" style="background: linear-gradient(169deg, rgba(0, 0, 0, 0.4) 0%, rgba(55, 56, 56, 1) 80%)" />
+      <div class="w-full h-full absolute top-0 left-0" style="background: var(--gradient-item-page)" />
     </div>
 
     <div class="z-10 relative">
@@ -24,7 +24,7 @@
       <!-- title -->
       <div class="text-center mb-2">
         <h1 class="text-xl font-semibold">{{ title }}</h1>
-        <p v-if="subtitle" class="text-gray-100 text-base">{{ subtitle }}</p>
+        <p v-if="subtitle" class="text-fg text-base">{{ subtitle }}</p>
       </div>
 
       <div v-if="hasLocal" class="mx-1">
@@ -61,10 +61,10 @@
           </ui-btn>
         </div>
 
-        <div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-gray-200 mt-4 text-center">
+        <div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-fg mt-4 text-center">
           <p>{{ $strings.LabelYourProgress }}: {{ Math.round(progressPercent * 100) }}%</p>
-          <p v-if="!useEBookProgress && !userIsFinished" class="text-gray-400 text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
-          <p v-else-if="userIsFinished" class="text-gray-400 text-xs">{{ $strings.LabelFinished }} {{ $formatDate(userProgressFinishedAt) }}</p>
+          <p v-if="!useEBookProgress && !userIsFinished" class="text-fg-muted text-xs">{{ $getString('LabelTimeRemaining', [$elapsedPretty(userTimeRemaining)]) }}</p>
+          <p v-else-if="userIsFinished" class="text-fg-muted text-xs">{{ $strings.LabelFinished }} {{ $formatDate(userProgressFinishedAt) }}</p>
         </div>
       </div>
 
@@ -75,7 +75,7 @@
 
       <!-- metadata -->
       <div id="metadata" class="grid gap-2 my-2" style>
-        <div v-if="podcastAuthor || (bookAuthors && bookAuthors.length)" class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelAuthor }}</div>
+        <div v-if="podcastAuthor || (bookAuthors && bookAuthors.length)" class="text-fg-muted uppercase text-sm">{{ $strings.LabelAuthor }}</div>
         <div v-if="podcastAuthor" class="text-sm">{{ podcastAuthor }}</div>
         <div v-else-if="bookAuthors && bookAuthors.length" class="text-sm">
           <template v-for="(author, index) in bookAuthors">
@@ -84,10 +84,10 @@
           </template>
         </div>
 
-        <div v-if="podcastType" class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelType }}</div>
+        <div v-if="podcastType" class="text-fg-muted uppercase text-sm">{{ $strings.LabelType }}</div>
         <div v-if="podcastType" class="text-sm capitalize">{{ podcastType }}</div>
 
-        <div v-if="series && series.length" class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelSeries }}</div>
+        <div v-if="series && series.length" class="text-fg-muted uppercase text-sm">{{ $strings.LabelSeries }}</div>
         <div v-if="series && series.length" class="truncate text-sm">
           <template v-for="(series, index) in seriesList">
             <nuxt-link :key="series.id" :to="`/bookshelf/series/${series.id}`" class="underline">{{ series.text }}</nuxt-link
@@ -95,10 +95,10 @@
           </template>
         </div>
 
-        <div v-if="numTracks" class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelDuration }}</div>
+        <div v-if="numTracks" class="text-fg-muted uppercase text-sm">{{ $strings.LabelDuration }}</div>
         <div v-if="numTracks" class="text-sm">{{ $elapsedPretty(duration) }}</div>
 
-        <div v-if="narrators && narrators.length" class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelNarrators }}</div>
+        <div v-if="narrators && narrators.length" class="text-fg-muted uppercase text-sm">{{ $strings.LabelNarrators }}</div>
         <div v-if="narrators && narrators.length" class="truncate text-sm">
           <template v-for="(narrator, index) in narrators">
             <nuxt-link :key="narrator" :to="`/bookshelf/library?filter=narrators.${$encode(narrator)}`" class="underline">{{ narrator }}</nuxt-link
@@ -106,7 +106,7 @@
           </template>
         </div>
 
-        <div v-if="genres.length" class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelGenres }}</div>
+        <div v-if="genres.length" class="text-fg-muted uppercase text-sm">{{ $strings.LabelGenres }}</div>
         <div v-if="genres.length" class="truncate text-sm">
           <template v-for="(genre, index) in genres">
             <nuxt-link :key="genre" :to="`/bookshelf/library?filter=genres.${$encode(genre)}`" class="underline">{{ genre }}</nuxt-link
@@ -114,14 +114,14 @@
           </template>
         </div>
 
-        <div v-if="publishedYear" class="text-white text-opacity-60 uppercase text-sm">{{ $strings.LabelPublishYear }}</div>
+        <div v-if="publishedYear" class="text-fg-muted uppercase text-sm">{{ $strings.LabelPublishYear }}</div>
         <div v-if="publishedYear" class="text-sm">{{ publishedYear }}</div>
       </div>
 
       <div v-if="description" class="w-full py-2">
         <p ref="description" class="text-sm text-justify whitespace-pre-line font-light" :class="{ 'line-clamp-4': !showFullDescription }" style="hyphens: auto">{{ description }}</p>
 
-        <div v-if="descriptionClamped" class="text-white text-sm py-2" @click="showFullDescription = !showFullDescription">
+        <div v-if="descriptionClamped" class="text-fg text-sm py-2" @click="showFullDescription = !showFullDescription">
           {{ showFullDescription ? 'Read less' : 'Read more' }}
           <span class="material-icons align-middle text-base -mt-px">{{ showFullDescription ? 'expand_less' : 'expand_more' }}</span>
         </div>
diff --git a/pages/localMedia/folders/_id.vue b/pages/localMedia/folders/_id.vue
index 47718249..a7bc5d82 100644
--- a/pages/localMedia/folders/_id.vue
+++ b/pages/localMedia/folders/_id.vue
@@ -7,9 +7,9 @@
       <span v-if="dialogItems.length" class="material-icons" @click="showDialog = true">more_vert</span>
     </div>
 
-    <p class="text-sm mb-4 text-white text-opacity-60">{{ $strings.LabelMediaType }}: {{ mediaType }}</p>
+    <p class="text-sm mb-4 text-fg-muted">{{ $strings.LabelMediaType }}: {{ mediaType }}</p>
 
-    <p class="mb-2 text-base text-white">{{ $strings.HeaderLocalLibraryItems }} ({{ localLibraryItems.length }})</p>
+    <p class="mb-2 text-base text-fg">{{ $strings.HeaderLocalLibraryItems }} ({{ localLibraryItems.length }})</p>
 
     <div class="w-full media-item-container overflow-y-auto">
       <template v-for="localLibraryItem in localLibraryItems">
@@ -19,10 +19,10 @@
           </div>
           <div class="flex-grow px-2">
             <p class="text-sm">{{ localLibraryItem.media.metadata.title }}</p>
-            <p class="text-xs text-gray-300">{{ getLocalLibraryItemSubText(localLibraryItem) }}</p>
+            <p class="text-xs text-fg-muted">{{ getLocalLibraryItemSubText(localLibraryItem) }}</p>
           </div>
           <div class="w-12 h-12 flex items-center justify-center">
-            <span class="material-icons text-xl text-gray-300">arrow_right</span>
+            <span class="material-icons text-xl text-fg-muted">arrow_right</span>
           </div>
         </nuxt-link>
       </template>
diff --git a/pages/localMedia/folders/index.vue b/pages/localMedia/folders/index.vue
index 02b13203..65b281a8 100644
--- a/pages/localMedia/folders/index.vue
+++ b/pages/localMedia/folders/index.vue
@@ -8,20 +8,20 @@
           <span class="material-icons text-xl text-yellow-400">folder</span>
           <p class="ml-2">{{ folder.name }}</p>
           <div class="flex-grow" />
-          <p class="text-sm italic text-gray-300 px-3 capitalize">{{ folder.mediaType }}s</p>
-          <span class="material-icons text-xl text-gray-300">arrow_right</span>
+          <p class="text-sm italic text-fg-muted px-3 capitalize">{{ folder.mediaType }}s</p>
+          <span class="material-icons text-xl text-fg-muted">arrow_right</span>
         </nuxt-link>
       </template>
       <div v-if="!localFolders.length" class="flex justify-center">
         <p class="text-center">{{ $strings.MessageNoMediaFolders }}</p>
       </div>
-      <div v-if="!isAndroid10OrBelow || overrideFolderRestriction" class="flex border-t border-white border-opacity-10 my-4 py-4">
+      <div v-if="!isAndroid10OrBelow || overrideFolderRestriction" class="flex border-t border-fg/10 my-4 py-4">
         <div class="flex-grow pr-1">
           <ui-dropdown v-model="newFolderMediaType" placeholder="Select media type" :items="mediaTypeItems" />
         </div>
         <ui-btn small class="w-28" color="success" @click="selectFolder">{{ $strings.ButtonNewFolder }}</ui-btn>
       </div>
-      <div v-else class="flex border-t border-white border-opacity-10 my-4 py-4">
+      <div v-else class="flex border-t border-fg/10 my-4 py-4">
         <div class="flex-grow pr-1">
           <p class="text-sm">{{ $strings.MessageAndroid10Downloads }}</p>
         </div>
diff --git a/pages/localMedia/item/_id.vue b/pages/localMedia/item/_id.vue
index 94fdf813..10dc2fca 100644
--- a/pages/localMedia/item/_id.vue
+++ b/pages/localMedia/item/_id.vue
@@ -2,18 +2,18 @@
   <div class="w-full h-full py-6 px-2">
     <div v-if="localLibraryItem" class="w-full h-full">
       <div class="px-2 flex items-center mb-2">
-        <p class="text-basefont-semibold">{{ mediaMetadata.title }}</p>
+        <p class="text-base font-semibold">{{ mediaMetadata.title }}</p>
         <div class="flex-grow" />
 
-        <button v-if="audioTracks.length && !isPodcast" class="shadow-sm text-accent flex items-center justify-center rounded-full mx-2" @click.stop="play">
+        <button v-if="audioTracks.length && !isPodcast" class="shadow-sm text-success flex items-center justify-center rounded-full mx-2" @click.stop="play">
           <span class="material-icons" style="font-size: 2rem">play_arrow</span>
         </button>
         <span class="material-icons" @click="showItemDialog">more_vert</span>
       </div>
 
-      <p v-if="!isIos" class="px-2 text-sm mb-0.5 text-white text-opacity-75">{{ $strings.LabelFolder }}: {{ folderName }}</p>
+      <p v-if="!isIos" class="px-2 text-sm mb-0.5 text-fg-muted">{{ $strings.LabelFolder }}: {{ folderName }}</p>
 
-      <p class="px-2 mb-4 text-xs text-gray-400">{{ libraryItemId ? 'Linked to item on server ' + liServerAddress : 'Not linked to server item' }}</p>
+      <p class="px-2 mb-4 text-xs text-fg-muted">{{ libraryItemId ? 'Linked to item on server ' + liServerAddress : 'Not linked to server item' }}</p>
 
       <div class="w-full max-w-full media-item-container overflow-y-auto overflow-x-hidden relative pb-4" :class="{ 'media-order-changed': orderChanged }">
         <div v-if="!isPodcast && audioTracksCopy.length" class="w-full py-2">
@@ -24,7 +24,7 @@
               <template v-for="track in audioTracksCopy">
                 <div :key="track.localFileId" class="flex items-center my-1 item">
                   <div v-if="!isIos" class="w-8 h-12 flex items-center justify-center" style="min-width: 32px">
-                    <span class="material-icons drag-handle text-lg text-white text-opacity-50 hover:text-opacity-100">menu</span>
+                    <span class="material-icons drag-handle text-lg text-fg-muted">menu</span>
                   </div>
                   <div class="w-8 h-12 flex items-center justify-center" style="min-width: 32px">
                     <p class="font-mono font-bold text-xl">{{ track.index }}</p>
@@ -32,7 +32,7 @@
                   <div class="flex-grow px-2">
                     <p class="text-xs">{{ track.title }}</p>
                   </div>
-                  <div class="w-20 text-center text-gray-300" style="min-width: 80px">
+                  <div class="w-20 text-center text-fg-muted" style="min-width: 80px">
                     <p class="text-xs">{{ track.mimeType }}</p>
                     <p class="text-sm">{{ $elapsedPretty(track.duration) }}</p>
                   </div>
diff --git a/pages/media/_id/history.vue b/pages/media/_id/history.vue
index 55b3040d..9914248f 100644
--- a/pages/media/_id/history.vue
+++ b/pages/media/_id/history.vue
@@ -3,23 +3,23 @@
     <p class="mb-4 text-lg font-semibold">History for {{ displayTitle }}</p>
 
     <div v-if="!mediaEvents.length" class="text-center py-8">
-      <p class="text-gray-200">No History</p>
+      <p class="text-fg">No History</p>
     </div>
 
     <div v-for="(events, name) in groupedMediaEvents" :key="name" class="py-2">
-      <p class="my-2 text-gray-400 font-semibold">{{ name }}</p>
+      <p class="my-2 text-fg-muted font-semibold">{{ name }}</p>
       <div v-for="(evt, index) in events" :key="index" class="py-3 flex items-center">
-        <p class="text-sm text-gray-400 w-12">{{ $formatDate(evt.timestamp, 'HH:mm') }}</p>
+        <p class="text-sm text-fg-muted w-12">{{ $formatDate(evt.timestamp, 'HH:mm') }}</p>
         <span class="material-icons px-1" :class="`text-${getEventColor(evt.name)}`">{{ getEventIcon(evt.name) }}</span>
-        <p class="text-sm text-white px-1">{{ evt.name }}</p>
+        <p class="text-sm text-fg px-1">{{ evt.name }}</p>
 
         <span v-if="evt.serverSyncAttempted && evt.serverSyncSuccess" class="material-icons-outlined px-1 text-base text-success">cloud_done</span>
         <span v-if="evt.serverSyncAttempted && !evt.serverSyncSuccess" class="material-icons px-1 text-base text-error">error_outline</span>
 
-        <p v-if="evt.num" class="text-sm text-gray-400 italic px-1">+{{ evt.num }}</p>
+        <p v-if="evt.num" class="text-sm text-fg-muted italic px-1">+{{ evt.num }}</p>
 
         <div class="flex-grow" />
-        <p class="text-base text-white" @click="clickPlaybackTime(evt.currentTime)">{{ $secondsToTimestampFull(evt.currentTime) }}</p>
+        <p class="text-base text-fg" @click="clickPlaybackTime(evt.currentTime)">{{ $secondsToTimestampFull(evt.currentTime) }}</p>
       </div>
     </div>
   </div>
diff --git a/pages/playlist/_id.vue b/pages/playlist/_id.vue
index 49249dd7..8ece676b 100644
--- a/pages/playlist/_id.vue
+++ b/pages/playlist/_id.vue
@@ -17,7 +17,7 @@
         </div>
 
         <div class="my-8 max-w-2xl px-3">
-          <p class="text-base text-gray-100">{{ description }}</p>
+          <p class="text-base text-fg">{{ description }}</p>
         </div>
 
         <tables-playlist-items-table :items="playlistItems" :playlist-id="playlist.id" @showMore="showMore" />
diff --git a/pages/search.vue b/pages/search.vue
index 20bddf73..6367bf8e 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -5,10 +5,10 @@
     </div>
     <div class="w-full overflow-x-hidden overflow-y-auto search-content px-4" @click.stop>
       <div v-show="isFetching" class="w-full py-8 flex justify-center">
-        <p class="text-lg text-gray-400">{{ $strings.MessageFetching }}</p>
+        <p class="text-lg text-fg-muted">{{ $strings.MessageFetching }}</p>
       </div>
       <div v-if="!isFetching && lastSearch && !totalResults" class="w-full py-8 flex justify-center">
-        <p class="text-lg text-gray-400">{{ $strings.MessageNoItemsFound }}</p>
+        <p class="text-lg text-fg-muted">{{ $strings.MessageNoItemsFound }}</p>
       </div>
       <p v-if="bookResults.length" class="font-semibold text-sm mb-1">{{ $strings.LabelBooks }}</p>
       <template v-for="item in bookResults">
@@ -19,9 +19,9 @@
         </div>
       </template>
 
-      <p v-if="podcastResults.length" class="uppercase text-xs text-gray-400 my-1 px-1 font-semibold">{{ $strings.LabelPodcasts }}</p>
+      <p v-if="podcastResults.length" class="uppercase text-xs text-fg-muted my-1 px-1 font-semibold">{{ $strings.LabelPodcasts }}</p>
       <template v-for="item in podcastResults">
-        <div :key="item.libraryItem.id" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1">
+        <div :key="item.libraryItem.id" class="text-fg select-none relative py-1">
           <nuxt-link :to="`/item/${item.libraryItem.id}`">
             <cards-item-search-card :library-item="item.libraryItem" :match-key="item.matchKey" :match-text="item.matchText" :search="lastSearch" />
           </nuxt-link>
diff --git a/pages/settings.vue b/pages/settings.vue
index 3ffef09a..55655b42 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="w-full h-full px-4 py-8 overflow-y-auto">
     <!-- Display settings -->
-    <p class="uppercase text-xs font-semibold text-gray-300 mb-2">{{ $strings.HeaderUserInterfaceSettings }}</p>
+    <p class="uppercase text-xs font-semibold text-fg-muted mb-2">{{ $strings.HeaderUserInterfaceSettings }}</p>
     <div class="flex items-center py-3" @click="toggleEnableAltView">
       <div class="w-10 flex justify-center">
         <ui-toggle-switch v-model="enableBookshelfView" @input="saveSettings" />
@@ -29,7 +29,7 @@
     </div>
 
     <!-- Playback settings -->
-    <p class="uppercase text-xs font-semibold text-gray-300 mb-2 mt-10">{{ $strings.HeaderPlaybackSettings }}</p>
+    <p class="uppercase text-xs font-semibold text-fg-muted mb-2 mt-10">{{ $strings.HeaderPlaybackSettings }}</p>
     <div v-if="!isiOS" class="flex items-center py-3" @click="toggleDisableAutoRewind">
       <div class="w-10 flex justify-center">
         <ui-toggle-switch v-model="settings.disableAutoRewind" @input="saveSettings" />
@@ -58,7 +58,7 @@
 
     <!-- Sleep timer settings -->
     <template v-if="!isiOS">
-      <p class="uppercase text-xs font-semibold text-gray-300 mb-2 mt-10">{{ $strings.HeaderSleepTimerSettings }}</p>
+      <p class="uppercase text-xs font-semibold text-fg-muted mb-2 mt-10">{{ $strings.HeaderSleepTimerSettings }}</p>
       <div class="flex items-center py-3" @click="toggleDisableShakeToResetSleepTimer">
         <div class="w-10 flex justify-center">
           <ui-toggle-switch v-model="settings.disableShakeToResetSleepTimer" @input="saveSettings" />
diff --git a/pages/stats.vue b/pages/stats.vue
index 76f31bb1..e9ff08dd 100644
--- a/pages/stats.vue
+++ b/pages/stats.vue
@@ -8,21 +8,21 @@
       <div class="flex p-2">
         <div class="px-3">
           <p class="text-4xl md:text-5xl font-bold">{{ userItemsFinished.length }}</p>
-          <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsItemsFinished }}</p>
+          <p class="text-xs md:text-sm text-fg-muted">{{ $strings.LabelStatsItemsFinished }}</p>
         </div>
       </div>
 
       <div class="flex p-2">
         <div class="px-1">
           <p class="text-4xl md:text-5xl font-bold">{{ totalDaysListened }}</p>
-          <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsDaysListened }}</p>
+          <p class="text-xs md:text-sm text-fg-muted">{{ $strings.LabelStatsDaysListened }}</p>
         </div>
       </div>
 
       <div class="flex p-2">
         <div class="px-1">
           <p class="text-4xl md:text-5xl font-bold">{{ totalMinutesListening }}</p>
-          <p class="text-xs md:text-sm text-white text-opacity-80">{{ $strings.LabelStatsMinutesListening }}</p>
+          <p class="text-xs md:text-sm text-fg-muted">{{ $strings.LabelStatsMinutesListening }}</p>
         </div>
       </div>
     </div>
@@ -37,10 +37,10 @@
         <template v-for="(item, index) in mostRecentListeningSessions">
           <div :key="item.id" class="w-full py-0.5">
             <div class="flex items-center mb-1">
-              <p class="text-sm text-white text-opacity-70 w-8 min-w-8">{{ index + 1 }}.&nbsp;</p>
+              <p class="text-sm text-fg-muted w-8 min-w-8">{{ index + 1 }}.&nbsp;</p>
               <div class="w-56">
-                <p class="text-sm text-white text-opacity-80 truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
-                <p class="text-xs text-white text-opacity-50">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
+                <p class="text-sm text-fg truncate">{{ item.mediaMetadata ? item.mediaMetadata.title : '' }}</p>
+                <p class="text-xs text-fg-muted">{{ $dateDistanceFromNow(item.updatedAt) }}</p>
               </div>
               <div class="w-16 min-w-16 text-right">
                 <p class="text-xs font-bold">{{ $elapsedPretty(item.timeListening) }}</p>
diff --git a/plugins/init.client.js b/plugins/init.client.js
index ec2a1c73..dc2be2ae 100644
--- a/plugins/init.client.js
+++ b/plugins/init.client.js
@@ -172,14 +172,14 @@ Vue.prototype.$sanitizeFilename = (input, colonReplacement = ' - ') => {
 }
 
 function xmlToJson(xml) {
-  const json = {};
+  const json = {}
   for (const res of xml.matchAll(/(?:<(\w*)(?:\s[^>]*)*>)((?:(?!<\1).)*)(?:<\/\1>)|<(\w*)(?:\s*)*\/>/gm)) {
-    const key = res[1] || res[3];
-    const value = res[2] && xmlToJson(res[2]);
-    json[key] = ((value && Object.keys(value).length) ? value : res[2]) || null;
+    const key = res[1] || res[3]
+    const value = res[2] && xmlToJson(res[2])
+    json[key] = ((value && Object.keys(value).length) ? value : res[2]) || null
 
   }
-  return json;
+  return json
 }
 Vue.prototype.$xmlToJson = xmlToJson
 
diff --git a/tailwind.config.js b/tailwind.config.js
index fafca459..7c4885fe 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,10 +15,13 @@ module.exports = {
         'short': { 'raw': '(max-height: 500px)' }
       },
       colors: {
-        bg: '#373838',
-        secondary: '#2F3030',
-        yellowgreen: 'yellowgreen',
-        primary: '#232323',
+        bg: 'rgb(var(--color-bg) / <alpha-value>)',
+        'bg-hover': 'rgb(var(--color-bg-hover) / <alpha-value>)',
+        fg: 'rgb(var(--color-fg) / <alpha-value>)',
+        'fg-muted': 'rgb(var(--color-fg-muted) / <alpha-value>)',
+        secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
+        primary: 'rgb(var(--color-primary) / <alpha-value>)',
+        border: 'rgb(var(--color-border) / <alpha-value>)',
         accent: '#1ad691',
         error: '#FF5252',
         info: '#2196F3',