diff --git a/src/components/BootstrapBlazor.UniverSheet/BootstrapBlazor.UniverSheet.csproj b/src/components/BootstrapBlazor.UniverSheet/BootstrapBlazor.UniverSheet.csproj
index bbd6e31c..420129d1 100644
--- a/src/components/BootstrapBlazor.UniverSheet/BootstrapBlazor.UniverSheet.csproj
+++ b/src/components/BootstrapBlazor.UniverSheet/BootstrapBlazor.UniverSheet.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>10.0.3</Version>
+    <Version>10.0.4</Version>
   </PropertyGroup>
 
   <PropertyGroup>
diff --git a/src/components/BootstrapBlazor.UniverSheet/Components/UniverSheet.razor.cs b/src/components/BootstrapBlazor.UniverSheet/Components/UniverSheet.razor.cs
index 466fda9b..1c549e46 100644
--- a/src/components/BootstrapBlazor.UniverSheet/Components/UniverSheet.razor.cs
+++ b/src/components/BootstrapBlazor.UniverSheet/Components/UniverSheet.razor.cs
@@ -19,11 +19,17 @@ public partial class UniverSheet
     public Dictionary<string, string>? Plugins { get; set; }
 
     /// <summary>
-    /// 获得/设置 主题颜色 默认 null 未设置
+    /// 获得/设置 主题颜色 默认 null 未设置 可设置为 greenTheme
     /// </summary>
     [Parameter]
     public string? Theme { get; set; }
 
+    /// <summary>
+    /// 获得/设置 是否为暗黑模式 默认 null 未设置 自动
+    /// </summary>
+    [Parameter]
+    public bool? IsDarkMode { get; set; }
+
     /// <summary>
     /// 获得/设置 语言 默认 null 未设置
     /// </summary>
@@ -93,7 +99,15 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new { Theme, Lang, Plugins, Data, RibbonType = RibbonType.ToDescriptionString() });
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new
+    {
+        Theme,
+        Lang,
+        Plugins,
+        Data,
+        DarkMode = IsDarkMode,
+        RibbonType = RibbonType.ToDescriptionString()
+    });
 
     /// <summary>
     /// 推送数据方法
diff --git a/src/components/BootstrapBlazor.UniverSheet/Components/UniverSheet.razor.js b/src/components/BootstrapBlazor.UniverSheet/Components/UniverSheet.razor.js
index b416df1c..1465e1f1 100644
--- a/src/components/BootstrapBlazor.UniverSheet/Components/UniverSheet.razor.js
+++ b/src/components/BootstrapBlazor.UniverSheet/Components/UniverSheet.razor.js
@@ -8,7 +8,7 @@ export async function init(id, invoke, options) {
         return;
     }
 
-    const { theme, lang, plugins, data, ribbonType } = options;
+    const { theme, lang, plugins, data, ribbonType, darkMode } = options;
     const univerSheet = {
         el,
         invoke,
@@ -16,7 +16,8 @@ export async function init(id, invoke, options) {
         plugins,
         theme,
         lang,
-        ribbonType
+        ribbonType,
+        darkMode
     };
 
     await createUniverSheetAsync(univerSheet);
diff --git a/src/components/BootstrapBlazor.UniverSheet/wwwroot/univer.js b/src/components/BootstrapBlazor.UniverSheet/wwwroot/univer.js
index 0749c527..cfc51ad4 100644
--- a/src/components/BootstrapBlazor.UniverSheet/wwwroot/univer.js
+++ b/src/components/BootstrapBlazor.UniverSheet/wwwroot/univer.js
@@ -1,4 +1,4 @@
-import { addScript, addLink } from '../BootstrapBlazor/modules/utility.js'
+import { addScript, addLink, getTheme } from '../BootstrapBlazor/modules/utility.js'
 import DataService from './data-service.js'
 
 const loadAssets = async lang => {
@@ -42,8 +42,8 @@ export async function createUniverSheetAsync(sheet) {
     const lang = sheet.lang.replace('-', '')
     const langStr = lang.charAt(0).toUpperCase() + lang.slice(1)
     const options = {
-        theme: UniverDesign[sheet.theme] ?? UniverDesign.defaultTheme, //'defaultTheme' | greenTheme
-        darkMode: sheet.darkMode ?? false, // false | true
+        theme: sheet.theme, 
+        darkMode: sheet.darkMode,
         locale: lang,
         locales: {
             [lang]: merge(
@@ -87,6 +87,17 @@ export async function createUniverSheetAsync(sheet) {
         options.plugins.push(plugin);
     }
 
+    if (options.theme === 'greenTheme') {
+        options.theme = UniverDesign.greenTheme;
+    }
+    else {
+        options.theme = UniverDesign.defaultTheme;
+    }
+
+    if (options.darkMode === null) {
+        options.darkMode = getTheme() === 'dark';
+    }
+
     const { univer, univerAPI } = createUniver(options);
 
     const { workbookData } = sheet.data || {};