diff --git a/.DS_Store b/.DS_Store
deleted file mode 100644
index 590313ca..00000000
Binary files a/.DS_Store and /dev/null differ
diff --git a/example/App.qml b/example/App.qml
index fa690bb7..342e06b3 100644
--- a/example/App.qml
+++ b/example/App.qml
@@ -10,7 +10,8 @@ Window {
     color: "#00000000"
     Component.onCompleted: {
         FluApp.init(app,properties)
-        FluTheme.isDark = false
+        FluTheme.frameless = ("windows" === Qt.platform.os)
+        FluTheme.dark = false
         FluApp.routes = {
             "/":"qrc:/page/MainPage.qml",
             "/about":"qrc:/page/AboutPage.qml",
diff --git a/example/T_Theme.qml b/example/T_Theme.qml
index 5f7f3c12..dac1b22a 100644
--- a/example/T_Theme.qml
+++ b/example/T_Theme.qml
@@ -26,7 +26,7 @@ FluScrollablePage{
                     iconSource: FluentIcons.AcceptMedium
                     iconSize: 15
                     visible: modelData === FluTheme.primaryColor
-                    color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                    color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                 }
                 MouseArea{
                     id:mouse_item
@@ -44,9 +44,9 @@ FluScrollablePage{
         Layout.topMargin: 20
     }
     FluToggleSwitch{
-        selected: FluTheme.isDark
+        selected: FluTheme.dark
         clickFunc:function(){
-            FluTheme.isDark = !FluTheme.isDark
+            FluTheme.dark = !FluTheme.dark
         }
     }
     FluText{
@@ -54,9 +54,9 @@ FluScrollablePage{
         Layout.topMargin: 20
     }
     FluToggleSwitch{
-        selected: FluTheme.isNativeText
+        selected: FluTheme.nativeText
         clickFunc:function(){
-            FluTheme.isNativeText = !FluTheme.isNativeText
+            FluTheme.nativeText = !FluTheme.nativeText
         }
     }
 }
diff --git a/example/page/ChatPage.qml b/example/page/ChatPage.qml
index 5dc8925a..40e863aa 100644
--- a/example/page/ChatPage.qml
+++ b/example/page/ChatPage.qml
@@ -57,7 +57,7 @@ FluWindow {
             selectedTextColor: Qt.rgba(51,153,255,1)
             color:FluColors.Black
             selectionColor: {
-                if(FluTheme.isDark){
+                if(FluTheme.dark){
                     return FluTheme.primaryColor.lighter
                 }else{
                     return FluTheme.primaryColor.dark
@@ -82,7 +82,7 @@ FluWindow {
             bottom: layout_bottom.top
             margins: 10
         }
-        color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(245/255,245/255,245/255,1)
+        color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(245/255,245/255,245/255,1)
         ListView{
             id:list_message
             anchors.fill: parent
diff --git a/src/FluTheme.cpp b/src/FluTheme.cpp
index 39376b38..debc1418 100644
--- a/src/FluTheme.cpp
+++ b/src/FluTheme.cpp
@@ -16,8 +16,8 @@ FluTheme::FluTheme(QObject *parent)
     : QObject{parent}
 {
     primaryColor(FluColors::getInstance()->Blue());
-    textSize(14);
-    isNativeText(false);
-    isFrameless(true);
-    isDark(false);
+    textSize(13);
+    nativeText(false);
+    frameless(true);
+    dark(false);
 }
diff --git a/src/FluTheme.h b/src/FluTheme.h
index d8eb5bfa..6ce9c7fe 100644
--- a/src/FluTheme.h
+++ b/src/FluTheme.h
@@ -9,9 +9,9 @@ class FluTheme : public QObject
 {
     Q_OBJECT
     Q_PROPERTY_AUTO(FluColorSet*,primaryColor)
-    Q_PROPERTY_AUTO(bool,isFrameless);
-    Q_PROPERTY_AUTO(bool,isDark);
-    Q_PROPERTY_AUTO(bool,isNativeText);
+    Q_PROPERTY_AUTO(bool,frameless);
+    Q_PROPERTY_AUTO(bool,dark);
+    Q_PROPERTY_AUTO(bool,nativeText);
     Q_PROPERTY_AUTO(int,textSize);
 public:
     explicit FluTheme(QObject *parent = nullptr);
diff --git a/src/FramelessView_unix.cpp b/src/FramelessView_unix.cpp
index d7a9818e..9c24c701 100644
--- a/src/FramelessView_unix.cpp
+++ b/src/FramelessView_unix.cpp
@@ -16,7 +16,9 @@ public:
 
 FramelessView::FramelessView(QWindow *parent) : Super(parent), d(new FramelessViewPrivate)
 {
-    setFlags( Qt::Window | Qt::FramelessWindowHint | Qt::WindowTitleHint | Qt::WindowSystemMenuHint);
+    if(FluTheme::getInstance()->frameless()){
+        setFlags( Qt::Window | Qt::FramelessWindowHint | Qt::WindowTitleHint | Qt::WindowSystemMenuHint);
+    }
     setResizeMode(SizeRootObjectToView);
     setIsMax(windowState() == Qt::WindowMaximized);
     setIsFull(windowState() == Qt::WindowFullScreen);
@@ -25,6 +27,10 @@ FramelessView::FramelessView(QWindow *parent) : Super(parent), d(new FramelessVi
         setIsMax(windowState() == Qt::WindowMaximized);
         setIsFull(windowState() == Qt::WindowFullScreen);
     });
+    connect(FluTheme::getInstance(),&FluTheme::framelessChanged,this,[=](){
+        setFlag(Qt::Window,false);
+        setFlag(Qt::Window,true);
+    });
 }
 
 FramelessView::~FramelessView()
diff --git a/src/FramelessView_win.cpp b/src/FramelessView_win.cpp
index 4fce8d9f..6a7a607a 100644
--- a/src/FramelessView_win.cpp
+++ b/src/FramelessView_win.cpp
@@ -19,7 +19,10 @@ static bool isFullWin(QQuickView* win)
 {
     return win->windowState() == Qt::WindowFullScreen;
 }
-
+static bool isFixWin(QQuickView* win)
+{
+    return win->minimumWidth() ==  win->maximumWidth() && win->minimumHeight() ==  win->maximumHeight();
+}
 static long hitTest(RECT winrect, long x, long y, int borderWidth)
 {
     if ((x >= winrect.left) && (x < winrect.left + borderWidth) && (y >= winrect.top) && (y < winrect.top + borderWidth))
@@ -72,15 +75,21 @@ public:
 
 FramelessView::FramelessView(QWindow *parent) : Super(parent), d(new FramelessViewPrivate)
 {
-    setFlag(Qt::FramelessWindowHint,true);
+    if(FluTheme::getInstance()->frameless()){
+        setFlag(Qt::FramelessWindowHint,true);
+    }
     setResizeMode(SizeRootObjectToView);
     setIsMax(windowState() == Qt::WindowMaximized);
     setIsFull(windowState() == Qt::WindowFullScreen);
-    connect(this, &QWindow::windowStateChanged, this, [&](Qt::WindowState state) {
+    connect(this, &QWindow::windowStateChanged, this, [=](Qt::WindowState state) {
         (void)state;
         setIsMax(windowState() == Qt::WindowMaximized);
         setIsFull(windowState() == Qt::WindowFullScreen);
     });
+    connect(FluTheme::getInstance(),&FluTheme::framelessChanged,this,[=](){
+        setFlag(Qt::Window,false);
+        setFlag(Qt::Window,true);
+    });
 }
 
 FramelessView::~FramelessView()
@@ -92,8 +101,10 @@ void FramelessView::showEvent(QShowEvent *e)
 {
     static const MARGINS shadow_state[2] { { 0, 0, 0, 0 }, { 1, 1, 1, 1 } };
     ::DwmExtendFrameIntoClientArea((HWND)(winId()), &shadow_state[true]);
+    if(FluTheme::getInstance()->frameless()){
+        setFlag(Qt::FramelessWindowHint,false);
+    }
     Super::showEvent(e);
-    setFlag(Qt::FramelessWindowHint,false);
 }
 
 QRect FramelessView::calcCenterGeo(const QRect &screenGeo, const QSize &normalSize)
@@ -177,14 +188,14 @@ bool FramelessView::nativeEvent(const QByteArray &eventType, void *message, long
     {
         return false;
     }
-    if (msg->message == WM_NCHITTEST)
+    if (msg->message == WM_NCHITTEST && FluTheme::getInstance()->frameless())
     {
         RECT winrect;
         GetWindowRect(HWND(winId()), &winrect);
         long x = GET_X_LPARAM(msg->lParam);
         long y = GET_Y_LPARAM(msg->lParam);
         *result = 0;
-        if (!isMaxWin(this) && !isFullWin(this))
+        if (!isMaxWin(this) && !isFullWin(this) && !isFixWin(this))
         {
             *result = hitTest(winrect, x, y, 4);
             if (0 != *result)
@@ -192,7 +203,7 @@ bool FramelessView::nativeEvent(const QByteArray &eventType, void *message, long
                 return true;
             }
         }
-    }else if (msg->message == WM_NCCALCSIZE)
+    }else if (msg->message == WM_NCCALCSIZE && FluTheme::getInstance()->frameless())
     {
         const auto mode = static_cast<BOOL>(msg->wParam);
         const auto clientRect = mode ? &(reinterpret_cast<LPNCCALCSIZE_PARAMS>(msg->lParam)->rgrc[0]) : reinterpret_cast<LPRECT>(msg->lParam);
diff --git a/src/controls/FluAppBar.qml b/src/controls/FluAppBar.qml
index 35afd8f1..f2050bce 100644
--- a/src/controls/FluAppBar.qml
+++ b/src/controls/FluAppBar.qml
@@ -7,11 +7,11 @@ import FluentUI 1.0
 Rectangle{
 
     property string title: ""
-    property color textColor: FluTheme.isDark ? "#FFFFFF" : "#000000"
+    property color textColor: FluTheme.dark ? "#FFFFFF" : "#000000"
     property bool showDark: false
     property bool showFps: false
     property var window: Window.window
-    property color borerlessColor : FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property color borerlessColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
     property bool resizable: {
         if(window == null){
             return false
@@ -21,7 +21,7 @@ Rectangle{
 
     id:root
     color: Qt.rgba(0,0,0,0)
-    visible: FluTheme.isFrameless
+    visible: FluTheme.frameless
     height: visible ? 30 : 0
     width: {
         if(parent==null)
@@ -78,9 +78,9 @@ Rectangle{
                 fontStyle: FluText.Body
             }
             FluToggleSwitch{
-                selected: FluTheme.isDark
+                selected: FluTheme.dark
                 clickFunc:function(){
-                    FluTheme.isDark = !FluTheme.isDark
+                    FluTheme.dark = !FluTheme.dark
                 }
             }
         }
@@ -95,7 +95,7 @@ Rectangle{
             radius: 0
             textColor: root.textColor
             color:{
-                if(FluTheme.isDark){
+                if(FluTheme.dark){
                     if(hovered){
                         return Qt.rgba(1,1,1,0.06)
                     }
@@ -121,7 +121,7 @@ Rectangle{
             }
             iconSource : isRestore  ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize
             color:{
-                if(FluTheme.isDark){
+                if(FluTheme.dark){
                     if(hovered){
                         return Qt.rgba(1,1,1,0.06)
                     }
diff --git a/src/controls/FluArea.qml b/src/controls/FluArea.qml
index 91dadddf..9e878a88 100644
--- a/src/controls/FluArea.qml
+++ b/src/controls/FluArea.qml
@@ -11,8 +11,8 @@ Rectangle {
     property int bottomPadding : 0
 
     radius: 4
-    color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-    border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+    color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+    border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
     border.width: 1
     implicitHeight: height
     implicitWidth: width
diff --git a/src/controls/FluAutoSuggestBox.qml b/src/controls/FluAutoSuggestBox.qml
index 54cc67e4..7de9cea9 100644
--- a/src/controls/FluAutoSuggestBox.qml
+++ b/src/controls/FluAutoSuggestBox.qml
@@ -16,26 +16,26 @@ TextField{
     enabled: !disabled
     color: {
         if(disabled){
-            return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+            return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
         }
-        return FluTheme.isDark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
+        return FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
     }
     selectionColor: {
-        if(FluTheme.isDark){
+        if(FluTheme.dark){
             return FluTheme.primaryColor.lighter
         }else{
             return FluTheme.primaryColor.dark
         }
     }
-    renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering
+    renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     placeholderTextColor: {
         if(disabled){
-            return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+            return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
         }
         if(focus){
-            return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
+            return FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
         }
-        return FluTheme.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
+        return FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
     }
     rightPadding: icon_right.visible ? 50 : 30
     selectByMouse: true
@@ -163,7 +163,7 @@ TextField{
             FluShadow{
                 radius: 4
             }
-            color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
+            color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
             height: 38*Math.min(Math.max(list_view.count,1),8)
             ListView{
                 id:list_view
@@ -192,12 +192,12 @@ TextField{
                     background: Rectangle{
                         color:  {
                             if(list_view.currentIndex === index){
-                                return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
+                                return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
                             }
                             if(hovered){
-                                return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
+                                return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
                             }
-                            return FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
+                            return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
                         }
                         MouseArea{
                             id:mouse_area
diff --git a/src/controls/FluButton.qml b/src/controls/FluButton.qml
index 731f8fe7..676bde96 100644
--- a/src/controls/FluButton.qml
+++ b/src/controls/FluButton.qml
@@ -5,9 +5,9 @@ import FluentUI 1.0
 Button {
 
     property bool disabled: false
-    property color normalColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+    property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
 
     id: control
     topPadding:5
@@ -20,7 +20,7 @@ Button {
     Keys.onSpacePressed: control.visualFocus&&clicked()
 
     background: Rectangle{
-        border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
+        border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
         border.width: 1
         radius: 4
         FluFocusRectangle{
@@ -39,7 +39,7 @@ Button {
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         color: {
-            if(FluTheme.isDark){
+            if(FluTheme.dark){
                 if(disabled){
                     return Qt.rgba(131/255,131/255,131/255,1)
                 }
diff --git a/src/controls/FluCalendarPicker.qml b/src/controls/FluCalendarPicker.qml
index 631eb8fd..61c89891 100644
--- a/src/controls/FluCalendarPicker.qml
+++ b/src/controls/FluCalendarPicker.qml
@@ -6,9 +6,9 @@ import FluentUI 1.0
 
 Rectangle {
 
-    property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
-    property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+    property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+    property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property var window : Window.window
 
     id:root
diff --git a/src/controls/FluCalendarView.qml b/src/controls/FluCalendarView.qml
index a2694b6b..bd8b72f0 100644
--- a/src/controls/FluCalendarView.qml
+++ b/src/controls/FluCalendarView.qml
@@ -55,7 +55,7 @@ Item {
                     radius: 4
                     anchors.centerIn: parent
                     color:{
-                        if(FluTheme.isDark){
+                        if(FluTheme.dark){
                             if(item_control.hovered){
                                 return Qt.rgba(1,1,1,0.05)
                             }
@@ -85,7 +85,7 @@ Item {
                             return "#FFFFFF"
                         }
                         if(isDecade){
-                            return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
+                            return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
                         }
                         return Qt.rgba(150/255,150/255,150/255,1)
                     }
@@ -115,7 +115,7 @@ Item {
                     radius: 4
                     anchors.centerIn: parent
                     color:{
-                        if(FluTheme.isDark){
+                        if(FluTheme.dark){
                             if(item_control.hovered){
                                 return Qt.rgba(1,1,1,0.05)
                             }
@@ -145,7 +145,7 @@ Item {
                             return "#FFFFFF"
                         }
                         if(isYear){
-                            return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
+                            return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
                         }
                         return Qt.rgba(150/255,150/255,150/255,1)
                     }
@@ -176,7 +176,7 @@ Item {
                     radius: 4
                     anchors.centerIn: parent
                     color:{
-                        if(FluTheme.isDark){
+                        if(FluTheme.dark){
                             if(item_control.hovered){
                                 return Qt.rgba(1,1,1,0.05)
                             }
@@ -220,7 +220,7 @@ Item {
                             return "#FFFFFF"
                         }
                         if(isMonth){
-                            return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
+                            return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
                         }
                         return Qt.rgba(150/255,150/255,150/255,1)
                     }
@@ -242,7 +242,7 @@ Item {
             id:layout_divider
             height: 1
             width: parent.width
-            color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+            color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
             anchors{
                 top: parent.top
                 topMargin: 44
diff --git a/src/controls/FluCheckBox.qml b/src/controls/FluCheckBox.qml
index 4fef59ee..162c4998 100644
--- a/src/controls/FluCheckBox.qml
+++ b/src/controls/FluCheckBox.qml
@@ -8,16 +8,16 @@ Button {
     property bool selected: false
     property var clickFunc
     property bool disabled: false
-    property color borderNormalColor: FluTheme.isDark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1)
-    property color borderSelectedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-    property color borderHoverColor: FluTheme.isDark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
-    property color borderDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
-    property color normalColor: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
-    property color selectedColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-    property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1)
-    property color selectedHoverColor: FluTheme.isDark ? Qt.darker(selectedColor,1.1) : Qt.lighter(selectedColor,1.1)
-    property color selectedDisableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
-    property color disableColor: FluTheme.isDark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
+    property color borderNormalColor: FluTheme.dark ? Qt.rgba(160/255,160/255,160/255,1) : Qt.rgba(136/255,136/255,136/255,1)
+    property color borderSelectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property color borderHoverColor: FluTheme.dark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
+    property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
+    property color normalColor: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
+    property color selectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(244/255,244/255,244/255,1)
+    property color selectedHoverColor: FluTheme.dark ? Qt.darker(selectedColor,1.1) : Qt.lighter(selectedColor,1.1)
+    property color selectedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
 
     id:control
     enabled: !disabled
@@ -78,7 +78,7 @@ Button {
                 iconSource: FluentIcons.AcceptMedium
                 iconSize: 15
                 visible: selected
-                color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
             }
         }
         FluText{
diff --git a/src/controls/FluColorPicker.qml b/src/controls/FluColorPicker.qml
index 5e3a646c..df679784 100644
--- a/src/controls/FluColorPicker.qml
+++ b/src/controls/FluColorPicker.qml
@@ -19,7 +19,7 @@ Button{
         border.color: {
             if(hovered)
                 return FluTheme.primaryColor.light
-            return FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+            return FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
         }
         border.width: 1
     }
diff --git a/src/controls/FluContentDialog.qml b/src/controls/FluContentDialog.qml
index 8cfbbe1e..9613e23d 100644
--- a/src/controls/FluContentDialog.qml
+++ b/src/controls/FluContentDialog.qml
@@ -25,7 +25,7 @@ Popup {
         id:layout_content
         implicitWidth:minWidth
         implicitHeight: text_title.height + text_message.height + layout_actions.height
-        color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(249/255,249/255,249/255,1)
+        color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(249/255,249/255,249/255,1)
         radius:5
 
         FluShadow{
@@ -67,7 +67,7 @@ Popup {
             id:layout_actions
             height: 68
             radius: 5
-            color: FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+            color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
             anchors{
                 top:text_message.bottom
                 left: parent.left
diff --git a/src/controls/FluDatePicker.qml b/src/controls/FluDatePicker.qml
index fee4cdb0..add18f2f 100644
--- a/src/controls/FluDatePicker.qml
+++ b/src/controls/FluDatePicker.qml
@@ -6,9 +6,9 @@ import FluentUI 1.0
 
 Rectangle {
 
-    property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
-    property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+    property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+    property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property var window : Window.window
     property bool showYear: true
     property bool changeFlag: true
@@ -116,7 +116,7 @@ Rectangle {
             id:container
             width: 300
             radius: 4
-            color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
+            color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
             height: 340
             MouseArea{
                 anchors.fill: parent
@@ -156,16 +156,16 @@ Rectangle {
                             anchors.rightMargin: 5
                             color:  {
                                 if(getListView().currentIndex === position){
-                                    if(FluTheme.isDark){
+                                    if(FluTheme.dark){
                                         return  item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter
                                     }else{
                                         return  item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark
                                     }
                                 }
                                 if(item_mouse.containsMouse){
-                                    return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
+                                    return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
                                 }
-                                return FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
+                                return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
                             }
                             radius: 3
                             MouseArea{
@@ -197,13 +197,13 @@ Rectangle {
                                 text:model
                                 color: {
                                     if(getListView().currentIndex === position){
-                                        if(FluTheme.isDark){
+                                        if(FluTheme.dark){
                                             return Qt.rgba(0,0,0,1)
                                         }else{
                                             return Qt.rgba(1,1,1,1)
                                         }
                                     }else{
-                                        return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
+                                        return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
                                     }
                                 }
                                 anchors.centerIn: parent
@@ -289,7 +289,7 @@ Rectangle {
                 id:layout_actions
                 height: 40
                 radius: 5
-                color: FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+                color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
                 anchors{
                     bottom:parent.bottom
                     left: parent.left
diff --git a/src/controls/FluDivider.qml b/src/controls/FluDivider.qml
index a4180ac4..8abba71c 100644
--- a/src/controls/FluDivider.qml
+++ b/src/controls/FluDivider.qml
@@ -3,7 +3,7 @@ import FluentUI 1.0
 
 Rectangle {
 
-    color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
+    color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
 
     Behavior on color{
         ColorAnimation {
diff --git a/src/controls/FluDropDownButton.qml b/src/controls/FluDropDownButton.qml
index ad636f3a..807bfee6 100644
--- a/src/controls/FluDropDownButton.qml
+++ b/src/controls/FluDropDownButton.qml
@@ -6,9 +6,9 @@ import FluentUI 1.0
 Button {
 
     property bool disabled: false
-    property color normalColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
-    property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+    property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
     property var window : Window.window
     property alias items: menu.content
 
@@ -23,7 +23,7 @@ Button {
     Keys.onSpacePressed: control.visualFocus&&clicked()
 
     background: Rectangle{
-        border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
+        border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
         border.width: 1
         radius: 4
         FluFocusRectangle{
@@ -54,7 +54,7 @@ Button {
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         color: {
-            if(FluTheme.isDark){
+            if(FluTheme.dark){
                 if(disabled){
                     return Qt.rgba(131/255,131/255,131/255,1)
                 }
diff --git a/src/controls/FluExpander.qml b/src/controls/FluExpander.qml
index 0dde6651..11bb3d19 100644
--- a/src/controls/FluExpander.qml
+++ b/src/controls/FluExpander.qml
@@ -20,8 +20,8 @@ Item {
         width: parent.width
         height: 45
         radius: 4
-        color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-        border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+        color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+        border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
 
         MouseArea{
             id:root_mouse
@@ -49,9 +49,9 @@ Item {
             }
             color:{
                 if(root_mouse.containsMouse){
-                    return FluTheme.isDark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1)
+                    return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1)
                 }
-                return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+                return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
             }
             iconSize: 15
             iconSource: expand ? FluentIcons.ChevronUp : FluentIcons.ChevronDown
@@ -72,8 +72,8 @@ Item {
             left: layout_header.left
         }
         radius: 4
-        color: FluTheme.isDark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
-        border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
+        color: FluTheme.dark ? Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
+        border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
         height: expand ? contentHeight : 0
         Behavior on height {
             NumberAnimation{
diff --git a/src/controls/FluFilledButton.qml b/src/controls/FluFilledButton.qml
index a959ddde..95d26203 100644
--- a/src/controls/FluFilledButton.qml
+++ b/src/controls/FluFilledButton.qml
@@ -5,9 +5,9 @@ import FluentUI 1.0
 Button {
 
     property bool disabled: false
-    property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-    property color hoverColor: FluTheme.isDark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
-    property color disableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
+    property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
+    property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
 
     id: control
     enabled: !disabled
@@ -35,7 +35,7 @@ Button {
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         color: {
-            if(FluTheme.isDark){
+            if(FluTheme.dark){
                 if(disabled){
                     return Qt.rgba(173/255,173/255,173/255,1)
                 }
diff --git a/src/controls/FluFocusRectangle.qml b/src/controls/FluFocusRectangle.qml
index 3faa0f67..b10fee4c 100644
--- a/src/controls/FluFocusRectangle.qml
+++ b/src/controls/FluFocusRectangle.qml
@@ -16,7 +16,7 @@ Item {
         color: "#00000000"
         border.width: 3
         radius: root.radius
-        border.color: FluTheme.isDark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
+        border.color: FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
         z: 65535
     }
 
diff --git a/src/controls/FluIcon.qml b/src/controls/FluIcon.qml
index 1943c06e..320d739f 100644
--- a/src/controls/FluIcon.qml
+++ b/src/controls/FluIcon.qml
@@ -4,7 +4,7 @@ Text {
 
     property int iconSource
     property int iconSize: 20
-    property color iconColor: FluTheme.isDark ? "#FFFFFF" : "#000000"
+    property color iconColor: FluTheme.dark ? "#FFFFFF" : "#000000"
 
     id:text_icon
     font.family: "Segoe Fluent Icons"
diff --git a/src/controls/FluIconButton.qml b/src/controls/FluIconButton.qml
index cd648192..7d9b67ca 100644
--- a/src/controls/FluIconButton.qml
+++ b/src/controls/FluIconButton.qml
@@ -8,9 +8,9 @@ Button {
     property int iconSource
     property bool disabled: false
     property int radius:4
-    property color hoverColor: FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
-    property color normalColor: FluTheme.isDark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
-    property color disableColor: FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(0,0,0,0.03)
+    property color normalColor: FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
+    property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(0,0,0,0)
     property color color: {
         if(disabled){
             return disableColor
@@ -18,7 +18,7 @@ Button {
         return hovered ? hoverColor : normalColor
     }
     property color textColor: {
-        if(FluTheme.isDark){
+        if(FluTheme.dark){
             if(disabled){
                 return Qt.rgba(130/255,130/255,130/255,1)
             }
diff --git a/src/controls/FluInfoBar.qml b/src/controls/FluInfoBar.qml
index cb24167a..c303b38b 100644
--- a/src/controls/FluInfoBar.qml
+++ b/src/controls/FluInfoBar.qml
@@ -122,7 +122,7 @@ FluObject {
             width:  rowlayout.width  + (_super.moremsg ? 25 : 80);
             height: rowlayout.height + 20;
             color: {
-                if(FluTheme.isDark){
+                if(FluTheme.dark){
                     switch(_super.type){
                     case mcontrol.const_success: return Qt.rgba(57/255,61/255,27/255,1);
                     case mcontrol.const_warning: return Qt.rgba(67/255,53/255,25/255,1);
@@ -143,7 +143,7 @@ FluObject {
             radius: 4
             border.width: 1
             border.color: {
-                if(FluTheme.isDark){
+                if(FluTheme.dark){
                     switch(_super.type){
                     case mcontrol.const_success: return Qt.rgba(56/255,61/255,27/255,1);
                     case mcontrol.const_warning: return Qt.rgba(66/255,53/255,25/255,1);
@@ -179,7 +179,7 @@ FluObject {
                     }
                     iconSize:20
                     color: {
-                        if(FluTheme.isDark){
+                        if(FluTheme.dark){
                             switch(_super.type){
                             case mcontrol.const_success: return Qt.rgba(108/255,203/255,95/255,1);
                             case mcontrol.const_warning: return Qt.rgba(252/255,225/255,0/255,1);
diff --git a/src/controls/FluMediaPlayer.qml b/src/controls/FluMediaPlayer.qml
index 2dd0bd60..6f250161 100644
--- a/src/controls/FluMediaPlayer.qml
+++ b/src/controls/FluMediaPlayer.qml
@@ -73,7 +73,7 @@ Rectangle {
 
         Rectangle{
             anchors.fill: parent
-            color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
+            color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
             radius: 5
         }
 
diff --git a/src/controls/FluMenu.qml b/src/controls/FluMenu.qml
index 2565ce9c..ca2ee18f 100644
--- a/src/controls/FluMenu.qml
+++ b/src/controls/FluMenu.qml
@@ -25,7 +25,7 @@ Menu {
     background: Item {
         Rectangle{
             anchors.fill: parent
-            color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
+            color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,0.97) : Qt.rgba(237/255,237/255,237/255,0.97)
             radius: 5
         }
         FluShadow{
diff --git a/src/controls/FluMenuItem.qml b/src/controls/FluMenuItem.qml
index 2cadb6b3..17ddf6ed 100644
--- a/src/controls/FluMenuItem.qml
+++ b/src/controls/FluMenuItem.qml
@@ -22,7 +22,7 @@ Item {
         height: 32
         radius: 4
         color:{
-            if(FluTheme.isDark){
+            if(FluTheme.dark){
                 if(mouse_area.containsMouse){
                     return Qt.rgba(1,1,1,0.05)
                 }
diff --git a/src/controls/FluMultiLineTextBox.qml b/src/controls/FluMultiLineTextBox.qml
index 52708c08..4296d574 100644
--- a/src/controls/FluMultiLineTextBox.qml
+++ b/src/controls/FluMultiLineTextBox.qml
@@ -12,16 +12,16 @@ TextArea{
     width: 300
     color: {
         if(disabled){
-            return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+            return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
         }
-        return FluTheme.isDark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
+        return FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
     }
     enabled: !disabled
     wrapMode: Text.WrapAnywhere
-    renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering
+    renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectByMouse: true
     selectionColor: {
-        if(FluTheme.isDark){
+        if(FluTheme.dark){
             return FluTheme.primaryColor.lighter
         }else{
             return FluTheme.primaryColor.dark
@@ -32,12 +32,12 @@ TextArea{
     }
     placeholderTextColor: {
         if(disabled){
-            return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+            return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
         }
         if(focus){
-            return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
+            return FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
         }
-        return FluTheme.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
+        return FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
     }
     font.bold: {
         switch (fontStyle) {
diff --git a/src/controls/FluNavigationView.qml b/src/controls/FluNavigationView.qml
index a4d09b73..b5378292 100644
--- a/src/controls/FluNavigationView.qml
+++ b/src/controls/FluNavigationView.qml
@@ -113,7 +113,7 @@ Item {
                     }
                 }
                 color: {
-                    if(FluTheme.isDark){
+                    if(FluTheme.dark){
                         if(item_mouse.containsMouse){
                             return Qt.rgba(1,1,1,0.03)
                         }
@@ -257,12 +257,12 @@ Item {
 
         color: {
             if(displayMode === FluNavigationView.Minimal){
-                return FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+                return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
             }
             if(window && window.active){
-                return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
+                return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
             }
-            return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+            return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
         }
         Behavior on color{
             ColorAnimation {
@@ -270,7 +270,7 @@ Item {
             }
         }
 
-        border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
+        border.color: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
         border.width:  displayMode === FluNavigationView.Minimal ? 1 : 0
 
         Item{
diff --git a/src/controls/FluProgressBar.qml b/src/controls/FluProgressBar.qml
index 3e8cc0b0..00723cb7 100644
--- a/src/controls/FluProgressBar.qml
+++ b/src/controls/FluProgressBar.qml
@@ -11,7 +11,7 @@ FluRectangle {
     height: 5
     radius: [3,3,3,3]
     clip: true
-    color:  FluTheme.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
+    color:  FluTheme.dark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
 
     Component.onCompleted: {
         if(indeterminate){
@@ -28,7 +28,7 @@ FluRectangle {
         radius: 3
         width: control.width*progress
         height:  control.height
-        color:FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+        color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
 
         Behavior on x{
             id:behavior
diff --git a/src/controls/FluProgressRing.qml b/src/controls/FluProgressRing.qml
index 110d0b05..c63bc153 100644
--- a/src/controls/FluProgressRing.qml
+++ b/src/controls/FluProgressRing.qml
@@ -7,7 +7,7 @@ Rectangle {
     property real progress: 0.25
     property bool indeterminate: true
     readonly property real radius2 : radius - linWidth/2
-    property color primaryColor : FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property color primaryColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
 
     id: control
     width: 44
@@ -15,7 +15,7 @@ Rectangle {
     radius: 22
     border.width: linWidth
     color: "#00000000"
-    border.color: FluTheme.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
+    border.color: FluTheme.dark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
 
     onProgressChanged: {
         canvas.requestPaint()
@@ -23,7 +23,7 @@ Rectangle {
 
     Connections{
         target: FluTheme
-        function onIsDarkChanged(){
+        function onDarkChanged(){
             canvas.requestPaint()
         }
     }
diff --git a/src/controls/FluRadioButton.qml b/src/controls/FluRadioButton.qml
index cf2be038..b1a561b2 100644
--- a/src/controls/FluRadioButton.qml
+++ b/src/controls/FluRadioButton.qml
@@ -53,21 +53,21 @@ Button {
             }
             border.color: {
                 if(disabled){
-                    if(FluTheme.isDark){
+                    if(FluTheme.dark){
                         return Qt.rgba(82/255,82/255,82/255,1)
                     }else{
                         return Qt.rgba(198/255,198/255,198/255,1)
                     }
                 }
                 if(selected){
-                    if(FluTheme.isDark){
+                    if(FluTheme.dark){
                         return FluTheme.primaryColor.lighter
                     }else{
 
                         return FluTheme.primaryColor.dark
                     }
                 }else{
-                    if(FluTheme.isDark){
+                    if(FluTheme.dark){
                         return Qt.rgba(161/255,161/255,161/255,1)
                     }else{
 
@@ -79,7 +79,7 @@ Button {
                 if(disabled&&selected){
                     return Qt.rgba(159/255,159/255,159/255,1)
                 }
-                if(FluTheme.isDark){
+                if(FluTheme.dark){
                     if(hovered){
                         return Qt.rgba(43/255,43/255,43/255,1)
                     }
diff --git a/src/controls/FluShadow.qml b/src/controls/FluShadow.qml
index a4c244ca..fd7d56e9 100644
--- a/src/controls/FluShadow.qml
+++ b/src/controls/FluShadow.qml
@@ -2,7 +2,7 @@
 
 Item {
 
-    property color color: FluTheme.isDark ? "#FFFFFF" : "#999999"
+    property color color: FluTheme.dark ? "#FFFFFF" : "#999999"
     property int radius: 4
 
     id:root
diff --git a/src/controls/FluSlider.qml b/src/controls/FluSlider.qml
index df56b2bf..b4de9c2e 100644
--- a/src/controls/FluSlider.qml
+++ b/src/controls/FluSlider.qml
@@ -56,13 +56,13 @@ Item{
         height:  isHorizontal ? 4 : size
         radius: 2
         anchors.verticalCenter: parent.verticalCenter
-        color:FluTheme.isDark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
+        color:FluTheme.dark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
         Rectangle{
             id:rect
             radius: 2.5
             width: isHorizontal ? control.width*(value/maxValue) : 5
             height: isHorizontal ?  5  : control.height*(value/maxValue)
-            color:FluTheme.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
         }
 
 
@@ -78,12 +78,12 @@ Item{
         radius: dotSize/2
         anchors.verticalCenter: isHorizontal ?  parent.verticalCenter : undefined
         anchors.horizontalCenter: isHorizontal ? undefined :parent.horizontalCenter
-        color:FluTheme.isDark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
+        color:FluTheme.dark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
         Rectangle{
             width: dotSize/2
             height: dotSize/2
             radius: dotSize/4
-            color:FluTheme.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
             anchors.centerIn: parent
             scale: control_mouse.containsMouse || mouse_line.containsMouse  ? 1.3 : 1
             Behavior on scale {
diff --git a/src/controls/FluTabView.qml b/src/controls/FluTabView.qml
index a5e18fad..3eb40d61 100644
--- a/src/controls/FluTabView.qml
+++ b/src/controls/FluTabView.qml
@@ -176,7 +176,7 @@ Item {
                     Rectangle{
                         anchors.fill: parent
                         color: {
-                            if(FluTheme.isDark){
+                            if(FluTheme.dark){
                                 if(item_mouse_hove.containsMouse || item_btn_close.hovered){
                                     return Qt.rgba(1,1,1,0.03)
                                 }
diff --git a/src/controls/FluText.qml b/src/controls/FluText.qml
index ca5d5cc7..eb07ca10 100644
--- a/src/controls/FluText.qml
+++ b/src/controls/FluText.qml
@@ -4,7 +4,7 @@ import FluentUI 1.0
 Text {
 
     property int fontStyle: FluText.Body
-    property color textColor: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
+    property color textColor: FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
     property int pixelSize : FluTheme.textSize
 
     enum FontStyle {
@@ -20,7 +20,7 @@ Text {
 
     id:text
     color: textColor
-    renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering
+    renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     font.bold: {
         switch (fontStyle) {
         case FluText.Display:
diff --git a/src/controls/FluTextBox.qml b/src/controls/FluTextBox.qml
index 6f4ecfdf..66280832 100644
--- a/src/controls/FluTextBox.qml
+++ b/src/controls/FluTextBox.qml
@@ -13,13 +13,13 @@ TextField{
     enabled: !disabled
     color: {
         if(disabled){
-            return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+            return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
         }
-        return FluTheme.isDark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
+        return FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
     }
-    renderType: FluTheme.isNativeText ? Text.NativeRendering : Text.QtRendering
+    renderType: FluTheme.nativeText ? Text.NativeRendering : Text.QtRendering
     selectionColor: {
-        if(FluTheme.isDark){
+        if(FluTheme.dark){
             return FluTheme.primaryColor.lighter
         }else{
             return FluTheme.primaryColor.dark
@@ -27,12 +27,12 @@ TextField{
     }
     placeholderTextColor: {
         if(disabled){
-            return FluTheme.isDark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
+            return FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
         }
         if(focus){
-            return FluTheme.isDark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
+            return FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
         }
-        return FluTheme.isDark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
+        return FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
     }
     font.bold: {
         switch (fontStyle) {
diff --git a/src/controls/FluTextBoxBackground.qml b/src/controls/FluTextBoxBackground.qml
index ad31bae4..449d05b5 100644
--- a/src/controls/FluTextBoxBackground.qml
+++ b/src/controls/FluTextBoxBackground.qml
@@ -10,15 +10,15 @@ Rectangle{
     layer.enabled: true
     color: {
         if(inputItem.disabled){
-            return FluTheme.isDark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
+            return FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
         }
         if(inputItem.focus){
-            return FluTheme.isDark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
+            return FluTheme.dark ? Qt.rgba(36/255,36/255,36/255,1) : Qt.rgba(1,1,1,1)
         }
         if(inputItem.hovered){
-            return FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+            return FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
         }
-        return FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
+        return FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
     }
     layer.effect:OpacityMask {
         maskSource: Rectangle {
@@ -30,9 +30,9 @@ Rectangle{
     border.width: 1
     border.color: {
         if(inputItem.disabled){
-            return FluTheme.isDark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
+            return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(237/255,237/255,237/255,1)
         }
-        return FluTheme.isDark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
+        return FluTheme.dark ? Qt.rgba(76/255,76/255,76/255,1) : Qt.rgba(240/255,240/255,240/255,1)
     }
     Rectangle{
         width: parent.width
@@ -40,7 +40,7 @@ Rectangle{
         anchors.bottom: parent.bottom
         visible: !inputItem.disabled
         color: {
-            if(FluTheme.isDark){
+            if(FluTheme.dark){
                 inputItem.focus ? FluTheme.primaryColor.lighter  : Qt.rgba(166/255,166/255,166/255,1)
             }else{
                 return inputItem.focus ? FluTheme.primaryColor.dark  : Qt.rgba(183/255,183/255,183/255,1)
diff --git a/src/controls/FluTextButton.qml b/src/controls/FluTextButton.qml
index f2c91f6b..de794d33 100644
--- a/src/controls/FluTextButton.qml
+++ b/src/controls/FluTextButton.qml
@@ -5,9 +5,9 @@ import FluentUI 1.0
 Button {
 
     property bool disabled: false
-    property color normalColor: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-    property color hoverColor: FluTheme.isDark ? Qt.darker(normalColor,1.3) : Qt.lighter(normalColor,1.3)
-    property color disableColor: FluTheme.isDark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
+    property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.3) : Qt.lighter(normalColor,1.3)
+    property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
     property bool textBold: true
 
     id: control
diff --git a/src/controls/FluTimePicker.qml b/src/controls/FluTimePicker.qml
index 37517dae..b9efb0d3 100644
--- a/src/controls/FluTimePicker.qml
+++ b/src/controls/FluTimePicker.qml
@@ -10,9 +10,9 @@ Rectangle {
         H,
         HH
     }
-    property color dividerColor: FluTheme.isDark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
-    property color hoverColor: FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
-    property color normalColor: FluTheme.isDark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
+    property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
+    property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+    property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property var window : Window.window
     property int hourFormat: FluTimePicker.H
     property int isH: hourFormat === FluTimePicker.H
@@ -118,7 +118,7 @@ Rectangle {
             id:container
             width: 300
             radius: 4
-            color: FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
+            color: FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(248/255,250/255,253/255,1)
             height: 340
             MouseArea{
                 anchors.fill: parent
@@ -158,16 +158,16 @@ Rectangle {
                             anchors.rightMargin: 5
                             color:  {
                                 if(getListView().currentIndex === position){
-                                    if(FluTheme.isDark){
+                                    if(FluTheme.dark){
                                         return  item_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter
                                     }else{
                                         return  item_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark
                                     }
                                 }
                                 if(item_mouse.containsMouse){
-                                    return FluTheme.isDark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
+                                    return FluTheme.dark ? Qt.rgba(63/255,60/255,61/255,1) : Qt.rgba(237/255,237/255,242/255,1)
                                 }
-                                return FluTheme.isDark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
+                                return FluTheme.dark ? Qt.rgba(51/255,48/255,48/255,1) : Qt.rgba(0,0,0,0)
                             }
                             radius: 3
                             MouseArea{
@@ -191,13 +191,13 @@ Rectangle {
                                 text:model
                                 color: {
                                     if(getListView().currentIndex === position){
-                                        if(FluTheme.isDark){
+                                        if(FluTheme.dark){
                                             return Qt.rgba(0,0,0,1)
                                         }else{
                                             return Qt.rgba(1,1,1,1)
                                         }
                                     }else{
-                                        return FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
+                                        return FluTheme.dark ? "#FFFFFF" : "#1A1A1A"
                                     }
                                 }
                                 anchors.centerIn: parent
@@ -286,7 +286,7 @@ Rectangle {
                 id:layout_actions
                 height: 40
                 radius: 5
-                color: FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+                color: FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
                 anchors{
                     bottom:parent.bottom
                     left: parent.left
diff --git a/src/controls/FluToggleSwitch.qml b/src/controls/FluToggleSwitch.qml
index ad627a8c..443a716a 100644
--- a/src/controls/FluToggleSwitch.qml
+++ b/src/controls/FluToggleSwitch.qml
@@ -37,7 +37,7 @@ Button {
                 radius: 20
             }
             color: {
-                if(FluTheme.isDark){
+                if(FluTheme.dark){
                     if(selected){
                         return FluTheme.primaryColor.dark
                     }
diff --git a/src/controls/FluTooltip.qml b/src/controls/FluTooltip.qml
index 822bd047..6522065f 100644
--- a/src/controls/FluTooltip.qml
+++ b/src/controls/FluTooltip.qml
@@ -16,7 +16,7 @@ ToolTip {
 
     background: Rectangle{
         anchors.fill: parent
-        color: FluTheme.isDark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1)
+        color: FluTheme.dark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1)
         radius: 5
         FluShadow{}
     }
diff --git a/src/controls/FluTreeView.qml b/src/controls/FluTreeView.qml
index 1edc7687..431b8958 100644
--- a/src/controls/FluTreeView.qml
+++ b/src/controls/FluTreeView.qml
@@ -92,7 +92,7 @@ Item {
                     anchors.fill: parent
                     anchors.margins: 2
                     color:{
-                        if(FluTheme.isDark){
+                        if(FluTheme.dark){
                             if(item_layout.singleSelected && selectionMode === FluTreeView.Single){
                                 return Qt.rgba(62/255,62/255,62/255,1)
                             }
diff --git a/src/controls/FluWindow.qml b/src/controls/FluWindow.qml
index fb867b72..31b22820 100644
--- a/src/controls/FluWindow.qml
+++ b/src/controls/FluWindow.qml
@@ -23,9 +23,9 @@ Item {
 
     property color color: {
         if(window && window.active){
-            return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
+            return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(238/255,244/255,249/255,1)
         }
-        return FluTheme.isDark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
+        return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
     }
 
     id:root
@@ -40,7 +40,7 @@ Item {
         id:container
         color:root.color
         anchors.fill: parent
-        anchors.margins: (window && (window.visibility === Window.Maximized)) ? 8/Screen.devicePixelRatio : 0
+        anchors.margins: (window && (window.visibility === Window.Maximized) && FluTheme.frameless) ? 8/Screen.devicePixelRatio : 0
         clip: true
         Behavior on color{
             ColorAnimation {
@@ -53,7 +53,7 @@ Item {
         border.width: 1
         anchors.fill: parent
         color: Qt.rgba(0,0,0,0,)
-        border.color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
+        border.color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
     }