diff --git a/example/App.qml b/example/App.qml
index 7ecf87eb..36f451f7 100644
--- a/example/App.qml
+++ b/example/App.qml
@@ -9,7 +9,7 @@ Window {
     Component.onCompleted: {
         FluApp.init(app)
         FluTheme.frameless = ("windows" === Qt.platform.os)
-        FluTheme.dark = false
+        FluTheme.darkMode = FluDarkMode.System
         FluApp.routes = {
             "/":"qrc:/page/MainPage.qml",
             "/about":"qrc:/page/AboutPage.qml",
diff --git a/example/T_Settings.qml b/example/T_Settings.qml
index f55df6f0..ed4ac5a0 100644
--- a/example/T_Settings.qml
+++ b/example/T_Settings.qml
@@ -14,6 +14,39 @@ FluScrollablePage{
     bottomPadding:20
     spacing: 0
 
+    FluArea{
+        Layout.fillWidth: true
+        Layout.topMargin: 20
+        height: 136
+        paddings: 10
+
+        ColumnLayout{
+            spacing: 10
+            anchors{
+                top: parent.top
+                left: parent.left
+            }
+            FluText{
+                text:lang.dark_mode
+                fontStyle: FluText.BodyStrong
+                Layout.bottomMargin: 4
+            }
+            Repeater{
+                model: [{title:"System",mode:FluDarkMode.System},{title:"Light",mode:FluDarkMode.Light},{title:"Dark",mode:FluDarkMode.Dark}]
+                delegate:  FluRadioButton{
+                    selected : FluTheme.darkMode === modelData.mode
+                    text:modelData.title
+                    onClicked:{
+                        FluTheme.darkMode = modelData.mode
+                    }
+                }
+            }
+
+
+        }
+
+    }
+
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
@@ -32,9 +65,7 @@ FluScrollablePage{
                 fontStyle: FluText.BodyStrong
                 Layout.bottomMargin: 4
             }
-
             Repeater{
-                id:repeater
                 model: [{title:"Open",mode:FluNavigationView.Open},{title:"Compact",mode:FluNavigationView.Compact},{title:"Minimal",mode:FluNavigationView.Minimal},{title:"Auto",mode:FluNavigationView.Auto}]
                 delegate:  FluRadioButton{
                     selected : MainEvent.displayMode===modelData.mode
@@ -45,7 +76,6 @@ FluScrollablePage{
                 }
             }
         }
-
     }
 
     FluArea{
@@ -82,41 +112,6 @@ FluScrollablePage{
                 }
             }
         }
-
-    }
-
-    FluArea{
-        Layout.fillWidth: true
-        Layout.topMargin: 20
-        height: 80
-        paddings: 10
-
-        ColumnLayout{
-            spacing: 10
-            anchors{
-                top: parent.top
-                left: parent.left
-            }
-
-            FluText{
-                text:lang.dark_mode
-                fontStyle: FluText.BodyStrong
-                Layout.bottomMargin: 4
-            }
-
-            Flow{
-                spacing: 5
-                FluToggleSwitch{
-                    text:lang.sys_dark_mode
-                    selected:FluTheme.dark
-                    onClicked:{
-                        FluTheme.follow_system = true
-                        FluTheme.dark = FluTheme.follow_system
-                    }
-                }
-            }
-        }
-
     }
 
 }
diff --git a/src/Def.h b/src/Def.h
index e5d9e96a..f6e95bab 100644
--- a/src/Def.h
+++ b/src/Def.h
@@ -3,6 +3,16 @@
 
 #include <QObject>
 
