From 5354619283a8b638371f228bdd870c4e147bebc3 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Tue, 7 Feb 2023 13:49:05 +0100
Subject: [PATCH] #505 - Theming for snippets view

---
 .../components/ChoiceButton.tsx               |  4 +-
 .../components/Contents/List.tsx              |  8 ++-
 .../components/Contents/Overview.tsx          |  6 +-
 .../components/Header/FilterInput.tsx         |  8 +--
 .../components/Header/Searchbox.tsx           |  2 +-
 .../components/Header/SyncButton.tsx          |  2 +-
 .../components/Media/FolderCreation.tsx       |  2 +-
 .../components/Media/Lightbox.tsx             |  7 ++-
 .../components/Media/Media.tsx                |  2 +-
 .../components/Menu/QuickAction.tsx           | 10 +++-
 .../components/Modals/Alert.tsx               |  7 ++-
 .../components/Modals/FormDialog.tsx          | 35 ++++++++++--
 .../components/SnippetsView/Item.tsx          | 37 ++++++++++--
 .../components/SnippetsView/NewForm.tsx       | 57 +++++++++++--------
 .../components/SnippetsView/SnippetForm.tsx   |  9 ++-
 .../components/SnippetsView/SnippetInput.tsx  | 48 ++++++++++++++++
 .../SnippetsView/SnippetInputField.tsx        | 24 +++++++-
 .../components/SnippetsView/Snippets.tsx      |  4 +-
 src/dashboardWebView/components/Spinner.tsx   |  7 ++-
 19 files changed, 222 insertions(+), 57 deletions(-)
 create mode 100644 src/dashboardWebView/components/SnippetsView/SnippetInput.tsx

