Enhancement: VS Code theme support for the dashboards #505

src/dashboardWebView/components/Header/Tab.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useLocation } from 'react-router-dom';
+import useThemeColors from '../../hooks/useThemeColors';
 import { NavigationType } from '../../models';
 
 export interface ITabProps {
@@ -13,13 +14,24 @@ export const Tab: React.FunctionComponent<ITabProps> = ({
   children
 }: React.PropsWithChildren<ITabProps>) => {
   const location = useLocation();
+  const { getColors } = useThemeColors();
 
   return (
     <button
-      className={`h-full flex items-center py-2 px-4 text-sm font-medium text-center border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 ${
+      className={`h-full flex items-center py-2 px-4 text-sm font-medium text-center border-b-2 border-transparent ${
+        getColors(
+          'hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300',
+          'text-[var(--vscode-tab-inactiveForeground)] hover:border-[var(--vscode-list-activeSelectionForeground)] hover:text-[var(--vscode-list-activeSelectionForeground)]'
+        )
+      } ${
         location.pathname === `/${navigationType}`
-          ? 'border-vulcan-500 text-vulcan-500  dark:border-whisper-500 dark:text-whisper-500'
-          : 'text-gray-500 dark:text-gray-400'
+          ? getColors(
+              'text-vulcan-500 dark:text-whisper-500 border-vulcan-500 dark:border-whisper-500',
+              'text-[var(--vscode-tab-activeForeground)] border-[var(--vscode-tab-activeForeground)]'
+            ) : getColors(
+              'text-gray-500 dark:text-gray-400',
+              'text-[var(--vscode-tab-inactiveForeground)]'
+            )
       }`}
       type="button"
       role="tab"

src/dashboardWebView/components/Layout/NavigationBar.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export interface INavigationBarProps {
   title?: string;
@@ -10,15 +11,30 @@ 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 border-gray-200 dark:border-vulcan-300`}
+      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(--vscode-panel-border)]'
+      )}`}
     >
-      {title && <h2 className={`text-lg text-gray-500 dark:text-whisper-900`}>{title}</h2>}
+      {title && <h2 className={`text-lg ${
+        getColors(
+          'text-gray-500 dark:text-whisper-900',
+          'text-[var(--vscode-tab-inactiveForeground)]'
+        )
+      }`}>{title}</h2>}
 
       <nav className={`flex-1 py-4 -mx-4 h-full`}>
         <div
-          className={`divide-y divide-gray-200 dark:divide-vulcan-300 border-t border-b border-gray-200 dark:border-vulcan-300`}
+          className={`divide-y border-t border-b  ${
+            getColors(
+              'divide-gray-200 dark:divide-vulcan-300 border-gray-200 dark:border-vulcan-300',
+              'divide-[var(--vscode-panel-border)] border-[var(--vscode-panel-border)]'
+            )
+          }`}
         >
           <div>{children}</div>
         </div>

src/dashboardWebView/components/Layout/NavigationItem.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useThemeColors from '../../hooks/useThemeColors';
 
 export interface INavigationItemProps {
   isSelected?: boolean;
@@ -10,13 +11,25 @@ export const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
   onClick,
   children
 }: React.PropsWithChildren<INavigationItemProps>) => {
+  const { getColors } = useThemeColors();
+  
   return (
     <button
       type="button"
-      className={`px-4 py-2 flex items-center text-sm font-medium w-full text-left hover:bg-gray-200 dark:hover:bg-vulcan-400 hover:text-vulcan-500 dark:hover:text-whisper-500 cursor-pointer ${
+      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(--vscode-list-hoverBackground)] hover:text-[var(--vscode-list-hoverForeground)]'
+        )
+      } ${
         isSelected
-          ? 'bg-gray-300 dark:bg-vulcan-300 text-vulcan-500 dark:text-whisper-500'
-          : 'text-gray-500 dark:text-whisper-900'
+          ? getColors(
+            'bg-gray-300 dark:bg-vulcan-300 text-vulcan-500 dark:text-whisper-500', 
+            'bg-[var(--vscode-list-activeSelectionBackground)] text-[var(--vscode-list-activeSelectionForeground)]'
+          ) : getColors(
+            'text-gray-500 dark:text-whisper-900',
+            'text-[var(--vscode-tab-inactiveForeground)]'
+          )
       }`}
       onClick={onClick}
     >

src/dashboardWebView/components/Navigation.tsx

@@ -39,7 +39,7 @@ const NavigationItem: React.FunctionComponent<INavigationItemProps> = ({
           ) : 
           getColors(
             `border-transparent text-gray-500 dark:text-whisper-600 hover:text-gray-700 dark:hover:text-whisper-700 hover:border-gray-300 dark:hover:border-whisper-500`,
-            `border-transparent text-[var(--vscode-input-foreground)] hover:text-[var(--vscode-textLink-foreground)] hover:border-[var(--vscode-textLink-foreground)]`
+            `border-transparent text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-textLink-activeForeground)] hover:border-[var(--vscode-textLink-activeForeground)]`
           )
       } whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm`}
       aria-current={isCrntTab ? 'page' : undefined}