diff --git a/CHANGELOG.md b/CHANGELOG.md
index 317f008b..b09a7f55 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,7 @@
 
 - [#950](https://github.com/estruyf/vscode-front-matter/issues/950): Fix for template is not applied to new content type when created
 - [#958](https://github.com/estruyf/vscode-front-matter/issues/958): Fix variable frontmatter leads to error
+- [#964](https://github.com/estruyf/vscode-front-matter/issues/964): Fix settings page for dark themes
 - [#984](https://github.com/estruyf/vscode-front-matter/issues/984): Fix in `frontMatter.global.timezone` is invalid
 - [#1004](https://github.com/estruyf/vscode-front-matter/issues/1004): Fix for `mediaDB.json` containing full paths on Windows instead of relative paths
 - [#1006](https://github.com/estruyf/vscode-front-matter/issues/1006): Fix output channel colorizer schema to only apply to the Front Matter output channel
diff --git a/src/dashboardWebView/components/SettingsView/CommonSettings.tsx b/src/dashboardWebView/components/SettingsView/CommonSettings.tsx
index 9a6df00b..ee2ea4f5 100644
--- a/src/dashboardWebView/components/SettingsView/CommonSettings.tsx
+++ b/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>
 
diff --git a/src/dashboardWebView/components/SettingsView/IntegrationsView.tsx b/src/dashboardWebView/components/SettingsView/IntegrationsView.tsx
index bfcfcc72..dcc39e01 100644
--- a/src/dashboardWebView/components/SettingsView/IntegrationsView.tsx
+++ b/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>
 
diff --git a/src/dashboardWebView/components/SettingsView/SettingsView.tsx b/src/dashboardWebView/components/SettingsView/SettingsView.tsx
index c8b4bc7c..00ce1bac 100644
--- a/src/dashboardWebView/components/SettingsView/SettingsView.tsx
+++ b/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
diff --git a/src/dashboardWebView/components/Steps/SelectItem.tsx b/src/dashboardWebView/components/Steps/SelectItem.tsx
index 7f0cadad..52106c49 100644
--- a/src/dashboardWebView/components/Steps/SelectItem.tsx
+++ b/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}