diff --git a/src/dashboardWebView/components/ChoiceButton.tsx b/src/dashboardWebView/components/ChoiceButton.tsx
index 3b9a5548..f46002a2 100644
--- a/src/dashboardWebView/components/ChoiceButton.tsx
+++ b/src/dashboardWebView/components/ChoiceButton.tsx
@@ -29,6 +29,8 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({
       <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(--vscode-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
@@ -43,7 +45,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 ${
+            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(--vscode-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
diff --git a/src/dashboardWebView/components/Contents/List.tsx b/src/dashboardWebView/components/Contents/List.tsx
index 95cd8783..354bc579 100644
--- a/src/dashboardWebView/components/Contents/List.tsx
+++ b/src/dashboardWebView/components/Contents/List.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
+import useThemeColors from '../../hooks/useThemeColors';
 import { DashboardViewType } from '../../models';
 import { ViewSelector } from '../../state';
 
@@ -9,7 +10,8 @@ export const List: React.FunctionComponent<IListProps> = ({
   children
 }: React.PropsWithChildren<IListProps>) => {
   const view = useRecoilValue(ViewSelector);
-
+  const { getColors } = useThemeColors();
+  
   let className = '';
   if (view === DashboardViewType.Grid) {
     className = `grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`;
@@ -20,7 +22,9 @@ export const List: React.FunctionComponent<IListProps> = ({
   return (
     <ul role="list" className={className}>
       {view === DashboardViewType.List && (
-        <li className="px-5 relative uppercase text-vulcan-100 dark:text-whisper-900 py-2 border-b border-vulcan-50">
+        <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(--vscode-panel-border)]')
+        }`}>
           <div className={`grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8`}>
             <div className="col-span-8">Title</div>
             <div className="col-span-2">Date</div>
diff --git a/src/dashboardWebView/components/Contents/Overview.tsx b/src/dashboardWebView/components/Contents/Overview.tsx
index 39b8a952..828f6a90 100644
--- a/src/dashboardWebView/components/Contents/Overview.tsx
+++ b/src/dashboardWebView/components/Contents/Overview.tsx
@@ -12,6 +12,7 @@ import { GroupingSelector, PageAtom } from '../../state';
 import { Item } from './Item';
 import { List } from './List';
 import usePagination from '../../hooks/usePagination';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IOverviewProps {
   pages: Page[];
@@ -25,6 +26,7 @@ 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 pagedPages = useMemo(() => {
     if (pageSetNr) {
@@ -50,7 +52,9 @@ export const Overview: React.FunctionComponent<IOverviewProps> = ({
       <div className={`flex items-center justify-center h-full`}>
         <div className={`max-w-xl text-center`}>
           <FrontMatterIcon
-            className={`text-vulcan-300 dark:text-whisper-800 h-32 mx-auto opacity-90 mb-8`}
+            className={`h-32 mx-auto opacity-90 mb-8 ${
+              getColors('text-vulcan-300 dark:text-whisper-800', 'text-[var(--vscode-editor-foreground)]')
+            }`}
           />
           {settings && settings?.contentFolders?.length > 0 ? (
             <p className={`text-xl font-medium`}>No Markdown to show</p>
diff --git a/src/dashboardWebView/components/Header/FilterInput.tsx b/src/dashboardWebView/components/Header/FilterInput.tsx
index 2e7fcab2..52a4a0b3 100644
--- a/src/dashboardWebView/components/Header/FilterInput.tsx
+++ b/src/dashboardWebView/components/Header/FilterInput.tsx
@@ -1,4 +1,4 @@
-import { SearchIcon, XCircleIcon } from '@heroicons/react/outline';
+import { SearchIcon, XCircleIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 import useThemeColors from '../../hooks/useThemeColors';
 
@@ -35,10 +35,10 @@ export const FilterInput: React.FunctionComponent<IFilterInputProps> = ({
           <input
             type="text"
             name="search"
-            className={`block w-full py-2 pl-10 pr-3 sm:text-sm focus:outline-none appearance-none disabled:opacity-50 ${
+            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${
               getColors(
-                'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800',
-                'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)]'
+                'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
+                'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
               )
             }`}
             placeholder={placeholder || 'Search'}
diff --git a/src/dashboardWebView/components/Header/Searchbox.tsx b/src/dashboardWebView/components/Header/Searchbox.tsx
index 7db98fc6..50642116 100644
--- a/src/dashboardWebView/components/Header/Searchbox.tsx
+++ b/src/dashboardWebView/components/Header/Searchbox.tsx
@@ -52,7 +52,7 @@ export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({
           <input
             type="text"
             name="search"
-            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 ${
+            className={`block w-full py-2 pl-10 pr-3 sm:text-sm appearance-none disabled:opacity-50 rounded ${
               getColors(
                 'bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none',
                 'bg-[var(--vscode-input-background)] text-[var(--vscode-input-foreground)] border-[var(--vscode-editorWidget-border)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
diff --git a/src/dashboardWebView/components/Header/SyncButton.tsx b/src/dashboardWebView/components/Header/SyncButton.tsx
index 38915c1c..ff12499f 100644
--- a/src/dashboardWebView/components/Header/SyncButton.tsx
+++ b/src/dashboardWebView/components/Header/SyncButton.tsx
@@ -47,7 +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 ${
+        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(--vscode-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
diff --git a/src/dashboardWebView/components/Media/FolderCreation.tsx b/src/dashboardWebView/components/Media/FolderCreation.tsx
index 54b26744..1d15a07d 100644
--- a/src/dashboardWebView/components/Media/FolderCreation.tsx
+++ b/src/dashboardWebView/components/Media/FolderCreation.tsx
@@ -115,7 +115,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 ${
+        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(--vscode-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
diff --git a/src/dashboardWebView/components/Media/Lightbox.tsx b/src/dashboardWebView/components/Media/Lightbox.tsx
index 06e99da7..3b7ca0a1 100644
--- a/src/dashboardWebView/components/Media/Lightbox.tsx
+++ b/src/dashboardWebView/components/Media/Lightbox.tsx
@@ -23,7 +23,12 @@ 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 bg-black bg-opacity-50 z-50`}
+      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(--vscode-editor-background)] opacity-75`
+        )
+      }`}
     >
       <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 ca6ec9a5..4b68f6f5 100644
--- a/src/dashboardWebView/components/Media/Media.tsx
+++ b/src/dashboardWebView/components/Media/Media.tsx
@@ -177,7 +177,7 @@ export const Media: React.FunctionComponent<IMediaProps> = (
           <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-black bg-opacity-70'
+              'text-[var(--vscode-foreground)] bg-[var(--vscode-editor-background)] opacity-75'
             )
           }`}>
             <UploadIcon className={`h-32`} />
diff --git a/src/dashboardWebView/components/Menu/QuickAction.tsx b/src/dashboardWebView/components/Menu/QuickAction.tsx
index eee8f878..373091e9 100644
--- a/src/dashboardWebView/components/Menu/QuickAction.tsx
+++ b/src/dashboardWebView/components/Menu/QuickAction.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export interface IQuickActionProps {
   title: string;
@@ -10,12 +11,19 @@ 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 text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600`}
+      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(--vscode-list-activeSelectionForeground)]'
+        )
+      }`}
     >
       {children}
       <span className="sr-only">{title}</span>
diff --git a/src/dashboardWebView/components/Modals/Alert.tsx b/src/dashboardWebView/components/Modals/Alert.tsx
index acf890d4..901712a9 100644
--- a/src/dashboardWebView/components/Modals/Alert.tsx
+++ b/src/dashboardWebView/components/Modals/Alert.tsx
@@ -42,7 +42,12 @@ export const Alert: React.FunctionComponent<IAlertProps> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Dialog.Overlay className={`fixed inset-0 bg-black bg-opacity-75 transition-opacity`} />
+            <Dialog.Overlay className={`fixed inset-0 transition-opacity ${
+              getColors(
+                `bg-vulcan-500 bg-opacity-75`,
+                `bg-[var(--vscode-editor-background)] opacity-75`
+              )
+            }`} />
           </Transition.Child>
 
           {/* This element is to trick the browser into centering the modal contents. */}
diff --git a/src/dashboardWebView/components/Modals/FormDialog.tsx b/src/dashboardWebView/components/Modals/FormDialog.tsx
index cec42d75..65b5e128 100644
--- a/src/dashboardWebView/components/Modals/FormDialog.tsx
+++ b/src/dashboardWebView/components/Modals/FormDialog.tsx
@@ -1,6 +1,7 @@
 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;
@@ -24,6 +25,7 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
   children
 }: React.PropsWithChildren<IFormDialogProps>) => {
   const cancelButtonRef = useRef(null);
+  const { getColors } = useThemeColors();
 
   return (
     <Transition.Root show={true} as={Fragment}>
@@ -42,7 +44,12 @@ export const FormDialog: React.FunctionComponent<IFormDialogProps> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Dialog.Overlay className="fixed inset-0 bg-vulcan-500 bg-opacity-75 transition-opacity" />
+            <Dialog.Overlay className={`fixed inset-0 transition-opacity ${
+              getColors(
+                `bg-vulcan-500 bg-opacity-75`,
+                `bg-[var(--vscode-editor-background)] opacity-75`
+              )
+            }`} />
           </Transition.Child>
 
           {/* This element is to trick the browser into centering the modal contents. */}
@@ -59,11 +66,18 @@ 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 bg-white dark:bg-vulcan-500 rounded-lg 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 border-whisper-900">
+            <div className={`inline-block align-bottom rounded-lg 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-sideBar-background)] border-[var(--vscode-panel-border)]'
+              )
+            }`}>
               <div>
                 <Dialog.Title
                   as="h3"
-                  className="text-lg leading-6 font-medium text-vulcan-300 dark:text-whisper-900"
+                  className={`text-lg leading-6 font-medium ${
+                    getColors(`text-vulcan-300 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)
+                  }`}
                 >
                   {title}
                 </Dialog.Title>
@@ -77,15 +91,26 @@ 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 border border-transparent shadow-sm px-4 py-2 bg-teal-600 text-base font-medium text-white hover:bg-teal-700 dark:hover:bg-teal-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-30"
+                    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(--vscode-button-background)] text-[var(--vscode-button-foreground)] hover:bg-[var(--vscode-button-hoverBackground)]'
+                      )
+                    }`}
                     onClick={() => trigger()}
                     disabled={isSaveDisabled}
                   >
                     {okBtnText}
                   </button>
+                  
                   <button
                     type="button"
-                    className="mt-3 w-full inline-flex justify-center border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 dark:hover:bg-gray-200 focus:outline-none sm:mt-0 sm:w-auto sm:text-sm"
+                    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)]'
+                      )
+                    }`}
                     onClick={() => dismiss()}
                     ref={cancelButtonRef}
                   >
diff --git a/src/dashboardWebView/components/SnippetsView/Item.tsx b/src/dashboardWebView/components/SnippetsView/Item.tsx
index 96b4f0b6..f1c147f5 100644
--- a/src/dashboardWebView/components/SnippetsView/Item.tsx
+++ b/src/dashboardWebView/components/SnippetsView/Item.tsx
@@ -17,6 +17,7 @@ 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';
@@ -39,6 +40,7 @@ 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>('');
@@ -143,9 +145,19 @@ export const Item: React.FunctionComponent<IItemProps> = ({
 
   return (
     <>
-      <li className="group relative overflow-hidden bg-gray-50 dark:bg-vulcan-200 shadow-md hover:shadow-xl dark:shadow-none dark:hover:bg-vulcan-100 border border-gray-200 dark:border-vulcan-50 p-4 space-y-2">
+      <li className={`group relative overflow-hidden shadow-md hover:shadow-xl dark:shadow-none border p-4 space-y-2 ${
+        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(--vscode-panel-border)]'
+        )        
+      }`}>
         <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-          <CodeIcon className="w-64 h-64 opacity-5 text-vulcan-200 dark:text-gray-400" />
+          <CodeIcon className={`w-64 h-64 opacity-5 ${
+            getColors(
+              'text-vulcan-200 dark:text-gray-400',
+              'text-[var(--vscode-foreground)]'
+            )
+          }`} />
         </div>
 
         <h2
@@ -167,7 +179,12 @@ 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 group-hover:bg-gray-200 dark:group-hover:bg-vulcan-200 group-hover:border-gray-100 dark:group-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
+                <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(--vscode-panel-border)]'
+                  )
+                }`}>
                   <div className="group-hover:hidden">
                     <DotsHorizontalIcon className="w-4 h-4" />
                   </div>
@@ -183,7 +200,12 @@ 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 group-hover:bg-gray-200 dark:group-hover:bg-vulcan-200 group-hover:border-gray-100 dark:group-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
+            <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(--vscode-panel-border)]'
+                  )
+                }`}>
               <div className="group-hover:hidden">
                 <DotsHorizontalIcon className="w-4 h-4" />
               </div>
@@ -217,7 +239,12 @@ export const Item: React.FunctionComponent<IItemProps> = ({
           </div>
         </FeatureFlag>
 
-        <p className="text-xs text-vulcan-200 dark:text-whisper-800">{snippet.description}</p>
+        <p className={`text-xs ${
+          getColors(
+            'text-vulcan-200 dark:text-whisper-800',
+            '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 aa1f2c7e..e5f95336 100644
--- a/src/dashboardWebView/components/SnippetsView/NewForm.tsx
+++ b/src/dashboardWebView/components/SnippetsView/NewForm.tsx
@@ -1,6 +1,8 @@
 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';
 
 export interface INewFormProps {
   title: string;
@@ -24,6 +26,8 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
   onDescriptionUpdate,
   onBodyUpdate
 }: React.PropsWithChildren<INewFormProps>) => {
+  const { getColors } = useThemeColors();
+
   const openLink = () => {
     Messenger.send(
       GeneralCommands.toVSCode.openLink,
@@ -36,19 +40,17 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
       <div>
         <label htmlFor={`title`} className="block text-sm font-medium capitalize">
           Title{' '}
-          <span className="text-red-400" title="Required field">
+          <span className={getColors(`text-red-400`, `text-[var(--vscode-notificationsErrorIcon-foreground)]`)} title="Required field">
             *
           </span>
         </label>
         <div className="mt-1">
-          <input
-            type="text"
-            name={`title`}
-            value={title || ''}
-            placeholder={`Snippet title`}
-            className="focus:outline-none block w-full sm:text-sm border-gray-300 text-vulcan-500"
+          <SnippetInput 
+            name='title'
+            value={title}
+            placeholder='Snippet title'
             onChange={(e) => onTitleUpdate(e.currentTarget.value)}
-          />
+            />
         </div>
       </div>
 
@@ -57,14 +59,12 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
           Description
         </label>
         <div className="mt-1">
-          <input
-            type="text"
-            name={`description`}
-            value={description || ''}
-            placeholder={`Snippet description`}
-            className="focus:outline-none block w-full sm:text-sm border-gray-300 text-vulcan-500"
+          <SnippetInput 
+            name='description'
+            value={description}
+            placeholder='Snippet description'
             onChange={(e) => onDescriptionUpdate(e.currentTarget.value)}
-          />
+            />
         </div>
       </div>
 
@@ -76,13 +76,13 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
           </span>
         </label>
         <div className="mt-1">
-          <textarea
-            name={`snippet`}
-            value={body || ''}
-            placeholder={`Snippet content`}
-            className="focus:outline-none block w-full sm:text-sm border-gray-300 text-vulcan-500"
+          <SnippetInput 
+            name='snippet'
+            value={body}
+            placeholder='Snippet content'
             onChange={(e) => onBodyUpdate(e.currentTarget.value)}
-          />
+            isTextArea
+            />
         </div>
       </div>
 
@@ -99,23 +99,30 @@ export const NewForm: React.FunctionComponent<INewFormProps> = ({
               type="checkbox"
               checked={isMediaSnippet}
               onChange={(e) => onMediaSnippetUpdate(e.currentTarget.checked)}
-              className="focus:ring-teal-500 h-4 w-4 text-teal-600 border-gray-300 rounded"
+              className={`h-4 w-4 rounded ${
+                getColors(
+                  `focus:ring-teal-500 text-teal-600 border-gray-300 dark:border-vulcan-50`,
+                  `focus:ring-[var(--vscode-button-background)] text-[var(--vscode-button-background)] border-[var(--vscode-editorWidget-border)]`
+                )
+              }`}
             />
           </div>
           <div className="ml-3 text-sm">
             <label
               htmlFor="isMediaSnippet"
-              className="font-medium text-vulcan-100 dark:text-whisper-900"
+              className={`font-medium ${
+                getColors(`text-vulcan-100 dark:text-whisper-900`, `text-[var(--vscode-editor-foreground)]`)
+              }`}
             >
               Media snippet
             </label>
-            <p id="isMediaSnippet-description" className="text-vulcan-300 dark:text-whisper-500">
+            <p id="isMediaSnippet-description" className={getColors('text-vulcan-300 dark:text-whisper-500', `text-[var(--vscode-foreground)]`)}>
               Use the current snippet for inserting media files into your content.
             </p>
             <p>
               Check our{' '}
               <button
-                className="text-teal-700 hover:text-teal-500"
+                className={getColors('text-teal-700 hover:text-teal-500', 'text-[var(--vscode-textLink-foreground)] hover:text-[var(--vscode-textLink-activeForeground)]')}
                 onClick={openLink}
                 title="media snippet placeholders"
               >
diff --git a/src/dashboardWebView/components/SnippetsView/SnippetForm.tsx b/src/dashboardWebView/components/SnippetsView/SnippetForm.tsx
index 2cb4d6a6..6c3d856d 100644
--- a/src/dashboardWebView/components/SnippetsView/SnippetForm.tsx
+++ b/src/dashboardWebView/components/SnippetsView/SnippetForm.tsx
@@ -6,6 +6,7 @@ import { processKnownPlaceholders } from '../../../helpers/PlaceholderHelper';
 import { SnippetParser } from '../../../helpers/SnippetParser';
 import { Snippet, SnippetField, SnippetSpecialPlaceholders } from '../../../models';
 import { DashboardMessage } from '../../DashboardMessage';
+import useThemeColors from '../../hooks/useThemeColors';
 import { SettingsAtom, ViewDataSelector } from '../../state';
 import { SnippetInputField } from './SnippetInputField';
 
@@ -27,6 +28,7 @@ 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) => {
@@ -146,7 +148,12 @@ const SnippetForm: React.ForwardRefRenderFunction<SnippetFormHandle, ISnippetFor
 
   return (
     <div>
-      <pre className="border border-opacity-40 p-2 whitespace-pre-wrap break-words max-h-64 overflow-auto">
+      <pre className={`border p-2 whitespace-pre-wrap break-words max-h-64 overflow-auto rounded ${
+        getColors(
+          'border-opacity-40',
+          'border-[var(--vscode-panel-border)] bg-[var(--vscode-editor-background)] text-[var(--vscode-editor-foreground)]',
+        )
+      }`}>
         {snippetBody}
       </pre>
 
diff --git a/src/dashboardWebView/components/SnippetsView/SnippetInput.tsx b/src/dashboardWebView/components/SnippetsView/SnippetInput.tsx
new file mode 100644
index 00000000..50f94c9f
--- /dev/null
+++ b/src/dashboardWebView/components/SnippetsView/SnippetInput.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
+
+export interface ISnippetInputProps {
+  name: string;
+  value?: string;
+  placeholder?: string;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  isTextArea?: boolean;
+}
+
+export const SnippetInput: React.FunctionComponent<ISnippetInputProps> = ({ name, value, placeholder, isTextArea, onChange }: React.PropsWithChildren<ISnippetInputProps>) => {
+  const { getColors } = useThemeColors();
+
+  if (isTextArea) {
+    return (
+      <textarea
+        name={name}
+        value={value || ''}
+        placeholder={placeholder}
+        rows={5}
+        className={`block w-full sm:text-sm ${
+          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-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+          )
+        }`}
+        onChange={onChange}
+      />
+    )
+  }
+
+  return (
+    <input
+      type="text"
+      name={name}
+      value={value || ''}
+      placeholder={placeholder}
+      className={`block w-full sm:text-sm ${
+        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-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+        )
+      }`}
+      onChange={onChange}
+    />
+  );
+};
\ No newline at end of file
diff --git a/src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx b/src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx
index 416aa942..b699d266 100644
--- a/src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx
+++ b/src/dashboardWebView/components/SnippetsView/SnippetInputField.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ChevronDownIcon } from '@heroicons/react/outline';
 import { Choice, SnippetField } from '../../../models';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export interface ISnippetInputFieldProps {
   field: SnippetField;
@@ -11,13 +12,20 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
   field,
   onValueChange
 }: React.PropsWithChildren<ISnippetInputFieldProps>) => {
+  const { getColors } = useThemeColors();
+  
   if (field.type === 'choice') {
     return (
       <div className="relative">
         <select
           name={field.name}
           value={field.value || ''}
-          className="focus:outline-none block w-full sm:text-sm border-gray-300 text-vulcan-500"
+          className={`block w-full sm:text-sm ${
+            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-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+            )
+          }`}
           onChange={(e) => onValueChange(field, e.target.value)}
         >
           {(field.choices || [])?.map((option: string | Choice, index: number) =>
@@ -43,7 +51,12 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
       <textarea
         name={field.name}
         value={field.value || ''}
-        className="focus:outline-none block w-full sm:text-sm border-gray-300 text-vulcan-500 h-auto"
+        className={`block w-full sm:text-sm h-auto ${
+          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-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+          )
+        }`}
         onChange={(e) => onValueChange(field, e.currentTarget.value)}
         rows={4}
       />
@@ -55,7 +68,12 @@ export const SnippetInputField: React.FunctionComponent<ISnippetInputFieldProps>
       type="text"
       name={field.name}
       value={field.value || ''}
-      className="focus:outline-none block w-full sm:text-sm border-gray-300 text-vulcan-500"
+      className={`block w-full sm:text-sm ${
+        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-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-transparent'
+        )
+      }`}
       onChange={(e) => onValueChange(field, e.currentTarget.value)}
     />
   );
diff --git a/src/dashboardWebView/components/SnippetsView/Snippets.tsx b/src/dashboardWebView/components/SnippetsView/Snippets.tsx
index 3851e484..e4f765dc 100644
--- a/src/dashboardWebView/components/SnippetsView/Snippets.tsx
+++ b/src/dashboardWebView/components/SnippetsView/Snippets.tsx
@@ -84,7 +84,7 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
         <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(--vscode-sideBar-border)]`)
+              getColors(`border-gray-300 dark:border-vulcan-100`, `border-[var(--vscode-panel-border)]`)
             }`}
             aria-label="snippets header"
           >
@@ -99,7 +99,7 @@ export const Snippets: React.FunctionComponent<ISnippetsProps> = (
 
             <div className="flex flex-1 justify-end">
               <button
-                className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium focus:outline-none ${
+                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(--vscode-button-background)] hover:bg-[var(--vscode-button-hoverBackground)] disabled:opacity-50`
diff --git a/src/dashboardWebView/components/Spinner.tsx b/src/dashboardWebView/components/Spinner.tsx
index 6e3eabc9..bb7a5d52 100644
--- a/src/dashboardWebView/components/Spinner.tsx
+++ b/src/dashboardWebView/components/Spinner.tsx
@@ -10,7 +10,12 @@ export const Spinner: React.FunctionComponent<ISpinnerProps> = (
   
   return (
     <div
-      className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center bg-black bg-opacity-50 z-50`}
+      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(--vscode-editor-background)] opacity-75`
+        )
+      }`}
     >
       <div className={`loader ease-linear rounded-full border-8 border-t-8 h-16 w-16 ${
         getColors(`border-gray-50 border-t-teal-500`, `border-[var(--vscode-activityBar-inactiveForeground)] border-t-[var(--vscode-activityBarBadge-background)]`)