diff --git a/src/dashboardWebView/components/Chatbot/Chatbox.tsx b/src/dashboardWebView/components/Chatbot/Chatbox.tsx
index 43ac25ac..f86d2fb4 100644
--- a/src/dashboardWebView/components/Chatbot/Chatbox.tsx
+++ b/src/dashboardWebView/components/Chatbot/Chatbox.tsx
@@ -1,7 +1,6 @@
 import { PaperAirplaneIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { useCallback } from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -13,7 +12,6 @@ export interface IChatboxProps {
 export const Chatbox: React.FunctionComponent<IChatboxProps> = ({ isLoading, onTrigger }: React.PropsWithChildren<IChatboxProps>) => {
   const [message, setMessage] = React.useState<string>("");
   const [isFocussed, setIsFocussed] = React.useState<boolean>(false);
-  const { getColors } = useThemeColors();
 
   const callAi = useCallback(() => {
     setTimeout(() => {
@@ -29,11 +27,7 @@ export const Chatbox: React.FunctionComponent<IChatboxProps> = ({ isLoading, onT
         <div className='chatbox px-4'>
           <textarea
             className={`
-          resize-none w-full outline-none border-0 pr-8 
-          ${getColors(
-              'focus:outline-none border-gray-300 text-vulcan-500',
-              'border-transparent bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-none focus:border-transparent'
-            )}`}
+          resize-none w-full outline-none border-0 pr-8 border-transparent bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-none focus:border-transparent`}
             placeholder={l10n.t(LocalizationKey.dashboardChatbotChatboxPlaceholder)}
             autoFocus={true}
             value={message}
diff --git a/src/dashboardWebView/components/Common/ChoiceButton.tsx b/src/dashboardWebView/components/Common/ChoiceButton.tsx
index 8d44b5ac..1ab04e72 100644
--- a/src/dashboardWebView/components/Common/ChoiceButton.tsx
+++ b/src/dashboardWebView/components/Common/ChoiceButton.tsx
@@ -1,7 +1,6 @@
 import { Menu } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 import { MenuItem, MenuItems } from '../Menu';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
@@ -24,18 +23,13 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({
   choices,
   title
 }: React.PropsWithChildren<IChoiceButtonProps>) => {
-  const { getColors } = useThemeColors();
 
   return (
     <span className="relative z-50 inline-flex shadow-sm rounded-md">
       <button
         type="button"
         className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium ${choices.length > 0 ? `rounded-l` : `rounded`
-          } ${getColors(
-            `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
-            `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-          )
-          }`}
+          } text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
         onClick={onClick}
         disabled={disabled}
       >
@@ -45,11 +39,7 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({
       {choices.length > 0 && (
         <Menu as="span" className="-ml-px relative block">
           <Menu.Button
-            className={`h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none  rounded-r ${getColors(
-              `text-white dark:text-vulcan-500 bg-teal-700 hover:bg-teal-800 disabled:bg-gray-500`,
-              `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-            )
-              }`}
+            className={`h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none  rounded-r text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
             disabled={disabled}
           >
             <span className="sr-only">{l10n.t(LocalizationKey.dashboardCommonChoiceButtonOpen)}</span>
diff --git a/src/dashboardWebView/components/Contents/ContentActions.tsx b/src/dashboardWebView/components/Contents/ContentActions.tsx
index 04f73623..912eaf32 100644
--- a/src/dashboardWebView/components/Contents/ContentActions.tsx
+++ b/src/dashboardWebView/components/Contents/ContentActions.tsx
@@ -8,7 +8,6 @@ import { MenuItem, MenuItems, ActionMenuButton, QuickAction } from '../Menu';
 import { Alert } from '../Modals/Alert';
 import { usePopper } from 'react-popper';
 import { useState } from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { useRecoilState, useRecoilValue } from 'recoil';
@@ -36,7 +35,6 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
 }: React.PropsWithChildren<IContentActionsProps>) => {
   const [pinnedItems, setPinnedItems] = useRecoilState(PinnedItemsAtom);
   const [showDeletionAlert, setShowDeletionAlert] = React.useState(false);
-  const { getColors } = useThemeColors();
   const settings = useRecoilValue(SettingsSelector);
 
   const [referenceElement, setReferenceElement] = useState<any>(null);
@@ -129,11 +127,7 @@ export const ContentActions: React.FunctionComponent<IContentActionsProps> = ({
       >
         <div
           className={`flex items-center border border-transparent rounded-full ${listView ? '' : 'p-2 -mt-4'
-            } ${getColors(
-              'group-hover/card:bg-gray-200 dark:group-hover/card:bg-vulcan-200 group-hover/card:border-gray-100 dark:group-hover/card:border-vulcan-50',
-              'group-hover/card:bg-[var(--vscode-sideBar-background)] group-hover/card:border-[var(--frontmatter-border)]'
-            )
-            }`}
+            } group-hover/card:bg-[var(--vscode-sideBar-background)] group-hover/card:border-[var(--frontmatter-border)]`}
         >
           <Menu as="div" className={`relative flex text-left`}>
             {!listView && (
diff --git a/src/dashboardWebView/components/Contents/List.tsx b/src/dashboardWebView/components/Contents/List.tsx
index d862d5ac..1808b443 100644
--- a/src/dashboardWebView/components/Contents/List.tsx
+++ b/src/dashboardWebView/components/Contents/List.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
-import useThemeColors from '../../hooks/useThemeColors';
 import { DashboardViewType } from '../../models';
 import { ViewSelector } from '../../state';
 import * as l10n from '@vscode/l10n';
@@ -12,7 +11,6 @@ export const List: React.FunctionComponent<IListProps> = ({
   children
 }: React.PropsWithChildren<IListProps>) => {
   const view = useRecoilValue(ViewSelector);
-  const { getColors } = useThemeColors();
 
   let className = '';
   if (view === DashboardViewType.Grid) {
@@ -24,8 +22,7 @@ export const List: React.FunctionComponent<IListProps> = ({
   return (
     <ul role="list" className={className}>
       {view === DashboardViewType.List && (
-        <li className={`px-5 relative uppercase py-2 border-b ${getColors('text-vulcan-100 dark:text-whisper-900 border-vulcan-50', 'text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]')
-          }`}>
+        <li className={`px-5 relative uppercase py-2 border-b text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}>
           <div className={`grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8`}>
             <div className="col-span-8">{l10n.t(LocalizationKey.dashboardContentsListTitle)}</div>
             <div className="col-span-2">{l10n.t(LocalizationKey.dashboardContentsListDate)}</div>
diff --git a/src/dashboardWebView/components/Contents/Overview.tsx b/src/dashboardWebView/components/Contents/Overview.tsx
index 72f95b11..246b3205 100644
--- a/src/dashboardWebView/components/Contents/Overview.tsx
+++ b/src/dashboardWebView/components/Contents/Overview.tsx
@@ -10,7 +10,6 @@ import { GroupingSelector, PageAtom, ViewSelector } from '../../state';
 import { Item } from './Item';
 import { List } from './List';
 import usePagination from '../../hooks/usePagination';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { PinnedItemsAtom } from '../../state/atom/PinnedItems';
@@ -34,7 +33,6 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
   const grouping = useRecoilValue(GroupingSelector);
   const page = useRecoilValue(PageAtom);
   const { pageSetNr } = usePagination(settings?.dashboardState.contents.pagination);
-  const { getColors } = useThemeColors();
   const view = useRecoilValue(ViewSelector);
 
   const pagedPages = useMemo(() => {
@@ -121,8 +119,7 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
       <div className={`flex items-center justify-center h-full`}>
         <div className={`max-w-xl text-center`}>
           <FrontMatterIcon
-            className={`h-32 mx-auto opacity-90 mb-8 ${getColors('text-vulcan-300 dark:text-whisper-800', 'text-[var(--vscode-editor-foreground)]')
-              }`}
+            className={`h-32 mx-auto opacity-90 mb-8 text-[var(--vscode-editor-foreground)]`}
           />
           {settings && settings?.contentFolders?.length > 0 ? (
             <p className={`text-xl font-medium`}>{l10n.t(LocalizationKey.dashboardContentsOverviewNoMarkdown)}</p>
diff --git a/src/dashboardWebView/components/DataView/EmptyView.tsx b/src/dashboardWebView/components/DataView/EmptyView.tsx
index e3543d47..142c1e34 100644
--- a/src/dashboardWebView/components/DataView/EmptyView.tsx
+++ b/src/dashboardWebView/components/DataView/EmptyView.tsx
@@ -1,6 +1,5 @@
 import { ExclamationCircleIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -9,12 +8,11 @@ export interface IEmptyViewProps { }
 export const EmptyView: React.FunctionComponent<IEmptyViewProps> = (
   props: React.PropsWithChildren<IEmptyViewProps>
 ) => {
-  const { getColors } = useThemeColors();
 
   return (
     <div className="flex flex-col items-center justify-center w-full">
-      <ExclamationCircleIcon className={`w-1/12 opacity-90 ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-secondary-text)]`)}`} />
-      <h2 className={`text-xl ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-secondary-text)]`)}`}>
+      <ExclamationCircleIcon className={`w-1/12 opacity-90 text-[var(--frontmatter-secondary-text)]`} />
+      <h2 className={`text-xl text-[var(--frontmatter-secondary-text)]`}>
         {l10n.t(LocalizationKey.dashboardDataViewEmptyViewHeading)}
       </h2>
     </div>
diff --git a/src/dashboardWebView/components/DataView/SortableContainer.tsx b/src/dashboardWebView/components/DataView/SortableContainer.tsx
index 3cb141b8..5115b317 100644
--- a/src/dashboardWebView/components/DataView/SortableContainer.tsx
+++ b/src/dashboardWebView/components/DataView/SortableContainer.tsx
@@ -1,17 +1,14 @@
 import * as React from 'react';
 import { SortableContainer } from 'react-sortable-hoc';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface ISortableContainerProps { }
 
 export const Container = SortableContainer(
   ({ children }: React.PropsWithChildren<ISortableContainerProps>) => {
-    const { getColors } = useThemeColors();
 
     return (
       <ul
-        className={`-mx-4 divide-y border-t border-b ${getColors(`divide-gray-200 dark:divide-vulcan-300 border-gray-200 dark:border-vulcan-300`, `divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`)
-          }`}
+        className={`-mx-4 divide-y border-t border-b divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`}
       >
         {children}
       </ul>
diff --git a/src/dashboardWebView/components/ErrorView/index.tsx b/src/dashboardWebView/components/ErrorView/index.tsx
index d30bcca7..ee6a2f94 100644
--- a/src/dashboardWebView/components/ErrorView/index.tsx
+++ b/src/dashboardWebView/components/ErrorView/index.tsx
@@ -1,6 +1,5 @@
 import { ExclamationTriangleIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -9,11 +8,9 @@ export interface IErrorViewProps { }
 export const ErrorView: React.FunctionComponent<IErrorViewProps> = (
   _: React.PropsWithChildren<IErrorViewProps>
 ) => {
-  const { getColors } = useThemeColors();
-
   return (
     <main className={`h-full w-full flex flex-col justify-center items-center space-y-2`}>
-      <ExclamationTriangleIcon className={`w-24 h-24 ${getColors(`text-red-500`, `text-[var(--vscode-editorError-foreground)]`)}`} />
+      <ExclamationTriangleIcon className={`w-24 h-24 text-[var(--vscode-editorError-foreground)]`} />
       <p className="text-xl">{l10n.t(LocalizationKey.commonErrorMessage)}</p>
       <p className="text-base">{l10n.t(LocalizationKey.dashboardErrorViewDescription)}</p>
     </main>
diff --git a/src/dashboardWebView/components/Header/Breadcrumb.tsx b/src/dashboardWebView/components/Header/Breadcrumb.tsx
index 2beeab6b..e3eb9540 100644
--- a/src/dashboardWebView/components/Header/Breadcrumb.tsx
+++ b/src/dashboardWebView/components/Header/Breadcrumb.tsx
@@ -2,9 +2,8 @@ import { HomeIcon } from '@heroicons/react/24/outline';
 import { basename, join } from 'path';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { HOME_PAGE_NAVIGATION_ID, STATIC_FOLDER_PLACEHOLDER } from '../../../constants';
+import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
 import { parseWinPath } from '../../../helpers/parseWinPath';
-import useThemeColors from '../../hooks/useThemeColors';
 import { SearchAtom, SelectedMediaFolderAtom, SettingsAtom } from '../../state';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
@@ -18,7 +17,6 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
   const [, setSearchValue] = useRecoilState(SearchAtom);
   const [folders, setFolders] = React.useState<string[]>([]);
   const settings = useRecoilValue(SettingsAtom);
-  const { getColors } = useThemeColors();
 
   const updateFolder = (folder: string) => {
     setSearchValue('');
@@ -86,10 +84,7 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
         <div className="flex items-center">
           <button
             onClick={() => setSelectedFolder(HOME_PAGE_NAVIGATION_ID)}
-            className={getColors(
-              `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
-              `text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`
-            )}
+            className={`text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`}
           >
             <HomeIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
             <span className="sr-only">{l10n.t(LocalizationKey.dashboardHeaderBreadcrumbHome)}</span>
@@ -101,11 +96,7 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
         <li key={folder} className="flex">
           <div className="flex items-center">
             <svg
-              className={`flex-shrink-0 h-5 w-5 ${getColors(
-                `text-gray-300 dark:text-whisper-900`,
-                `text-[var(--vscode-tab-inactiveForeground)]`
-              )
-                }`}
+              className={`flex-shrink-0 h-5 w-5 text-[var(--vscode-tab-inactiveForeground)]`}
               xmlns="http://www.w3.org/2000/svg"
               fill="currentColor"
               viewBox="0 0 20 20"
@@ -116,11 +107,7 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (
 
             <button
               onClick={() => updateFolder(folder)}
-              className={`ml-4 text-sm font-medium ${getColors(
-                `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
-                `text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`
-              )
-                }`}
+              className={`ml-4 text-sm font-medium text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`}
             >
               {basename(folder)}
             </button>
diff --git a/src/dashboardWebView/components/Header/ClearFilters.tsx b/src/dashboardWebView/components/Header/ClearFilters.tsx
index 5bb74b3c..872979bf 100644
--- a/src/dashboardWebView/components/Header/ClearFilters.tsx
+++ b/src/dashboardWebView/components/Header/ClearFilters.tsx
@@ -15,7 +15,6 @@ import {
 } from '../../state';
 import { DefaultValue } from 'recoil';
 import { useEffect } from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -30,7 +29,6 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
   _: React.PropsWithChildren<IClearFiltersProps>
 ) => {
   const [show, setShow] = React.useState(false);
-  const { getColors } = useThemeColors();
 
   const folder = useRecoilValue(FolderSelector);
   const tag = useRecoilValue(TagSelector);
@@ -65,11 +63,7 @@ export const ClearFilters: React.FunctionComponent<IClearFiltersProps> = (
 
   return (
     <button
-      className={`flex items-center ${getColors(
-        'hover:text-teal-600',
-        'hover:text-[var(--vscode-textLink-activeForeground)]'
-      )
-        }`}
+      className={`flex items-center hover:text-[var(--vscode-textLink-activeForeground)]`}
       onClick={reset}
       title={l10n.t(LocalizationKey.dashboardHeaderClearFiltersTitle)}
     >
diff --git a/src/dashboardWebView/components/Header/Pagination.tsx b/src/dashboardWebView/components/Header/Pagination.tsx
index cc1b8aff..eb3edf6f 100644
--- a/src/dashboardWebView/components/Header/Pagination.tsx
+++ b/src/dashboardWebView/components/Header/Pagination.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import usePagination from '../../hooks/usePagination';
-import useThemeColors from '../../hooks/useThemeColors';
 import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
 import { PaginationButton } from './PaginationButton';
 import * as l10n from '@vscode/l10n';
@@ -23,7 +22,6 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
     totalPages,
     totalMedia
   );
-  const { getColors } = useThemeColors();
 
   const getButtons = useCallback((): number[] => {
     const maxButtons = 5;
@@ -77,12 +75,8 @@ export const Pagination: React.FunctionComponent<IPaginationProps> = ({
             setPage(button);
           }}
           className={`max-h-8 rounded ${page === button
-            ? `px-2 ${getColors('bg-gray-200  text-vulcan-500', 'bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]')}`
-            : getColors(
-              `text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`,
-              `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`
-            )
-            }`}
+            ? `px-2 bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]`
+            : `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}`}
         >
           {button + 1}
         </button>
diff --git a/src/dashboardWebView/components/Header/PaginationButton.tsx b/src/dashboardWebView/components/Header/PaginationButton.tsx
index 6b04da77..4c8f0eea 100644
--- a/src/dashboardWebView/components/Header/PaginationButton.tsx
+++ b/src/dashboardWebView/components/Header/PaginationButton.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IPaginationButtonProps {
   title: string;
@@ -12,18 +11,11 @@ export const PaginationButton: React.FunctionComponent<IPaginationButtonProps> =
   disabled,
   onClick
 }: React.PropsWithChildren<IPaginationButtonProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <button
       disabled={disabled}
       onClick={onClick}
-      className={`disabled:opacity-50 ${
-        getColors(
-          'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500 disabled:hover:text-gray-500 dark:disabled:hover:text-whisper-900',
-          'text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
-        )
-      }`}
+      className={`disabled:opacity-50 text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-list-activeSelectionForeground)]`}
     >
       {title}
     </button>
diff --git a/src/dashboardWebView/components/Header/PaginationStatus.tsx b/src/dashboardWebView/components/Header/PaginationStatus.tsx
index 056f58e9..166b2b95 100644
--- a/src/dashboardWebView/components/Header/PaginationStatus.tsx
+++ b/src/dashboardWebView/components/Header/PaginationStatus.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 import usePagination from '../../hooks/usePagination';
-import useThemeColors from '../../hooks/useThemeColors';
 import { MediaTotalSelector, PageAtom, SettingsAtom } from '../../state';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
@@ -22,8 +21,6 @@ export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> =
     totalPages || 0,
     totalMedia
   );
-  const { getColors } = useThemeColors();
-
   const totelItemsOnPage = useMemo(() => {
     const items = (page + 1) * pageSetNr;
     if (totalItems < items) {
@@ -34,11 +31,7 @@ export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> =
 
   return (
     <div className="hidden sm:flex">
-      <p className={`text-sm ${getColors(
-        'text-gray-500 dark:text-whisper-900',
-        'text-[var(--vscode-tab-inactiveForeground)]'
-      )
-        }`}>
+      <p className={`text-sm text-[var(--vscode-tab-inactiveForeground)]`}>
         {
           l10n.t(LocalizationKey.dashboardHeaderPaginationStatusText,
             (page * pageSetNr + 1),
diff --git a/src/dashboardWebView/components/Header/RefreshDashboardData.tsx b/src/dashboardWebView/components/Header/RefreshDashboardData.tsx
index 284c5977..7b601064 100644
--- a/src/dashboardWebView/components/Header/RefreshDashboardData.tsx
+++ b/src/dashboardWebView/components/Header/RefreshDashboardData.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { useCallback } from 'react';
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
-import useThemeColors from '../../hooks/useThemeColors';
 import { NavigationType } from '../../models';
 import {
   CategoryAtom,
diff --git a/src/dashboardWebView/components/Header/SyncButton.tsx b/src/dashboardWebView/components/Header/SyncButton.tsx
index 791132cf..bff7d522 100644
--- a/src/dashboardWebView/components/Header/SyncButton.tsx
+++ b/src/dashboardWebView/components/Header/SyncButton.tsx
@@ -5,7 +5,6 @@ import * as React from 'react';
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { GeneralCommands } from '../../../constants';
-import useThemeColors from '../../hooks/useThemeColors';
 import { SettingsSelector } from '../../state';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
@@ -17,7 +16,6 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
 ) => {
   const settings = useRecoilValue(SettingsSelector);
   const [isSyncing, setIsSyncing] = useState(false);
-  const { getColors } = useThemeColors();
 
   const pull = () => {
     Messenger.send(GeneralCommands.toVSCode.gitSync);
@@ -49,11 +47,7 @@ export const SyncButton: React.FunctionComponent<ISyncButtonProps> = (
     <div className="git_actions">
       <button
         type="button"
-        className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded ${getColors(
-          `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
-          `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-        )
-          }`}
+        className={`inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium focus:outline-none rounded text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
         onClick={pull}
         disabled={isSyncing}
       >
diff --git a/src/dashboardWebView/components/Header/ViewSwitch.tsx b/src/dashboardWebView/components/Header/ViewSwitch.tsx
index 7f8a642d..eb125fae 100644
--- a/src/dashboardWebView/components/Header/ViewSwitch.tsx
+++ b/src/dashboardWebView/components/Header/ViewSwitch.tsx
@@ -5,7 +5,6 @@ import { Bars4Icon, Squares2X2Icon } from '@heroicons/react/24/solid';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { DashboardViewType } from '../../models';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -16,7 +15,6 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
 ) => {
   const [view, setView] = useRecoilState(ViewAtom);
   const settings = useRecoilValue(SettingsSelector);
-  const { getColors } = useThemeColors();
 
   const toggleView = () => {
     const newView =
@@ -32,9 +30,9 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
   }, [settings?.pageViewType]);
 
   return (
-    <div className={`flex rounded-sm lg:mb-1 ${getColors('bg-vulcan-50', 'bg-[var(--vscode-button-secondaryBackground)]')}`}>
+    <div className={`flex rounded-sm lg:mb-1 bg-[var(--vscode-button-secondaryBackground)]`}>
       <button
-        className={`flex items-center px-2 py-1 rounded-l-sm ${view === DashboardViewType.Grid ? getColors('bg-teal-500 text-vulcan-500', 'bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]') : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
+        className={`flex items-center px-2 py-1 rounded-l-sm ${view === DashboardViewType.Grid ? `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]` : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
           }`}
         title={l10n.t(LocalizationKey.dashboardHeaderViewSwitchToGrid)}
         type={`button`}
@@ -46,7 +44,7 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (
         </span>
       </button>
       <button
-        className={`flex items-center px-2 py-1 rounded-r-sm ${view === DashboardViewType.List ? getColors('bg-teal-500 text-vulcan-500', 'bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]') : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
+        className={`flex items-center px-2 py-1 rounded-r-sm ${view === DashboardViewType.List ? `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)]` : 'text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
           }`}
         title={l10n.t(LocalizationKey.dashboardHeaderViewSwitchToList)}
         type={`button`}
diff --git a/src/dashboardWebView/components/Layout/NavigationBar.tsx b/src/dashboardWebView/components/Layout/NavigationBar.tsx
index d3873906..9b7fe1e0 100644
--- a/src/dashboardWebView/components/Layout/NavigationBar.tsx
+++ b/src/dashboardWebView/components/Layout/NavigationBar.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface INavigationBarProps {
   title?: string;
@@ -11,28 +10,15 @@ export const NavigationBar: React.FunctionComponent<INavigationBarProps> = ({
   bottom,
   children
 }: React.PropsWithChildren<INavigationBarProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <aside
-      className={`w-2/12 px-4 py-6 h-full flex flex-col flex-grow border-r ${getColors(
-        'border-gray-200 dark:border-vulcan-300',
-        'border-[var(--frontmatter-border)]'
-      )}`}
+      className={`w-2/12 px-4 py-6 h-full flex flex-col flex-grow border-r border-[var(--frontmatter-border)]`}
     >
-      {title && <h2 className={`text-lg ${getColors(
-        'text-gray-500 dark:text-whisper-900',
-        'text-[var(--vscode-tab-inactiveForeground)]'
-      )
-        }`}>{title}</h2>}
+      {title && <h2 className={`text-lg text-[var(--vscode-tab-inactiveForeground)]`}>{title}</h2>}
 
       <nav className={`flex-1 py-4 -mx-4 h-full`}>
         <div
-          className={`divide-y border-t border-b  ${getColors(
-            'divide-gray-200 dark:divide-vulcan-300 border-gray-200 dark:border-vulcan-300',
-            'divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]'
-          )
-            }`}
+          className={`divide-y border-t border-b divide-[var(--frontmatter-border)] border-[var(--frontmatter-border)]`}
         >
           {children}
         </div>
diff --git a/src/dashboardWebView/components/Layout/NavigationItem.tsx b/src/dashboardWebView/components/Layout/NavigationItem.tsx
index 3b80baf6..c0e114e1 100644
--- a/src/dashboardWebView/components/Layout/NavigationItem.tsx
+++ b/src/dashboardWebView/components/Layout/NavigationItem.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface INavigationItemProps {
   isSelected?: boolean;
@@ -11,23 +10,11 @@ export const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
   onClick,
   children
 }: React.PropsWithChildren<INavigationItemProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <button
       type="button"
-      className={`navigationitem px-4 py-2 flex items-center text-sm font-medium w-full text-left cursor-pointer ${getColors(
-        'hover:bg-gray-200 dark:hover:bg-vulcan-400 hover:text-vulcan-500 dark:hover:text-whisper-500',
-        'hover:bg-[var(--frontmatter-list-hover-background)] hover:text-[var(--frontmatter-list-selected-text)]'
-      )
-        } ${isSelected
-          ? getColors(
-            'bg-gray-300 dark:bg-vulcan-300 text-vulcan-500 dark:text-whisper-500',
-            'bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]'
-          ) : getColors(
-            'text-gray-500 dark:text-whisper-900',
-            'text-[var(--frontmatter-list-text)]'
-          )
+      className={`navigationitem px-4 py-2 flex items-center text-sm font-medium w-full text-left cursor-pointer hover:bg-[var(--frontmatter-list-hover-background)] hover:text-[var(--frontmatter-list-selected-text)] ${isSelected
+        ? `bg-[var(--frontmatter-list-selected-background)] text-[var(--frontmatter-list-selected-text)]` : `text-[var(--frontmatter-list-text)]`
         }`}
       onClick={onClick}
     >
diff --git a/src/dashboardWebView/components/Layout/SponsorMsg.tsx b/src/dashboardWebView/components/Layout/SponsorMsg.tsx
index 771a8baf..6e592c88 100644
--- a/src/dashboardWebView/components/Layout/SponsorMsg.tsx
+++ b/src/dashboardWebView/components/Layout/SponsorMsg.tsx
@@ -2,7 +2,6 @@ import { HeartIcon, StarIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { REVIEW_LINK, SPONSOR_LINK } from '../../../constants';
 import { VersionInfo } from '../../../models';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -18,15 +17,9 @@ interface ISponsorLinkProps {
 }
 
 const SponsorLink: React.FunctionComponent<ISponsorLinkProps> = ({ title, href, children }: React.PropsWithChildren<ISponsorLinkProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <a
-      className={`group inline-flex justify-center items-center space-x-2 opacity-50 hover:opacity-100 ${getColors(
-        `text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300`,
-        `text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-textLink-foreground)]]`
-      )
-        }`}
+      className={`group inline-flex justify-center items-center space-x-2 opacity-50 hover:opacity-100 text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-textLink-foreground)]]`}
       href={href}
       title={title}
     >
@@ -40,16 +33,10 @@ export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = ({
   isBacker,
   version
 }: React.PropsWithChildren<ISponsorMsgProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <footer
       className={`w-full px-4 py-2 text-center space-x-8 flex items-center border-t ${isBacker ? 'justify-center' : 'justify-between'
-        } ${getColors(
-          'bg-gray-100 dark:bg-vulcan-500 text-vulcan-50 dark:text-whisper-900 border-gray-200 dark:border-vulcan-300',
-          'bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]'
-        )
-        }`}
+        } bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)] border-[var(--frontmatter-border)]`}
     >
       {isBacker ? (
         <span>
diff --git a/src/dashboardWebView/components/Media/DetailsItem.tsx b/src/dashboardWebView/components/Media/DetailsItem.tsx
index 8953874e..e3162d43 100644
--- a/src/dashboardWebView/components/Media/DetailsItem.tsx
+++ b/src/dashboardWebView/components/Media/DetailsItem.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IDetailsItemProps {
   title: string;
@@ -7,13 +6,11 @@ export interface IDetailsItemProps {
 }
 
 export const DetailsItem: React.FunctionComponent<IDetailsItemProps> = ({ title, details }: React.PropsWithChildren<IDetailsItemProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <>
       <div className="py-3 flex justify-between text-sm font-medium">
-        <dt className={getColors('text-vulcan-100 dark:text-whisper-900', 'text-[var(--vscode-editor-foreground)]')}>{title}</dt>
-        <dd className={`text-right ${getColors('text-vulcan-300 dark:text-whisper-500', 'text-[var(--vscode-foreground)]')}`}>
+        <dt className={`text-[var(--vscode-editor-foreground)]`}>{title}</dt>
+        <dd className={`text-right text-[var(--vscode-foreground)]`}>
           {details}
         </dd>
       </div>
diff --git a/src/dashboardWebView/components/Media/FolderCreation.tsx b/src/dashboardWebView/components/Media/FolderCreation.tsx
index b0cdbb8c..410eae5e 100644
--- a/src/dashboardWebView/components/Media/FolderCreation.tsx
+++ b/src/dashboardWebView/components/Media/FolderCreation.tsx
@@ -16,7 +16,6 @@ import { STATIC_FOLDER_PLACEHOLDER } from '../../../constants';
 import { useCallback, useMemo } from 'react';
 import { extname } from 'path';
 import { parseWinPath } from '../../../helpers/parseWinPath';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -30,7 +29,6 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
   const allStaticFolders = useRecoilValue(AllStaticFoldersAtom);
   const allContentFolders = useRecoilValue(AllContentFoldersAtom);
   const viewData = useRecoilValue(ViewDataSelector);
-  const { getColors } = useThemeColors();
 
   const hexoAssetFolderPath = useMemo(() => {
     const path = viewData?.data?.filePath?.replace(extname(viewData.data.filePath), '');
@@ -78,11 +76,7 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
     if (isHexoPostAssetsEnabled) {
       return (
         <button
-          className={`mr-2 inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium  focus:outline-none ${getColors(
-            `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
-            `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-          )
-            }`}
+          className={`mr-2 inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium  focus:outline-none text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
           title={l10n.t(LocalizationKey.dashboardMediaFolderCreationHexoCreate)}
           onClick={onAssetFolderCreation}
         >
@@ -116,11 +110,7 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (
     <div className="flex flex-1 justify-end">
       {renderPostAssetsButton}
       <button
-        className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none rounded ${getColors(
-          `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
-          `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-        )
-          }`}
+        className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none rounded text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
         title={l10n.t(LocalizationKey.dashboardMediaFolderCreationFolderCreate)}
         onClick={onFolderCreation}
       >
diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
index b6c509a6..dc45b7cc 100644
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/src/dashboardWebView/components/Media/Item.tsx
@@ -37,7 +37,6 @@ import { InfoDialog } from '../Modals/InfoDialog';
 import { DetailsSlideOver } from './DetailsSlideOver';
 import { usePopper } from 'react-popper';
 import { MediaSnippetForm } from './MediaSnippetForm';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -62,7 +61,6 @@ export const Item: React.FunctionComponent<IItemProps> = ({
   const settings = useRecoilValue(SettingsSelector);
   const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
   const viewData = useRecoilValue(ViewDataSelector);
-  const { getColors } = useThemeColors();
 
   const hasViewData = useMemo(() => {
     return viewData?.data?.filePath !== undefined;
@@ -483,11 +481,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
         </button>
         <div className={`relative py-4 pl-4 pr-12`}>
           <div className={`group/actions absolute top-4 right-4 flex flex-col space-y-4`}>
-            <div className={`flex items-center border border-transparent rounded-full p-2 -mr-2 -mt-2 ${getColors(
-              `group-hover/actions:bg-gray-200 dark:group-hover/actions:bg-vulcan-200 group-hover/actions:border-gray-100 dark:group-hover/actions:border-vulcan-50`,
-              `group-hover/actions:bg-[var(--vscode-sideBar-background)] group-hover/actions:border-[var(--frontmatter-border)]`
-            )
-              }`}>
+            <div className={`flex items-center border border-transparent rounded-full p-2 -mr-2 -mt-2 group-hover/actions:bg-[var(--vscode-sideBar-background)] group-hover/actions:border-[var(--frontmatter-border)]`}>
               <Menu as="div" className="relative z-10 flex text-left">
                 <div className="hidden group-hover/actions:flex">
                   <QuickAction title="View media details" onClick={viewMediaDetails}>
@@ -626,39 +620,39 @@ export const Item: React.FunctionComponent<IItemProps> = ({
               </Menu>
             </div>
           </div>
-          <p className={`text-sm font-bold pointer-events-none flex items-center break-all ${getColors(`dark:text-whisper-900`, `text-[var(--vscode-foreground)]`)}`}>
+          <p className={`text-sm font-bold pointer-events-none flex items-center break-all text-[var(--vscode-foreground)]}`}>
             {basename(parseWinPath(media.fsPath) || '')}
           </p>
           {!isImageFile && media.title && (
-            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
+            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start`}>
               <b className={`mr-2`}>
                 {l10n.t(LocalizationKey.dashboardMediaCommonTitle)}:
               </b>
-              <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.title}</span>
+              <span className={`block mt-1 text-xs text-[var(--vscode-foreground)]`}>{media.title}</span>
             </p>
           )}
           {media.caption && (
-            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
+            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start`}>
               <b className={`mr-2`}>
                 {l10n.t(LocalizationKey.dashboardMediaCommonCaption)}:
               </b>
-              <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.caption}</span>
+              <span className={`block mt-1 text-xs text-[var(--vscode-foreground)]`}>{media.caption}</span>
             </p>
           )}
           {!media.caption && media.alt && (
-            <p className={`mt-2 text-xs font-medium pointer-events-none  flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
+            <p className={`mt-2 text-xs font-medium pointer-events-none  flex flex-col items-start`}>
               <b className={`mr-2`}>
                 {l10n.t(LocalizationKey.dashboardMediaCommonAlt)}:
               </b>
-              <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>{media.alt}</span>
+              <span className={`block mt-1 text-xs text-[var(--vscode-foreground)]`}>{media.alt}</span>
             </p>
           )}
           {(media?.size || media?.dimensions) && (
-            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start ${getColors(`dark:text-whisper-900`, ``)}`}>
+            <p className={`mt-2 text-xs font-medium pointer-events-none flex flex-col items-start`}>
               <b className={`mr-1`}>
                 {l10n.t(LocalizationKey.dashboardMediaCommonSize)}:
               </b>
-              <span className={`block mt-1 text-xs ${getColors(`dark:text-whisper-500`, `text-[var(--vscode-foreground)]`)}`}>
+              <span className={`block mt-1 text-xs text-[var(--vscode-foreground)]`}>
                 {getMediaDetails()}
               </span>
             </p>
@@ -677,11 +671,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
             {mediaSnippets.map((snippet, idx) => (
               <li key={idx} className="inline-flex items-center pb-2 mr-2">
                 <button
-                  className={`w-full inline-flex justify-center border border-transparent shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:w-auto sm:text-sm disabled:opacity-30 ${getColors(
-                    `bg-teal-600 text-white hover:bg-teal-700 dark:hover:bg-teal-900`,
-                    `bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]`
-                  )
-                    }`}
+                  className={`w-full inline-flex justify-center border border-transparent shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:w-auto sm:text-sm disabled:opacity-30 bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]`}
                   onClick={() => processSnippet(snippet)}
                 >
                   {snippet.title}
diff --git a/src/dashboardWebView/components/Media/Lightbox.tsx b/src/dashboardWebView/components/Media/Lightbox.tsx
index 74108f63..076966d2 100644
--- a/src/dashboardWebView/components/Media/Lightbox.tsx
+++ b/src/dashboardWebView/components/Media/Lightbox.tsx
@@ -1,7 +1,6 @@
 import { basename } from 'path';
 import * as React from 'react';
 import { useRecoilState } from 'recoil';
-import useThemeColors from '../../hooks/useThemeColors';
 import { LightboxAtom } from '../../state';
 
 export interface ILightboxProps { }
@@ -10,7 +9,6 @@ export const Lightbox: React.FunctionComponent<ILightboxProps> = (
   _: React.PropsWithChildren<ILightboxProps>
 ) => {
   const [lightbox, setLightbox] = useRecoilState(LightboxAtom);
-  const { getColors } = useThemeColors();
 
   if (!lightbox) {
     return null;
@@ -23,11 +21,7 @@ export const Lightbox: React.FunctionComponent<ILightboxProps> = (
   return (
     <div
       onClick={hideLightbox}
-      className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center z-50 ${getColors(
-        `bg-black bg-opacity-50`,
-        `bg-[var(--frontmatter-lightbox-background)]`
-      )
-        }`}
+      className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center z-50 bg-[var(--frontmatter-lightbox-background)]`}
     >
       <div className={`w-full h-full flex flex-wrap items-center justify-center`}>
         <img
diff --git a/src/dashboardWebView/components/Media/Media.tsx b/src/dashboardWebView/components/Media/Media.tsx
index 3a75e785..823830cb 100644
--- a/src/dashboardWebView/components/Media/Media.tsx
+++ b/src/dashboardWebView/components/Media/Media.tsx
@@ -25,10 +25,8 @@ import { PageLayout } from '../Layout/PageLayout';
 import { parseWinPath } from '../../../helpers/parseWinPath';
 import { basename, extname, join } from 'path';
 import { MediaInfo } from '../../../models';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
-import { NavigationType } from '../../models';
 
 export interface IMediaProps { }
 
@@ -41,7 +39,6 @@ export const Media: React.FunctionComponent<IMediaProps> = (
   const selectedFolder = useRecoilValue(SelectedMediaFolderAtom);
   const folders = useRecoilValue(MediaFoldersAtom);
   const loading = useRecoilValue(LoadingAtom);
-  const { getColors } = useThemeColors();
 
   const currentStaticFolder = useMemo(() => {
     if (settings?.staticFolder) {
@@ -177,11 +174,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
         )}
 
         {isDragActive && (
-          <div className={`absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center z-50 ${getColors(
-            'text-whisper-500 bg-gray-900 bg-opacity-70',
-            'text-[var(--vscode-foreground)] bg-[var(--vscode-editor-background)] opacity-75'
-          )
-            }`}>
+          <div className={`absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center z-50 text-[var(--vscode-foreground)] bg-[var(--vscode-editor-background)] opacity-75`}>
             <ArrowUpTrayIcon className={`h-32`} />
             <p className={`text-xl max-w-md text-center`}>
               {selectedFolder
@@ -195,8 +188,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
           <div className={`flex items-center justify-center h-full`}>
             <div className={`max-w-xl text-center`}>
               <FrontMatterIcon
-                className={`h-32 mx-auto opacity-90 mb-8 ${getColors('text-vulcan-300 dark:text-whisper-800', 'text-[var(--vscode-editor-foreground)]')
-                  }`}
+                className={`h-32 mx-auto opacity-90 mb-8 text-[var(--vscode-editor-foreground)]`}
               />
 
               <p className={`text-xl font-medium`}>
diff --git a/src/dashboardWebView/components/Media/MediaHeaderBottom.tsx b/src/dashboardWebView/components/Media/MediaHeaderBottom.tsx
index 0f207d34..cd52c24a 100644
--- a/src/dashboardWebView/components/Media/MediaHeaderBottom.tsx
+++ b/src/dashboardWebView/components/Media/MediaHeaderBottom.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
-import useThemeColors from '../../hooks/useThemeColors';
 import { NavigationType } from '../../models/NavigationType';
 import { SettingsAtom } from '../../state';
 import { Sorting } from '../Header';
@@ -13,7 +12,6 @@ export const MediaHeaderBottom: React.FunctionComponent<IMediaHeaderBottomProps>
   _: React.PropsWithChildren<IMediaHeaderBottomProps>
 ) => {
   const settings = useRecoilValue(SettingsAtom);
-  const { getColors } = useThemeColors();
 
   if (!settings?.wsFolder) {
     return null;
@@ -21,11 +19,7 @@ export const MediaHeaderBottom: React.FunctionComponent<IMediaHeaderBottomProps>
 
   return (
     <nav
-      className={`w-full flex justify-between py-2 border-b ${getColors(
-        'bg-gray-200 text-vulcan-300 dark:bg-vulcan-400 dark:text-whisper-600 border-gray-300 dark:border-vulcan-100',
-        'bg-[var(--vscode-sideBar-background)] text-[var(--vscode-sideBar-foreground)] border-[var(--frontmatter-border)]'
-      )
-        }`}
+      className={`w-full flex justify-between py-2 border-b bg-[var(--vscode-sideBar-background)] text-[var(--vscode-sideBar-foreground)] border-[var(--frontmatter-border)]`}
       aria-label="Breadcrumb"
     >
       <Breadcrumb />
diff --git a/src/dashboardWebView/components/Media/MediaHeaderTop.tsx b/src/dashboardWebView/components/Media/MediaHeaderTop.tsx
index 47a99767..4e4af72d 100644
--- a/src/dashboardWebView/components/Media/MediaHeaderTop.tsx
+++ b/src/dashboardWebView/components/Media/MediaHeaderTop.tsx
@@ -6,7 +6,6 @@ import { useDebounce } from '../../../hooks/useDebounce';
 import { usePrevious } from '../../../panelWebView/hooks/usePrevious';
 import { DashboardCommand } from '../../DashboardCommand';
 import { DashboardMessage } from '../../DashboardMessage';
-import useThemeColors from '../../hooks/useThemeColors';
 import {
   LoadingAtom,
   PageAtom,
@@ -33,7 +32,6 @@ export const MediaHeaderTop: React.FunctionComponent<
   const settings = useRecoilValue(SettingsSelector);
   const debounceGetMedia = useDebounce<string | null>(lastUpdated, 200);
   const prevSelectedFolder = usePrevious<string | null>(selectedFolder);
-  const { getColors } = useThemeColors();
 
   const mediaUpdate = (message: MessageEvent<EventData<{ key: string; value: any }>>) => {
     if (message.data.command === DashboardCommand.mediaUpdate) {
@@ -83,11 +81,7 @@ export const MediaHeaderTop: React.FunctionComponent<
 
   return (
     <nav
-      className={`py-3 px-4 flex items-center justify-between border-b ${getColors(
-        'border-gray-300 dark:border-vulcan-100',
-        'border-[var(--frontmatter-border)]'
-      )
-        }`}
+      className={`py-3 px-4 flex items-center justify-between border-b border-[var(--frontmatter-border)]`}
       aria-label="Pagination"
     >
       <Searchbox placeholder={l10n.t(LocalizationKey.dashboardMediaMediaHeaderTopSearchboxPlaceholder)} />
diff --git a/src/dashboardWebView/components/Menu/ActionMenuButton.tsx b/src/dashboardWebView/components/Menu/ActionMenuButton.tsx
index 7f4e01a8..641056f6 100644
--- a/src/dashboardWebView/components/Menu/ActionMenuButton.tsx
+++ b/src/dashboardWebView/components/Menu/ActionMenuButton.tsx
@@ -1,7 +1,6 @@
 import { Menu } from '@headlessui/react';
 import { EllipsisVerticalIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IActionMenuButtonProps {
   title: string;
@@ -14,18 +13,12 @@ export const ActionMenuButton: React.FunctionComponent<IActionMenuButtonProps> =
   disabled,
   ref
 }: React.PropsWithChildren<IActionMenuButtonProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <Menu.Button
       ref={ref || null}
       onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
       disabled={disabled}
-      className={`group inline-flex justify-center text-sm font-medium ${getColors(
-        'text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600',
-        'text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]'
-      )
-        } ${disabled ? 'opacity-50' : ''
+      className={`group inline-flex justify-center text-sm font-medium text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)] ${disabled ? 'opacity-50' : ''
         }`}
     >
       <span className="sr-only">{title}</span>
diff --git a/src/dashboardWebView/components/Menu/MenuButton.tsx b/src/dashboardWebView/components/Menu/MenuButton.tsx
index 22bb9ea3..947b1b88 100644
--- a/src/dashboardWebView/components/Menu/MenuButton.tsx
+++ b/src/dashboardWebView/components/Menu/MenuButton.tsx
@@ -1,7 +1,6 @@
 import { Menu } from '@headlessui/react';
 import { ChevronDownIcon } from '@heroicons/react/24/solid';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IMenuButtonProps {
   label: string | JSX.Element;
@@ -14,11 +13,9 @@ export const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({
   title,
   disabled
 }: React.PropsWithChildren<IMenuButtonProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <div className={`group flex items-center ${disabled ? 'opacity-50' : ''}`}>
-      <div className={`mr-2 font-medium flex items-center ${getColors('text-gray-500 dark:text-whisper-700', 'text-[var(--vscode-tab-inactiveForeground)]')}`}>{label}:</div>
+      <div className={`mr-2 font-medium flex items-center text-[var(--vscode-tab-inactiveForeground)]`}>{label}:</div>
 
       <Menu.Button
         disabled={disabled}
diff --git a/src/dashboardWebView/components/Menu/MenuItem.tsx b/src/dashboardWebView/components/Menu/MenuItem.tsx
index 545809c4..2c1fe57d 100644
--- a/src/dashboardWebView/components/Menu/MenuItem.tsx
+++ b/src/dashboardWebView/components/Menu/MenuItem.tsx
@@ -1,6 +1,5 @@
 import { Menu } from '@headlessui/react';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IMenuItemProps {
   title: JSX.Element | string;
@@ -17,21 +16,13 @@ export const MenuItem: React.FunctionComponent<IMenuItemProps> = ({
   disabled,
   onClick
 }: React.PropsWithChildren<IMenuItemProps>) => {
-  const { getColors } = useThemeColors();
-  
   return (
     <Menu.Item>
       <button
         disabled={disabled}
         onClick={(e) => onClick(value, e)}
-        className={`${
-          !isCurrent ? `font-normal` : `font-bold`
-        } block px-4 py-2 text-sm w-full text-left disabled:opacity-50 ${
-          getColors(
-            'text-gray-500 dark:text-whisper-900 hover:bg-gray-100 hover:text-gray-700 dark:hover:text-whisper-600 dark:hover:bg-vulcan-100',
-            'text-[var(--vscode-editor-foreground)] hover:bg-[var(--vscode-list-hoverBackground)] '
-          )
-        }`}
+        className={`${!isCurrent ? `font-normal` : `font-bold`
+          } block px-4 py-2 text-sm w-full text-left disabled:opacity-50 text-[var(--vscode-editor-foreground)] hover:bg-[var(--vscode-list-hoverBackground)]`}
       >
         {title}
       </button>
diff --git a/src/dashboardWebView/components/Menu/MenuItems.tsx b/src/dashboardWebView/components/Menu/MenuItems.tsx
index 739919a3..713f7317 100644
--- a/src/dashboardWebView/components/Menu/MenuItems.tsx
+++ b/src/dashboardWebView/components/Menu/MenuItems.tsx
@@ -1,7 +1,6 @@
 import { Menu, Transition } from '@headlessui/react';
 import * as React from 'react';
 import { Fragment } from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IMenuItemsProps {
   widthClass?: string;
@@ -17,8 +16,6 @@ export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({
   updatePopper,
   disablePopper
 }: React.PropsWithChildren<IMenuItemsProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <Transition
       as={Fragment}
@@ -32,11 +29,7 @@ export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({
     >
       <Menu.Items
         className={`${widthClass || ''} ${marginTopClass || 'mt-2'} ${disablePopper ? 'origin-top-right absolute right-0 z-20' : ''
-          } rounded shadow-2xl ring-1 ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto ${getColors(
-            'bg-white dark:bg-vulcan-500 ring-vulcan-400 dark:ring-white',
-            'bg-[var(--vscode-sideBar-background)] ring-[var(--frontmatter-border)]'
-          )
-          }`}
+          } rounded shadow-2xl ring-1 ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto bg-[var(--vscode-sideBar-background)] ring-[var(--frontmatter-border)]`}
       >
         <div className="py-1">{children}</div>
       </Menu.Items>
diff --git a/src/dashboardWebView/components/Menu/QuickAction.tsx b/src/dashboardWebView/components/Menu/QuickAction.tsx
index 83fc42ec..fecb7be9 100644
--- a/src/dashboardWebView/components/Menu/QuickAction.tsx
+++ b/src/dashboardWebView/components/Menu/QuickAction.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IQuickActionProps {
   title: string;
@@ -11,18 +10,12 @@ export const QuickAction: React.FunctionComponent<IQuickActionProps> = ({
   onClick,
   children
 }: React.PropsWithChildren<IQuickActionProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <button
       type="button"
       title={title}
       onClick={onClick}
-      className={`px-2 group inline-flex justify-center text-sm font-medium ${getColors(
-        'text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600',
-        'text-[var(--vscode-foreground)] hover:text-[var(--frontmatter-button-hoverBackground)]'
-      )
-        }`}
+      className={`px-2 group inline-flex justify-center text-sm font-medium text-[var(--vscode-foreground)] hover:text-[var(--frontmatter-button-hoverBackground)]`}
     >
       {children}
       <span className="sr-only">{title}</span>
diff --git a/src/dashboardWebView/components/Modals/Alert.tsx b/src/dashboardWebView/components/Modals/Alert.tsx
index df2390d1..214a3c33 100644
--- a/src/dashboardWebView/components/Modals/Alert.tsx
+++ b/src/dashboardWebView/components/Modals/Alert.tsx
@@ -2,7 +2,6 @@ import { Dialog, Transition } from '@headlessui/react';
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
 import { Fragment, useRef } from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IAlertProps {
   title: string;
@@ -23,7 +22,6 @@ export const Alert: React.FunctionComponent<IAlertProps> = ({
   trigger
 }: React.PropsWithChildren<IAlertProps>) => {
   const cancelButtonRef = useRef(null);
-  const { getColors } = useThemeColors();
 
   return (
     <Transition.Root show={true} as={Fragment}>
@@ -42,11 +40,7 @@ export const Alert: React.FunctionComponent<IAlertProps> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Dialog.Overlay className={`fixed inset-0 transition-opacity ${getColors(
-              `bg-vulcan-500 bg-opacity-75`,
-              `bg-[var(--vscode-editor-background)] opacity-75`
-            )
-              }`} />
+            <Dialog.Overlay className={`fixed inset-0 transition-opacity bg-[var(--vscode-editor-background)] opacity-75`} />
           </Transition.Child>
 
           {/* This element is to trick the browser into centering the modal contents. */}
@@ -63,54 +57,37 @@ export const Alert: React.FunctionComponent<IAlertProps> = ({
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className={`inline-block align-bottom rounded px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 ${getColors(
-              'bg-white dark:bg-vulcan-500 border-whisper-900',
-              'bg-[var(--vscode-editor-background)] border-[var(--frontmatter-border)]'
-            )
-              }`}>
+            <div className={`inline-block align-bottom rounded px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 bg-[var(--vscode-editor-background)] border-[var(--frontmatter-border)]`}>
               <div className="sm:flex sm:items-start">
-                <div className={`mt-3 mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10 ${getColors(
-                  'bg-gray-50 dark:bg-vulcan-400',
-                  'bg-[var(--vscode-sidebar-background)]'
-                )
-                  }`}>
+                <div className={`mt-3 mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full sm:mx-0 sm:h-10 sm:w-10 bg-[var(--vscode-sidebar-background)]`}>
                   <ExclamationTriangleIcon
-                    className={`h-6 w-6 ${getColors(`text-red-500 dark:text-red-50`, `text-[var(--vscode-errorForeground)]`)}`}
+                    className={`h-6 w-6 text-[var(--vscode-errorForeground)]`}
                     aria-hidden="true"
                   />
                 </div>
                 <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                   <Dialog.Title
                     as="h3"
-                    className={`text-lg leading-6 font-medium ${getColors(`text-vulcan-300 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)
-                      }`}
+                    className={`text-lg leading-6 font-medium text-[var(--vscode-editor-foreground)]`}
                   >
                     {title}
                   </Dialog.Title>
                   <div className="mt-2">
-                    <p className={`text-sm ${getColors(`text-vulcan-500 dark:text-whisper-500`, `text-[var(--vscode-editor-foreground)]`)}`}>{description}</p>
+                    <p className={`text-sm text-[var(--vscode-editor-foreground)]`}>{description}</p>
                   </div>
                 </div>
               </div>
               <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                 <button
                   type="button"
-                  className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm ${getColors(
-                    'text-white bg-red-600 hover:bg-red-700 dark:hover:bg-red-900 focus:ring-red-500',
-                    'text-[var(--vscode-statusBarItem-errorForeground)] bg-[var(--vscode-statusBarItem-errorBackground)]'
-                  )
-                    }`}
+                  className={`w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 text-base font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm text-[var(--vscode-statusBarItem-errorForeground)] bg-[var(--vscode-statusBarItem-errorBackground)]`}
                   onClick={() => trigger()}
                 >
                   {okBtnText}
                 </button>
                 <button
                   type="button"
-                  className={`mt-3 w-full inline-flex justify-center rounded-md border shadow-sm px-4 py-2 text-base font-medium  focus:outline-none sm:mt-0 sm:w-auto sm:text-sm ${getColors(
-                    'bg-white border-gray-300 text-gray-700 hover:bg-gray-50 dark:hover:bg-gray-200',
-                    'bg-[var(--vscode-button-secondaryBackground)] border-[var(--frontmatter-border)] text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
-                  )
-                    }`}
+                  className={`mt-3 w-full inline-flex justify-center rounded-md border shadow-sm px-4 py-2 text-base font-medium  focus:outline-none sm:mt-0 sm:w-auto sm:text-sm bg-[var(--vscode-button-secondaryBackground)] border-[var(--frontmatter-border)] text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]`}
                   onClick={() => dismiss()}
                   ref={cancelButtonRef}
                 >
diff --git a/src/dashboardWebView/components/Modals/FormDialog.tsx b/src/dashboardWebView/components/Modals/FormDialog.tsx
index db61679c..23295abe 100644
--- a/src/dashboardWebView/components/Modals/FormDialog.tsx
+++ b/src/dashboardWebView/components/Modals/FormDialog.tsx
@@ -1,7 +1,6 @@
 import { Dialog, Transition } from '@headlessui/react';
 import * as React from 'react';
 import { Fragment, useRef } from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IFormDialogProps {
   title: string;
@@ -25,7 +24,6 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
   children
 }: React.PropsWithChildren<IFormDialogProps>) => {
   const cancelButtonRef = useRef(null);
-  const { getColors } = useThemeColors();
 
   return (
     <Transition.Root show={true} as={Fragment}>
@@ -44,11 +42,7 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Dialog.Overlay className={`fixed inset-0 transition-opacity ${getColors(
-              `bg-vulcan-500 bg-opacity-75`,
-              `bg-[var(--vscode-editor-background)] opacity-75`
-            )
-              }`} />
+            <Dialog.Overlay className={`fixed inset-0 transition-opacity bg-[var(--vscode-editor-background)] opacity-75`} />
           </Transition.Child>
 
           {/* This element is to trick the browser into centering the modal contents. */}
@@ -65,16 +59,11 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 ${getColors(
-              'bg-white dark:bg-vulcan-500 border-whisper-900',
-              'bg-[var(--vscode-sideBar-background)] border-[var(--frontmatter-border)]'
-            )
-              }`}>
+            <div className={`inline-block align-bottom rounded-lg px-4 pt-5 pb-4 text-left overflow-auto shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 border-2 bg-[var(--vscode-sideBar-background)] border-[var(--frontmatter-border)]`}>
               <div>
                 <Dialog.Title
                   as="h3"
-                  className={`text-lg leading-6 font-medium ${getColors(`text-vulcan-300 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)
-                    }`}
+                  className={`text-lg leading-6 font-medium text-[var(--vscode-editor-foreground)]`}
                 >
                   {title}
                 </Dialog.Title>
@@ -88,11 +77,7 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
                 <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                   <button
                     type="button"
-                    className={`w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm sm:ml-3 ${getColors(
-                      'bg-teal-600 focus:ring-teal-500 text-white hover:bg-teal-700 dark:hover:bg-teal-900 ',
-                      'bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]'
-                    )
-                      }`}
+                    className={`w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm sm:ml-3 bg-[var(--frontmatter-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]`}
                     onClick={() => trigger()}
                     disabled={isSaveDisabled}
                   >
@@ -101,11 +86,7 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
 
                   <button
                     type="button"
-                    className={`mt-3 w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm ${getColors(
-                      'bg-white border-gray-300 text-gray-700 hover:bg-gray-50 dark:hover:bg-gray-200',
-                      'bg-[var(--vscode-button-secondaryBackground)] text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]'
-                    )
-                      }`}
+                    className={`mt-3 w-full inline-flex justify-center rounded shadow-sm px-4 py-2 text-base font-medium focus:outline-none sm:mt-0 sm:w-auto sm:text-sm bg-[var(--vscode-button-secondaryBackground)] text-[var(--vscode-button-secondaryForeground)] hover:bg-[var(--vscode-button-secondaryHoverBackground)]`}
                     onClick={() => dismiss()}
                     ref={cancelButtonRef}
                   >
diff --git a/src/dashboardWebView/components/Preview/Preview.tsx b/src/dashboardWebView/components/Preview/Preview.tsx
index ca5b8be4..3dead453 100644
--- a/src/dashboardWebView/components/Preview/Preview.tsx
+++ b/src/dashboardWebView/components/Preview/Preview.tsx
@@ -3,7 +3,6 @@ import { ArrowRightIcon, ArrowTopRightOnSquareIcon, ArrowPathIcon } from '@heroi
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { GeneralCommands, PreviewCommands } from '../../../constants';
-import useThemeColors from '../../hooks/useThemeColors';
 import { EventData } from '@estruyf/vscode/dist/models';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
@@ -17,7 +16,6 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
 }: React.PropsWithChildren<IPreviewProps>) => {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [crntUrl, setCrntUrl] = useState<string | null>(null);
-  const { getColors } = useThemeColors();
   const [localeReady, setLocaleReady] = useState<boolean>(false);
 
   const onRefresh = () => {
@@ -87,27 +85,26 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
         {
           localeReady && (
             <div
-              className={`actions flex items-center space-x-2 px-2 ${getColors('text-vulcan-500 dark:text-whisper-100', 'text-[var(--vscode-list-activeSelectionForeground)]')
-                }`}
+              className={`actions flex items-center space-x-2 px-2 text-[var(--vscode-list-activeSelectionForeground)]`}
             >
               <button
                 title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
                 onClick={navigateToUrl}
-                className={getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}>
+                className={`hover:text-[var(--vscode-textLink-activeForeground)]`}>
                 <ArrowRightIcon className="w-4 h-4" aria-hidden="true" />
               </button>
 
               <button
                 title={l10n.t(LocalizationKey.dashboardPreviewButtonRefreshTitle)}
                 onClick={onRefresh}
-                className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
+                className={`mr-2 hover:text-[var(--vscode-textLink-activeForeground)]`}>
                 <ArrowPathIcon className="w-4 h-4" aria-hidden="true" />
               </button>
 
               <button
                 title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
                 onClick={openInBrowser}
-                className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
+                className={`mr-2 hover:text-[var(--vscode-textLink-activeForeground)]`}>
                 <ArrowTopRightOnSquareIcon className="w-4 h-4" aria-hidden="true" />
               </button>
             </div>
diff --git a/src/dashboardWebView/components/SnippetsView/Item.tsx b/src/dashboardWebView/components/SnippetsView/Item.tsx
index f6e694ed..0e7a5da5 100644
--- a/src/dashboardWebView/components/SnippetsView/Item.tsx
+++ b/src/dashboardWebView/components/SnippetsView/Item.tsx
@@ -17,7 +17,6 @@ import { FEATURE_FLAG } from '../../../constants';
 import { SnippetParser } from '../../../helpers/SnippetParser';
 import { Snippet, Snippets } from '../../../models';
 import { DashboardMessage } from '../../DashboardMessage';
-import useThemeColors from '../../hooks/useThemeColors';
 import { ModeAtom, SettingsSelector, ViewDataSelector } from '../../state';
 import { QuickAction } from '../Menu';
 import { Alert } from '../Modals/Alert';
@@ -42,7 +41,6 @@ export const Item: React.FunctionComponent<IItemProps> = ({
   const [showInsertDialog, setShowInsertDialog] = useState(false);
   const [showEditDialog, setShowEditDialog] = useState(false);
   const [showAlert, setShowAlert] = React.useState(false);
-  const { getColors } = useThemeColors();
 
   const [snippetTitle, setSnippetTitle] = useState<string>('');
   const [snippetDescription, setSnippetDescription] = useState<string>('');
@@ -163,17 +161,9 @@ export const Item: React.FunctionComponent<IItemProps> = ({
 
   return (
     <>
-      <li className={`group relative overflow-hidden shadow-md hover:shadow-xl dark:shadow-none border p-4 space-y-2 rounded ${getColors(
-        'bg-gray-50 dark:bg-vulcan-200 dark:hover:bg-vulcan-100 border-gray-200 dark:border-vulcan-50',
-        'bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] border-[var(--frontmatter-border)]'
-      )
-        }`}>
+      <li className={`group relative overflow-hidden shadow-md hover:shadow-xl dark:shadow-none border p-4 space-y-2 rounded bg-[var(--vscode-sideBar-background)] hover:bg-[var(--vscode-list-hoverBackground)] border-[var(--frontmatter-border)]`}>
         <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-          <CodeBracketIcon className={`w-64 h-64 opacity-5 ${getColors(
-            'text-vulcan-200 dark:text-gray-400',
-            'text-[var(--vscode-foreground)]'
-          )
-            }`} />
+          <CodeBracketIcon className={`w-64 h-64 opacity-5 text-[var(--vscode-foreground)]`} />
         </div>
 
         <h2
@@ -195,11 +185,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           alternative={
             insertToContent ? (
               <div className={`absolute top-4 right-4 flex flex-col space-y-4`}>
-                <div className={`flex items-center border border-transparent rounded-full p-2 -mr-2 -mt-2 ${getColors(
-                  'group-hover:bg-gray-200 dark:group-hover:bg-vulcan-200 group-hover:border-gray-100 dark:group-hover:border-vulcan-50',
-                  'group-hover:bg-[var(--vscode-sideBar-background)] group-hover:border-[var(--frontmatter-border)]'
-                )
-                  }`}>
+                <div className={`flex items-center border border-transparent rounded-full p-2 -mr-2 -mt-2 group-hover:bg-[var(--vscode-sideBar-background)] group-hover:border-[var(--frontmatter-border)]`}>
                   <div className="group-hover:hidden">
                     <EllipsisHorizontalIcon className="w-4 h-4" />
                   </div>
@@ -217,11 +203,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           }
         >
           <div className={`absolute top-4 right-4 flex flex-col space-y-4`}>
-            <div className={`flex items-center border border-transparent rounded-full p-2 -mr-2 -mt-2 ${getColors(
-              'group-hover:bg-gray-200 dark:group-hover:bg-vulcan-200 group-hover:border-gray-100 dark:group-hover:border-vulcan-50',
-              'group-hover:bg-[var(--vscode-sideBar-background)] group-hover:border-[var(--frontmatter-border)]'
-            )
-              }`}>
+            <div className={`flex items-center border border-transparent rounded-full p-2 -mr-2 -mt-2 group-hover:bg-[var(--vscode-sideBar-background)] group-hover:border-[var(--frontmatter-border)]`}>
               <div className="group-hover:hidden">
                 <EllipsisHorizontalIcon className="w-4 h-4" />
               </div>
@@ -261,11 +243,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           </div>
         </FeatureFlag>
 
-        <p className={`text-xs ${getColors(
-          'text-vulcan-200 dark:text-whisper-800',
-          'text-[var(--vscode-foreground)]'
-        )
-          }`}>{snippet.description}</p>
+        <p className={`text-xs text-[var(--vscode-foreground)]`}>{snippet.description}</p>
       </li>
 
       {showInsertDialog && (
diff --git a/src/dashboardWebView/components/SnippetsView/NewForm.tsx b/src/dashboardWebView/components/SnippetsView/NewForm.tsx
index e3d19385..3492da79 100644
--- a/src/dashboardWebView/components/SnippetsView/NewForm.tsx
+++ b/src/dashboardWebView/components/SnippetsView/NewForm.tsx
@@ -1,7 +1,6 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
 import * as React from 'react';
 import { GeneralCommands } from '../../../constants';
-import useThemeColors from '../../hooks/useThemeColors';
 import { SnippetInput } from './SnippetInput';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
@@ -28,8 +27,6 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
   onDescriptionUpdate,
   onBodyUpdate
 }: React.PropsWithChildren<INewFormProps>) => {
-  const { getColors } = useThemeColors();
-
   const openLink = () => {
     Messenger.send(
       GeneralCommands.toVSCode.openLink,
@@ -43,7 +40,7 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
         <label htmlFor={`title`} className="block text-sm font-medium capitalize">
           {l10n.t(LocalizationKey.commonTitle)}
           {' '}
-          <span className={getColors(`text-red-400`, `text-[var(--vscode-notificationsErrorIcon-foreground)]`)} title="Required field">
+          <span className={`text-[var(--vscode-editorError-foreground)]`} title="Required field">
             *
           </span>
         </label>
@@ -75,7 +72,7 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
         <label htmlFor={`snippet`} className="block text-sm font-medium capitalize">
           {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputSnippetLabel)}
           {' '}
-          <span className="text-red-400" title="Required field">
+          <span className="text-[var(--vscode-editorError-foreground)]" title="Required field">
             *
           </span>
         </label>
@@ -103,18 +100,13 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
               type="checkbox"
               checked={isMediaSnippet}
               onChange={(e) => onMediaSnippetUpdate(e.currentTarget.checked)}
-              className={`h-4 w-4 rounded ${getColors(
-                `focus:ring-teal-500 text-teal-600 border-gray-300 dark:border-vulcan-50`,
-                `focus:ring-[var(--frontmatter-button-background)] text-[var(--frontmatter-button-background)] border-[var(--frontmatter-border)]`
-              )
-                }`}
+              className={`h-4 w-4 rounded focus:ring-[var(--frontmatter-button-background)] text-[var(--frontmatter-button-background)] border-[var(--frontmatter-border)]`}
             />
           </div>
           <div className="ml-3 text-sm">
             <label
               htmlFor="isMediaSnippet"
-              className={`font-medium ${getColors(`text-vulcan-100 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)
-                }`}
+              className={`font-medium text-[var(--vscode-editor-foreground)]`}
             >
               {l10n.t(LocalizationKey.dashboardSnippetsViewNewFormSnippetInputIsMediaSnippetCheckboxLabel)}
             </label>
diff --git a/src/dashboardWebView/components/SnippetsView/SnippetForm.tsx b/src/dashboardWebView/components/SnippetsView/SnippetForm.tsx
index dcc10dd7..bcb8c785 100644
--- a/src/dashboardWebView/components/SnippetsView/SnippetForm.tsx
+++ b/src/dashboardWebView/components/SnippetsView/SnippetForm.tsx
@@ -6,7 +6,6 @@ import { processKnownPlaceholders } from '../../../helpers/PlaceholderHelper';
 import { SnippetParser } from '../../../helpers/SnippetParser';
 import { Snippet, SnippetField, SnippetInfoField, SnippetSpecialPlaceholders } from '../../../models';
 import { DashboardMessage } from '../../DashboardMessage';
-import useThemeColors from '../../hooks/useThemeColors';
 import { SettingsAtom, ViewDataSelector } from '../../state';
 import { SnippetInputField } from './SnippetInputField';
 import { SNIPPET } from '../../../constants/Snippet';
@@ -31,7 +30,6 @@ const SnippetForm: React.ForwardRefRenderFunction<SnippetFormHandle, ISnippetFor
   const viewData = useRecoilValue(ViewDataSelector);
   const [fields, setFields] = useState<SnippetField[]>([]);
   const settings = useRecoilValue(SettingsAtom);
-  const { getColors } = useThemeColors();
 
   const onTextChange = useCallback(
     (field: SnippetField, value: string) => {
@@ -169,11 +167,7 @@ ${snippetBody}
 
   return (
     <div>
-      <pre className={`border p-2 whitespace-pre-wrap break-words max-h-64 overflow-auto rounded ${getColors(
-        'border-opacity-40',
-        'border-[var(--frontmatter-border)] bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]',
-      )
-        }`}>
+      <pre className={`border p-2 whitespace-pre-wrap break-words max-h-64 overflow-auto rounded border-[var(--frontmatter-border)] bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]`}>
         {snippetBody}
       </pre>
 
diff --git a/src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx b/src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx
index bed98fdd..16126f70 100644
--- a/src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx
+++ b/src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import { Choice, SnippetField, SnippetInfoField } from '../../../models';
-import useThemeColors from '../../hooks/useThemeColors';
 import { useEffect } from 'react';
 import { TextField } from '../Common/TextField';
 
@@ -16,7 +15,6 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
   fieldInfo,
   onValueChange
 }: React.PropsWithChildren<ISnippetInputFieldProps>) => {
-  const { getColors } = useThemeColors();
 
   useEffect(() => {
     if (fieldInfo) {
diff --git a/src/dashboardWebView/components/SnippetsView/Snippets.tsx b/src/dashboardWebView/components/SnippetsView/Snippets.tsx
index e71fab84..5fdf2f9e 100644
--- a/src/dashboardWebView/components/SnippetsView/Snippets.tsx
+++ b/src/dashboardWebView/components/SnippetsView/Snippets.tsx
@@ -8,7 +8,6 @@ import { FEATURE_FLAG } from '../../../constants';
 import { TelemetryEvent } from '../../../constants/TelemetryEvent';
 import { SnippetParser } from '../../../helpers/SnippetParser';
 import { DashboardMessage } from '../../DashboardMessage';
-import useThemeColors from '../../hooks/useThemeColors';
 import { ModeAtom, SettingsSelector, ViewDataSelector } from '../../state';
 import { FilterInput } from '../Header/FilterInput';
 import { PageLayout } from '../Layout/PageLayout';
@@ -33,7 +32,6 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
   const [showCreateDialog, setShowCreateDialog] = useState(false);
   const [mediaSnippet, setMediaSnippet] = useState(false);
   const [snippetFilter, setSnippetFilter] = useState<string>('');
-  const { getColors } = useThemeColors();
 
   const snippets = settings?.snippets || {};
   const snippetKeys = useMemo(() => {
@@ -92,8 +90,7 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
       header={
         <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.snippets.manage}>
           <div
-            className={`py-3 px-4 flex items-center justify-between border-b ${getColors(`border-gray-300 dark:border-vulcan-100`, `border-[var(--frontmatter-border)]`)
-              }`}
+            className={`py-3 px-4 flex items-center justify-between border-b border-[var(--frontmatter-border)]`}
             aria-label={l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsAriaLabel)}
           >
             <FilterInput
@@ -107,11 +104,7 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
 
             <div className="flex flex-1 justify-end">
               <button
-                className={`inline-flex items-center px-3 py-1 rounded text-xs leading-4 font-medium focus:outline-none ${getColors(
-                  `text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 disabled:bg-gray-500`,
-                  `text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
-                )
-                  }`}
+                className={`inline-flex items-center px-3 py-1 rounded text-xs leading-4 font-medium focus:outline-none text-[var(--vscode-button-foreground)] bg-[var(--frontmatter-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`}
                 title={l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsButtonCreate)}
                 onClick={() => setShowCreateDialog(true)}
               >
@@ -145,15 +138,14 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
           </ul>
         ) : (
           <div className="w-full h-full flex items-center justify-center text-white">
-            <div className={`flex flex-col items-center ${getColors('text-gray-500 dark:text-whisper-900', 'text-[var(--frontmatter-text)]')
-              }`}>
+            <div className={`flex flex-col items-center text-[var(--frontmatter-text)]`}>
               <CodeBracketIcon className="w-32 h-32" />
               <p className="text-3xl mt-2">
                 {l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsEmptyMessage)}
               </p>
               <p className="text-xl mt-4">
                 <a
-                  className={getColors(`text-teal-700 hover:text-teal-900`, `text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]`)}
+                  className={`text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]`}
                   href={`https://frontmatter.codes/docs/snippets`}
                   title={l10n.t(LocalizationKey.dashboardSnippetsViewSnippetsReadMore)}
                 >
diff --git a/src/dashboardWebView/components/Steps/StepsToGetStarted.tsx b/src/dashboardWebView/components/Steps/StepsToGetStarted.tsx
index d4640e53..5b873d64 100644
--- a/src/dashboardWebView/components/Steps/StepsToGetStarted.tsx
+++ b/src/dashboardWebView/components/Steps/StepsToGetStarted.tsx
@@ -10,7 +10,6 @@ import { MenuItem } from '../Menu';
 import { Framework, StaticFolder, Template } from '../../../models';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 import { FrameworkDetectors } from '../../../constants/FrameworkDetectors';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { SelectItem } from './SelectItem';
@@ -31,8 +30,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
   const [framework, setFramework] = useState<string | null>(null);
   const [taxImported, setTaxImported] = useState<boolean>(false);
   const [templates, setTemplates] = useState<Template[]>([]);
-  const [astroCollectionsStatus, setAstroCollectionsStatus] = useState<Status>(Status.Optional)
-  const { getColors } = useThemeColors();
+  const [astroCollectionsStatus, setAstroCollectionsStatus] = useState<Status>(Status.Optional);
 
   const frameworks: Framework[] = FrameworkDetectors.map((detector: any) => detector.framework);
 
@@ -108,29 +106,17 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
 
             <Menu as="div" className="relative inline-block text-left mt-4">
               <div>
-                <Menu.Button className={`group flex justify-center p-2 rounded-md border ${getColors(
-                  'text-vulcan-500 hover:text-vulcan-600 dark:text-whisper-500 dark:hover:text-whisper-600 border-vulcan-400 dark:border-white',
-                  'text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]'
-                )
-                  }`}>
+                <Menu.Button className={`group flex justify-center p-2 rounded-md border text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)]`}>
                   {framework ? framework : l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedFrameworkSelect)}
                   <ChevronDownIcon
-                    className={`flex-shrink-0 -mr-1 ml-1 h-5 w-5 ${getColors(
-                      'text-gray-400 group-hover:text-gray-500 dark:text-whisper-600 dark:group-hover:text-whisper-700',
-                      ''
-                    )
-                      }`}
+                    className={`flex-shrink-0 -mr-1 ml-1 h-5 w-5`}
                     aria-hidden="true"
                   />
                 </Menu.Button>
               </div>
 
               <Menu.Items
-                className={`w-40 origin-top-left absolute left-0 z-10 mt-2 rounded-md shadow-2xl ring-1 ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto ${getColors(
-                  'bg-white dark:bg-vulcan-500 ring-vulcan-400 dark:ring-white',
-                  'bg-[var(--vscode-sideBar-background)] ring-[var(--frontmatter-border)]'
-                )
-                  }`}
+                className={`w-40 origin-top-left absolute left-0 z-10 mt-2 rounded-md shadow-2xl ring-1 ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto bg-[var(--vscode-sideBar-background)] ring-[var(--frontmatter-border)]`}
               >
                 <div className="py-1">
                   <MenuItem
diff --git a/src/dashboardWebView/components/TaxonomyView/TaxonomyLookup.tsx b/src/dashboardWebView/components/TaxonomyView/TaxonomyLookup.tsx
index 5cdf1d69..0d8b055e 100644
--- a/src/dashboardWebView/components/TaxonomyView/TaxonomyLookup.tsx
+++ b/src/dashboardWebView/components/TaxonomyView/TaxonomyLookup.tsx
@@ -6,7 +6,6 @@ import { useRecoilValue } from 'recoil';
 import { getTaxonomyField } from '../../../helpers/getTaxonomyField';
 import { useNavigate } from 'react-router-dom';
 import { routePaths } from '../..';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -23,7 +22,6 @@ export const TaxonomyLookup: React.FunctionComponent<ITaxonomyLookupProps> = ({
 }: React.PropsWithChildren<ITaxonomyLookupProps>) => {
   const settings = useRecoilValue(SettingsSelector);
   const navigate = useNavigate();
-  const { getColors } = useThemeColors();
 
   const total: number | undefined = useMemo(() => {
     if (!taxonomy || !value || !pages || !settings?.contentTypes) {
@@ -58,7 +56,7 @@ export const TaxonomyLookup: React.FunctionComponent<ITaxonomyLookupProps> = ({
   if (taxonomy === 'tags' || taxonomy === 'categories') {
     return (
       <button
-        className={total ? `font-bold ${getColors(`text-teal-900 hover:text-teal-600 `, `text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]`)}` : ``}
+        className={total ? `font-bold text-[var(--frontmatter-link)] hover:text-[var(--frontmatter-link-hover)]` : ``}
         title={total ? l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyLookupButtonTitle, value, taxonomy) : ``}
         onClick={onNavigate}
       >
diff --git a/src/dashboardWebView/components/UnknownView/UnknownView.tsx b/src/dashboardWebView/components/UnknownView/UnknownView.tsx
index ba4abd20..db71c7ca 100644
--- a/src/dashboardWebView/components/UnknownView/UnknownView.tsx
+++ b/src/dashboardWebView/components/UnknownView/UnknownView.tsx
@@ -1,6 +1,5 @@
 import { StopIcon } from '@heroicons/react/24/outline';
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 
@@ -9,11 +8,9 @@ export interface IUnknownViewProps { }
 export const UnknownView: React.FunctionComponent<IUnknownViewProps> = (
   _: React.PropsWithChildren<IUnknownViewProps>
 ) => {
-  const { getColors } = useThemeColors();
-
   return (
     <div className={`w-full h-full flex items-center justify-center`}>
-      <div className={`flex flex-col items-center ${getColors(`text-gray-500 dark:text-whisper-900`, `text-[var(--frontmatter-text)]`)}`}>
+      <div className={`flex flex-col items-center text-[var(--frontmatter-text)]`}>
         <StopIcon className="w-32 h-32" />
         <p className="text-3xl mt-2">
           {l10n.t(LocalizationKey.dashboardUnkownViewTitle)}
diff --git a/src/dashboardWebView/components/WelcomeView/WelcomeLink.tsx b/src/dashboardWebView/components/WelcomeView/WelcomeLink.tsx
index 52fcffcc..4bd7f75b 100644
--- a/src/dashboardWebView/components/WelcomeView/WelcomeLink.tsx
+++ b/src/dashboardWebView/components/WelcomeView/WelcomeLink.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IWelcomeLinkProps {
   href: string;
@@ -7,17 +6,11 @@ export interface IWelcomeLinkProps {
 }
 
 export const WelcomeLink: React.FunctionComponent<IWelcomeLinkProps> = ({ href, title, children }: React.PropsWithChildren<IWelcomeLinkProps>) => {
-  const { getColors } = useThemeColors();
-
   return (
     <a
       href={href}
       title={title}
-      className={`flex items-center px-1 ${getColors(
-        'text-vulcan-300 hover:text-vulcan-500 dark:text-whisper-500 dark:hover:text-teal-500',
-        'text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]'
-      )
-        }`}
+      className={`flex items-center px-1 text-[var(--vscode-editor-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]`}
     >
       {children}
     </a>
diff --git a/src/dashboardWebView/hooks/index.ts b/src/dashboardWebView/hooks/index.ts
index df5f5509..cc133f3c 100644
--- a/src/dashboardWebView/hooks/index.ts
+++ b/src/dashboardWebView/hooks/index.ts
@@ -4,4 +4,3 @@ export * from './useMedia';
 export * from './useMessages';
 export * from './usePages';
 export * from './usePagination';
-export * from './useThemeColors';
diff --git a/src/dashboardWebView/hooks/useThemeColors.tsx b/src/dashboardWebView/hooks/useThemeColors.tsx
deleted file mode 100644
index 7a4fe2af..00000000
--- a/src/dashboardWebView/hooks/useThemeColors.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-import { useCallback } from 'react';
-import { useSettingsContext } from '../providers/SettingsProvider';
-
-export default function useThemeColors() {
-  const { experimental } = useSettingsContext();
-
-  const getColors = useCallback((defaultColors: string, themeColors: string) => {
-    // The feature is now enabled by default
-    return themeColors;
-  }, [experimental]);
-
-  return {
-    getColors
-  };
-}
\ No newline at end of file
diff --git a/src/dashboardWebView/styles.css b/src/dashboardWebView/styles.css
index 1334c41e..45f3bde0 100644
--- a/src/dashboardWebView/styles.css
+++ b/src/dashboardWebView/styles.css
@@ -87,7 +87,7 @@
       label {
         &::after {
           content: ' *';
-          @apply text-red-400;
+          @apply text-[var(--vscode-editorError-foreground)];
         }
       }
     }
@@ -97,7 +97,7 @@
     }
 
     .ant-form-item-has-error .ant-form-item-children-icon {
-      @apply absolute right-1 top-1 text-red-400;
+      @apply absolute right-1 top-1 text-[var(--vscode-editorError-foreground)];
 
       svg {
         @apply h-4 w-4;