diff --git a/astro.config.mjs b/astro.config.mjs
index 621c415998..5fd47405a7 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -56,7 +56,8 @@ export default defineConfig({
 			},
 		}),
 		expressiveCode({
-			themes: [expressiveCodeConfig.theme, expressiveCodeConfig.theme],
+			// themes: [expressiveCodeConfig.theme, expressiveCodeConfig.theme],
+			themes: expressiveCodeConfig.themes,
 			plugins: [
 				pluginCollapsibleSections(),
 				pluginLineNumbers(),
diff --git a/src/config.ts b/src/config.ts
index c7b2d11f77..4f95ccafe6 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -86,5 +86,6 @@ export const licenseConfig: LicenseConfig = {
 export const expressiveCodeConfig: ExpressiveCodeConfig = {
 	// Note: Some styles (such as background color) are being overridden, see the astro.config.mjs file.
 	// Please select a dark theme, as this blog theme currently only supports dark background color
-	theme: "github-dark",
+	// theme: "github-dark",
+	themes: ["github-dark", "github-dark-dimmed"],
 };
diff --git a/src/types/config.ts b/src/types/config.ts
index c2c6a61525..c1da767d2d 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -98,5 +98,6 @@ export type BlogPostData = {
 };
 
 export type ExpressiveCodeConfig = {
-	theme: string;
+	// theme: string;
+	themes: string[];
 };
diff --git a/src/utils/setting-utils.ts b/src/utils/setting-utils.ts
index 232fac86aa..b2b97c15cb 100644
--- a/src/utils/setting-utils.ts
+++ b/src/utils/setting-utils.ts
@@ -44,11 +44,16 @@ export function applyThemeToDocument(theme: LIGHT_DARK_MODE) {
 			break;
 	}
 
-	// Set the theme for Expressive Code
-	document.documentElement.setAttribute(
-		"data-theme",
-		expressiveCodeConfig.theme,
-	);
+	// Set the theme for Expressive Code (auto switch)
+	const themes = expressiveCodeConfig.themes || [];
+	const lightTheme = themes[0];
+	const darkTheme = themes.length > 1 ? themes[1] : themes[0];
+
+	const isDarkNow = document.documentElement.classList.contains("dark");
+	const autoTheme = isDarkNow ? darkTheme : lightTheme;
+	if (autoTheme) {
+		document.documentElement.setAttribute("data-theme", autoTheme);
+	}
 }
 
 export function setTheme(theme: LIGHT_DARK_MODE): void {