fix: update text color for settings and select item components to improve visibility in dark themes Issue: Settings Page is Unreadable in Dark Themes

Fixes #964

src/dashboardWebView/components/SettingsView/CommonSettings.tsx

@@ -67,7 +67,7 @@ export const CommonSettings: React.FunctionComponent<ICommonSettingsProps> = (pr
   }, [settings?.lastUpdated]);
 
   return (
-    <div className='w-full divide-y divide-[var(--frontmatter-border)]'>
+    <div className='w-full divide-y divide-[var(--frontmatter-border)] text-[var(--frontmatter-text)]'>
       <div className='py-4'>
         <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsOpenOnStartup)}</h2>
 

src/dashboardWebView/components/SettingsView/IntegrationsView.tsx

@@ -71,7 +71,7 @@ export const IntegrationsView: React.FunctionComponent<IIntegrationsViewProps> =
   }, []);
 
   return (
-    <div className='w-full divide-y divide-[var(--frontmatter-border)]'>
+    <div className='w-full divide-y divide-[var(--frontmatter-border)] text-[var(--frontmatter-text)]'>
       <div className='py-4 space-y-4'>
         <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsIntegrationsViewDeeplTitle)}</h2>
 

src/dashboardWebView/components/SettingsView/SettingsView.tsx

@@ -52,7 +52,7 @@ export const SettingsView: React.FunctionComponent<ISettingsViewProps> = (_: Rea
       {
         id: "view-2",
         content: (
-          <div className='py-4'>
+          <div className='py-4 text-[var(--frontmatter-text)]'>
             <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsContentFolders)}</h2>
 
             <ContentFolders
@@ -67,7 +67,7 @@ export const SettingsView: React.FunctionComponent<ISettingsViewProps> = (_: Rea
       temp.push({
         id: "view-3",
         content: (
-          <div className='py-4'>
+          <div className='py-4 text-[var(--frontmatter-text)]'>
             <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsContentTypes)}</h2>
 
             <AstroContentTypes

src/dashboardWebView/components/Steps/SelectItem.tsx

@@ -19,7 +19,7 @@ export const SelectItem: React.FunctionComponent<ISelectItemProps> = ({
 }: React.PropsWithChildren<ISelectItemProps>) => {
   return (
     <div
-      className={`text-sm flex items-center ${isSelected ? 'text-[var(--vscode-textLink-foreground)]' : ''}`}
+      className={`text-sm flex items-center ${isSelected ? 'text-[var(--vscode-textLink-foreground)]' : 'text-[var(--frontmatter-text)]'}`}
     >
       <button
         onClick={onClick}