+namespace Fluent_DarkMode {
+Q_NAMESPACE
+    enum Fluent_DarkModeType {
+        System      = 0x0,
+        Light    = 0x1,
+        Dark     = 0x2,
+    };
+Q_ENUMS(Fluent_DarkModeType);
+}
+
 namespace Fluent_Awesome {
 Q_NAMESPACE
 enum class Fluent_AwesomeType {
diff --git a/src/FluTheme.cpp b/src/FluTheme.cpp
index 4ebdc74b..f8e5b943 100644
--- a/src/FluTheme.cpp
+++ b/src/FluTheme.cpp
@@ -1,6 +1,7 @@
 #include "FluTheme.h"
 
 #include "FluColors.h"
+#include "Def.h"
 #include <QPalette>
 #include <QGuiApplication>
 
@@ -17,11 +18,14 @@ FluTheme *FluTheme::getInstance()
 FluTheme::FluTheme(QObject *parent)
     : QObject{parent}
 {
+    connect(this,&FluTheme::darkModeChanged,this,[=]{
+        Q_EMIT darkChanged();
+    });
     primaryColor(FluColors::getInstance()->Blue());
     textSize(13);
     nativeText(false);
     frameless(true);
-    if (follow_system()){dark(isDark());}
+    darkMode(Fluent_DarkMode::Fluent_DarkModeType::Light);
     (qobject_cast<QGuiApplication *>(QCoreApplication::instance()))->installEventFilter(this);
 }
 
@@ -30,16 +34,28 @@ bool FluTheme::eventFilter(QObject *obj, QEvent *event)
     Q_UNUSED(obj);
     if (event->type() == QEvent::ApplicationPaletteChange)
     {
-        if (follow_system()){dark(isDark());}
+        Q_EMIT darkChanged();
         event->accept();
         return true;
     }
     return false;
 }
 
-bool FluTheme::isDark()
+bool FluTheme::systemDark()
 {
     QPalette palette = (qobject_cast<QGuiApplication *>(QCoreApplication::instance()))->palette();
     QColor color = palette.color(QPalette::Window).rgb();
     return !(color.red() * 0.2126 + color.green() * 0.7152 + color.blue() * 0.0722 > 255 / 2);
 }
+
+bool FluTheme::dark(){
+    if(_darkMode == Fluent_DarkMode::Fluent_DarkModeType::Dark){
+        return true;
+    }else if(_darkMode == Fluent_DarkMode::Fluent_DarkModeType::Light){
+        return false;
+    }else if(_darkMode == Fluent_DarkMode::Fluent_DarkModeType::System){
+        return systemDark();
+    }else{
+        return false;
+    }
+}
diff --git a/src/FluTheme.h b/src/FluTheme.h
index b8712879..e839c0b8 100644
--- a/src/FluTheme.h
+++ b/src/FluTheme.h
@@ -8,19 +8,22 @@
 class FluTheme : public QObject
 {
     Q_OBJECT
+    Q_PROPERTY(bool dark READ dark NOTIFY darkChanged)
     Q_PROPERTY_AUTO(FluColorSet*,primaryColor)
     Q_PROPERTY_AUTO(bool,frameless);
-    Q_PROPERTY_AUTO(bool,dark);
-    Q_PROPERTY_AUTO(bool,follow_system);
+    Q_PROPERTY_AUTO(int,darkMode);
     Q_PROPERTY_AUTO(bool,nativeText);
     Q_PROPERTY_AUTO(int,textSize);
 public:
     explicit FluTheme(QObject *parent = nullptr);
     static FluTheme *getInstance();
+    bool dark();
+    Q_SIGNAL void darkChanged();
 private:
     static FluTheme* m_instance;
+    bool _dark;
     bool eventFilter(QObject *obj, QEvent *event);
-    bool isDark();
+    bool systemDark();
 };
 
 #endif // FLUTHEME_H
diff --git a/src/Fluent.cpp b/src/Fluent.cpp
index fa424101..dc275f56 100644
--- a/src/Fluent.cpp
+++ b/src/Fluent.cpp
@@ -93,6 +93,8 @@ void Fluent::registerTypes(const char *uri){
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluToggleSwitch.qml"),uri,major,minor,"FluToggleSwitch");
 
     qmlRegisterUncreatableMetaObject(Fluent_Awesome::staticMetaObject,  uri,major,minor,"FluentIcons", "Access to enums & flags only");
+    qmlRegisterUncreatableMetaObject(Fluent_DarkMode::staticMetaObject,  uri,major,minor,"FluDarkMode", "Access to enums & flags only");
+
 }
 
 void Fluent::initializeEngine(QQmlEngine *engine, const char *uri)
diff --git a/src/controls/FluAppBar.qml b/src/controls/FluAppBar.qml
index f91763af..64d1cf12 100644
--- a/src/controls/FluAppBar.qml
+++ b/src/controls/FluAppBar.qml
@@ -79,7 +79,11 @@ Rectangle{
             FluToggleSwitch{
                 selected: FluTheme.dark
                 clickFunc:function(){
-                    FluTheme.dark = !FluTheme.dark
+                    if(FluTheme.dark){
+                        FluTheme.darkMode = FluDarkMode.Light
+                    }else{
+                        FluTheme.darkMode = FluDarkMode.Dark
+                    }
                 }
             }
         }