update

example/App.qml

@@ -10,7 +10,7 @@ Window {
     color: "#00000000"
     Component.onCompleted: {
         FluApp.init(app,properties)
-        FluApp.isDark = false
+        FluTheme.isDark = false
         FluApp.routes = {
             "/":"qrc:/MainPage.qml",
             "/Setting":"qrc:/SettingPage.qml",

example/MainPage.qml

@@ -9,10 +9,10 @@ import FluentUI 1.0
 FluWindow {
     id:rootwindow
     width: 800
-    height: 700
+    height: 600
     title: "FluentUI"
     minimumWidth: 600
-    minimumHeight: 500
+    minimumHeight: 400
 
     FluAppBar{
         id:appbar
@@ -124,7 +124,7 @@ FluWindow {
 
             Rectangle{
                 color: {
-                    if(FluApp.isDark){
+                    if(FluTheme.isDark){
                         if(item_mouse.containsMouse){
                             return "#292929"
                         }
@@ -177,7 +177,7 @@ FluWindow {
     }
 
     Rectangle{
-        color: FluApp.isDark ? "#323232" : "#FFFFFF"
+        color: FluTheme.isDark ? "#323232" : "#FFFFFF"
         radius: 10
         clip: true
         anchors{
@@ -191,7 +191,7 @@ FluWindow {
             bottomMargin: 20
         }
         border.width: 1
-        border.color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
+        border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
 
         Loader{
             anchors.fill: parent

example/T_Theme.qml

@@ -18,7 +18,7 @@ Item {
 
 
             Repeater{
-                model: [FluColors._Yellow,FluColors._Orange,FluColors._Red,FluColors._Magenta,FluColors._Purple,FluColors._Blue,FluColors._Teal,FluColors._Green]
+                model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
                 delegate:  Rectangle{
                     width: 42
                     height: 42
@@ -29,7 +29,7 @@ Item {
                         icon: FluentIcons.FA_check
                         iconSize: 15
                         visible: modelData === FluTheme.primaryColor
-                        color: FluApp.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                        color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                     }
                     MouseArea{
                         id:mouse_item

src/FluApp.cpp

@@ -22,7 +22,6 @@ FluApp *FluApp::getInstance()
 FluApp::FluApp(QObject *parent)
     : QObject{parent}
 {
-    isDark(false);
 }
 
 void FluApp::init(QWindow *window,QMap<QString, QVariant> properties){

src/FluApp.h

@@ -14,7 +14,6 @@ class FluApp : public QObject
 {
     Q_OBJECT
     Q_PROPERTY_AUTO(QString,initialRoute);
-    Q_PROPERTY_AUTO(bool,isDark);
     Q_PROPERTY_AUTO(QJsonObject,routes);
 
 public:

src/FluColors.cpp

@@ -1,7 +1,121 @@
-#include "FluColors.h"
+#include "FluColors.h"
+
+FluColors* FluColors::m_instance = nullptr;
+
+FluColors *FluColors::getInstance()
+{
+    if(FluColors::m_instance == nullptr){
+        FluColors::m_instance = new FluColors;
+    }
+    return FluColors::m_instance;
+}
 
 FluColors::FluColors(QObject *parent)
     : QObject{parent}
 {
+    Black("#000000");
+    White("#ffffff");
+    Grey10("#faf9f8");
+    Grey20("#f3f2f1");
+    Grey30("#edebe9");
+    Grey40("#e1dfdd");
+    Grey50("#d2d0ce");
+    Grey60("#c8c6c4");
+    Grey70("#beb9b8");
+    Grey80("#b3b0ad");
+    Grey90("#a19f9d");
+    Grey100("#979592");
+    Grey110("#8a8886");
+    Grey120("#797775");
+    Grey130("#605e5c");
+    Grey140("#484644");
+    Grey150("#3b3a39");
+    Grey160("#323130");
+    Grey170("#292827");
+    Grey180("#252423");
+    Grey190("#201f1e");
+    Grey200("#1b1a19");
+    Grey210("#161514");
+    Grey220("#11100f");
 
+    FluColorSet *yellow = new FluColorSet();
+    yellow->darkest("#f9a825");
+    yellow->darker("#fbc02d");
+    yellow->dark("#fdd435");
+    yellow->normal("#ffeb3b");
+    yellow->light("#ffee58");
+    yellow->lighter("#fff176");
+    yellow->lightest("#fff59b");
+    Yellow(yellow);
+
+    FluColorSet *orange = new FluColorSet();
+    orange->darkest("#993d07");
+    orange->darker("#ac4408");
+    orange->dark("#d1580a");
+    orange->normal("#f7630c");
+    orange->light("#f87a30");
+    orange->lighter("#f99154");
+    orange->lightest("#fac06a");
+    Orange(orange);
+
+    FluColorSet *red = new FluColorSet();
+    red->darkest("#8f0a15");
+    red->darker("#a20b18");
+    red->dark("#b90d1c");
+    red->normal("#e81123");
+    red->light("#ec404f");
+    red->lighter("#ee5865");
+    red->lightest("#f06b76");
+    Red(red);
+
+
+    FluColorSet *magenta = new FluColorSet();
+    magenta->darkest("#6f004f");
+    magenta->darker("#a0076c");
+    magenta->dark("#b50d7d");
+    magenta->normal("#e3008c");
+    magenta->light("#ea4da8");
+    magenta->lighter("#ee6ec1");
+    magenta->lightest("#f18cd5");
+    Magenta(magenta);
+
+    FluColorSet *purple = new FluColorSet();
+    purple->darkest("#2c0f76");
+    purple->darker("#3d0f99");
+    purple->dark("#4e11ae");
+    purple->normal("#68217a");
+    purple->light("#7b4c9d");
+    purple->lighter("#8d6ebd");
+    purple->lightest("#9e8ed9");
+    Purple(purple);
+
+    FluColorSet *blue = new FluColorSet();
+    blue->darkest("#004A83");
+    blue->darker("#005494");
+    blue->dark("#0066B4");
+    blue->normal("#0078D4");
+    blue->light("#268CDC");
+    blue->lighter("#4CA0E0");
+    blue->lightest("#60ABE4");
+    Blue(blue);
+
+    FluColorSet *teal = new FluColorSet();
+    teal->darkest("#006E5B");
+    teal->darker("#007C67");
+    teal->dark("#00977D");
+    teal->normal("#00B294");
+    teal->light("#26BDA4");
+    teal->lighter("#4DC9B4");
+    teal->lightest("#60CFBC");
+    Teal(teal);
+
+    FluColorSet *green = new FluColorSet();
+    green->darkest("#094C09");
+    green->darker("#0C5D0C");
+    green->dark("#0E6F0E");
+    green->normal("#107C10");
+    green->light("#278939");
+    green->lighter("#4C9C4C");
+    green->lightest("#6AAD6A");
+    Green(green);
 }

src/FluColors.h

@@ -44,8 +44,9 @@ class FluColors : public QObject
 
 public:
     explicit FluColors(QObject *parent = nullptr);
-
+    static FluColors *getInstance();
-signals:
+private:
+    static FluColors* m_instance;
 
 };
 

src/FluTheme.cpp

@@ -0,0 +1,20 @@
+#include "FluTheme.h"
+
+#include "FluColors.h"
+
+FluTheme* FluTheme::m_instance = nullptr;
+
+FluTheme *FluTheme::getInstance()
+{
+    if(FluTheme::m_instance == nullptr){
+        FluTheme::m_instance = new FluTheme;
+    }
+    return FluTheme::m_instance;
+}
+
+FluTheme::FluTheme(QObject *parent)
+    : QObject{parent}
+{
+    primaryColor(FluColors::getInstance()->Blue());
+    isDark(false);
+}

src/FluTheme.h

@@ -0,0 +1,21 @@
+#ifndef FLUTHEME_H
+#define FLUTHEME_H
+
+#include <QObject>
+#include "FluColorSet.h"
+#include "stdafx.h"
+
+class FluTheme : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY_AUTO(FluColorSet*,primaryColor)
+    Q_PROPERTY_AUTO(bool,isDark);
+public:
+    explicit FluTheme(QObject *parent = nullptr);
+    static FluTheme *getInstance();
+private:
+    static FluTheme* m_instance;
+
+};
+
+#endif // FLUTHEME_H

src/Fluent.cpp

@@ -4,6 +4,8 @@
 #include <QQmlContext>
 #include <QGuiApplication>
 #include <QQuickWindow>
+#include "FluColors.h"
+#include "FluTheme.h"
 #include "WindowHelper.h"
 #include "FluApp.h"
 #include "Def.h"
@@ -29,11 +31,12 @@ void Fluent::registerTypes(const char *uri){
     int minor = 0;
 
     qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
+    qmlRegisterType<FluColorSet>(uri,major,minor,"FluColorSet");
+    //    qmlRegisterSingletonType(QUrl("qrc:/com.zhuzichu/controls/FluColors.qml"),uri,major,minor,"FluColors");
+    //    qmlRegisterSingletonType(QUrl("qrc:/com.zhuzichu/controls/FluTheme.qml"),uri,major,minor,"FluTheme");
 
-    qmlRegisterSingletonType(QUrl("qrc:/com.zhuzichu/controls/FluColors.qml"),uri,major,minor,"FluColors");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluColorSetOld.qml"),uri,major,minor,"FluColorSetOld");
-    qmlRegisterSingletonType(QUrl("qrc:/com.zhuzichu/controls/FluTheme.qml"),uri,major,minor,"FluTheme");
 
-    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluColorSet.qml"),uri,major,minor,"FluColorSet");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluMenu.qml"),uri,major,minor,"FluMenu");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluMenuItem.qml"),uri,major,minor,"FluMenuItem");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluScrollBar.qml"),uri,major,minor,"FluScrollBar");
@@ -76,4 +79,8 @@ void Fluent::initializeEngine(QQmlEngine *engine, const char *uri)
     QFontDatabase::addApplicationFont(":/com.zhuzichu/res/font/fontawesome-webfont.ttf");
     FluApp* app = FluApp::getInstance();
     engine->rootContext()->setContextProperty("FluApp",app);
+    FluColors* colors = FluColors::getInstance();
+    engine->rootContext()->setContextProperty("FluColors",colors);
+    FluTheme* theme = FluTheme::getInstance();
+    engine->rootContext()->setContextProperty("FluTheme",theme);
 }

src/FluentUI.pro

@@ -15,6 +15,7 @@ HEADERS += \
     FluApp.h \
     FluColorSet.h \
     FluColors.h \
+    FluTheme.h \
     Fluent.h \
     FluentUI.h \
     FramelessView.h \
@@ -27,6 +28,7 @@ SOURCES += \
     FluApp.cpp \
     FluColorSet.cpp \
     FluColors.cpp \
+    FluTheme.cpp \
     Fluent.cpp \
     FluentUI.cpp \
     WindowHelper.cpp \

src/controls/FluAppBar.qml

@@ -5,7 +5,8 @@ import FluentUI 1.0
 
 Rectangle{
 
-    color: FluTheme.primaryColor.dark
+    id:root
+    color: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
     height: 50
     width: {
         if(parent==null)
@@ -14,7 +15,7 @@ Rectangle{
     }
     z: 65535
     property string title: "标题"
-
+    property color textColor: FluTheme.isDark ? "#000000" : "#FFFFFF"
     property bool showDark: false
     property bool showFps: false
 
@@ -52,7 +53,7 @@ Rectangle{
             left: parent.left
             leftMargin: 14
         }
-        color:"#FFFFFFFF"
+        color:root.textColor
         fontStyle: FluText.Title
         font.pixelSize: 14
         font.bold: true
@@ -62,13 +63,13 @@ Rectangle{
         anchors.right: parent.right;
         anchors.rightMargin: 10
         height: parent.height
-        spacing: 15
+        spacing: 5
 
         TFpsMonitor{
             Layout.alignment: Qt.AlignVCenter
             Layout.rightMargin: 12
             Layout.topMargin: 5
-            color:"#FFFFFFFF"
+            color:root.textColor
             visible: showFps
         }
 
@@ -78,84 +79,53 @@ Rectangle{
             visible: showDark
             FluText{
                 text:"夜间模式"
-                color:"#FFFFFFFF"
+                color:root.textColor
                 fontStyle: FluText.Body
             }
             FluToggleSwitch{
-                checked: FluApp.isDark
+                checked: FluTheme.isDark
                 onClickFunc:function(){
-                    FluApp.isDark = !FluApp.isDark
+                    FluTheme.isDark = !FluTheme.isDark
                 }
             }
         }
 
-        FluIcon{
+        FluIconButton{
             icon : FluentIcons.FA_window_minimize
             Layout.alignment: Qt.AlignVCenter
             iconSize: 15
-            color:"#FFFFFF"
+            text:"最小化"
-            MouseArea{
+            textColor: root.textColor
-                id:mouse_miniminzed
+            color:hovered ? "#20000000" : "#00000000"
-                anchors.fill: parent
+            onClicked: {
-                hoverEnabled: true
+                Window.window.showMinimized()
-                onClicked: {
-                    Window.window.showMinimized()
-                }
-            }
-            FluTooltip{
-                visible: mouse_miniminzed.containsMouse
-                text:"最小化"
-                delay: 1000
             }
         }
-        FluIcon{
+        FluIconButton{
-
+            property bool isRestore:{
-            property bool isRestore: {
                 if(Window.window == null)
                     return false
                 return Window.Maximized === Window.window.visibility
             }
-            color:"#FFFFFF"
+            icon : isRestore  ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize
-            icon :  {
+            color:hovered ? "#20000000" : "#00000000"
-                if(Window.window == null)
-                    return FluentIcons.FA_window_restore
-                return Window.Maximized === Window.window.visibility  ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize
-            }
             Layout.alignment: Qt.AlignVCenter
             visible: resizable
+            textColor: root.textColor
+            text:isRestore?"向下还原":"最大化"
             iconSize: 15
-            MouseArea{
+            onClicked: {
-                id:mouse_maximized
+                toggleMaximized()
-                anchors.fill: parent
-                hoverEnabled: true
-                onClicked: {
-                    toggleMaximized()
-                }
-            }
-            FluTooltip{
-                visible: mouse_maximized.containsMouse
-                text:{
-                    return parent.isRestore?"向下还原":"最大化"
-                }
-                delay: 1000
             }
         }
-        FluIcon{
+        FluIconButton{
             icon : FluentIcons.FA_close
             Layout.alignment: Qt.AlignVCenter
-            color:"#FFFFFF"
+            text:"关闭"
-            MouseArea{
+            textColor: root.textColor
-                id:mouse_close
+            color:hovered ? "#20000000" : "#00000000"
-                anchors.fill: parent
+            onClicked: {
-                hoverEnabled: true
+                Window.window.close()
-                onClicked: {
-                    Window.window.close()
-                }
-            }
-            FluTooltip{
-                visible: mouse_close.containsMouse
-                text:"关闭"
-                delay: 1000
             }
         }
     }

src/controls/FluButton.qml

@@ -15,7 +15,7 @@ Rectangle {
     radius: 4
 
     color:{
-        if(FluApp.isDark){
+        if(FluTheme.isDark){
             if(disabled){
                 return Qt.rgba(59/255,59/255,59/255,1)
             }
@@ -30,7 +30,7 @@ Rectangle {
     width: button_text.implicitWidth
     height: button_text.implicitHeight
 
-    border.color: FluApp.isDark ? "#505050" : "#DFDFDF"
+    border.color: FluTheme.isDark ? "#505050" : "#DFDFDF"
     border.width: 1
 
 
@@ -44,7 +44,7 @@ Rectangle {
         bottomPadding: button.bottomPadding
         anchors.centerIn: parent
         color: {
-            if(FluApp.isDark){
+            if(FluTheme.isDark){
                 if(disabled){
                     return Qt.rgba(131/255,131/255,131/255,1)
                 }

src/controls/FluCheckBox.qml

@@ -17,7 +17,7 @@ Item {
             height: 22
             radius: 4
             border.color: {
-                if(FluApp.isDark){
+                if(FluTheme.isDark){
                     if(checked){
                         return FluTheme.primaryColor.lighter
                     }
@@ -34,7 +34,7 @@ Item {
             }
             border.width: 1
             color: {
-                if(FluApp.isDark){
+                if(FluTheme.isDark){
                     if(checked){
                         if(mouse_area.containsMouse){
                             return Qt.rgba(74/255,149/255,207/255,1)
@@ -64,7 +64,7 @@ Item {
                 icon: FluentIcons.FA_check
                 iconSize: 15
                 visible: checked
-                color: FluApp.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                color: FluTheme.isDark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
             }
         }
         FluText{

src/controls/FluColorsOld.qml

@@ -30,7 +30,7 @@ QtObject {
     property color _Grey210: Qt.rgba(22/255,21/255,20/255,1)
     property color _Grey220: Qt.rgba(17/255,16/255,15/255,1)
 
-    property FluColorSet _Yellow:FluColorSet{
+    property FluColorSetOld _Yellow:FluColorSetOld{
         darkest: Qt.rgba(249/255,168/255,37/255,1)
         darker:Qt.rgba(251/255,192/255,45/255,1)
         dark:Qt.rgba(253/255,216/255,53/255,1)
@@ -40,7 +40,7 @@ QtObject {
         lightest:Qt.rgba(255/255,245/255,157/255,1)
     }
 
-    property FluColorSet _Orange:FluColorSet{
+    property FluColorSetOld _Orange:FluColorSetOld{
         darkest: Qt.rgba(153/255,61/255,7/255,1)
         darker:Qt.rgba(172/255,68/255,8/255,1)
         dark:Qt.rgba(209/255,84/255,10/255,1)
@@ -50,7 +50,7 @@ QtObject {
         lightest:Qt.rgba(250/255,158/255,104/255,1)
     }
 
-    property FluColorSet _Red:FluColorSet{
+    property FluColorSetOld _Red:FluColorSetOld{
         darkest: Qt.rgba(143/255,10/255,21/255,1)
         darker:Qt.rgba(162/255,11/255,24/255,1)
         dark:Qt.rgba(185/255,13/255,28/255,1)
@@ -60,7 +60,7 @@ QtObject {
         lightest:Qt.rgba(240/255,107/255,118/255,1)
     }
 
-    property FluColorSet _Magenta:FluColorSet{
+    property FluColorSetOld _Magenta:FluColorSetOld{
         darkest: Qt.rgba(111/255,0/255,79/255,1)
         darker:Qt.rgba(126/255,0/255,110/255,1)
         dark:Qt.rgba(144/255,0/255,126/255,1)
@@ -70,7 +70,7 @@ QtObject {
         lightest:Qt.rgba(208/255,96/255,194/255,1)
     }
 
-    property FluColorSet _Purple:FluColorSet{
+    property FluColorSetOld _Purple:FluColorSetOld{
         darkest: Qt.rgba(71/255,47/255,104/255,1)
         darker:Qt.rgba(81/255,53/255,118/255,1)
         dark:Qt.rgba(100/255,66/255,147/255,1)
@@ -80,7 +80,7 @@ QtObject {
         lightest:Qt.rgba(168/255,144/255,201/255,1)
     }
 
-    property FluColorSet _Blue:FluColorSet{
+    property FluColorSetOld _Blue:FluColorSetOld{
         darkest: Qt.rgba(0/255,74/255,131/255,1)
         darker:Qt.rgba(0/255,84/255,148/255,1)
         dark:Qt.rgba(0/255,102/255,180/255,1)
@@ -90,7 +90,7 @@ QtObject {
         lightest:Qt.rgba(96/255,171/255,228/255,1)
     }
 
-    property FluColorSet _Teal:FluColorSet{
+    property FluColorSetOld _Teal:FluColorSetOld{
         darkest: Qt.rgba(0/255,110/255,91/255,1)
         darker:Qt.rgba(0/255,124/255,103/255,1)
         dark:Qt.rgba(0/255,151/255,125/255,1)
@@ -100,7 +100,7 @@ QtObject {
         lightest:Qt.rgba(96/255,207/255,188/255,1)
     }
 
-    property FluColorSet _Green:FluColorSet{
+    property FluColorSetOld _Green:FluColorSetOld{
         darkest: Qt.rgba(9/255,76/255,9/255,1)
         darker:Qt.rgba(12/255,93/255,12/255,1)
         dark:Qt.rgba(14/255,111/255,14/255,1)

src/controls/FluDivider.qml

@@ -3,6 +3,6 @@ import FluentUI 1.0
 
 Rectangle {
 
-    color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
+    color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
 
 }

src/controls/FluFilledButton.qml

@@ -15,7 +15,7 @@ Rectangle {
     signal clicked
     radius: 4
     color:{
-        if(FluApp.isDark){
+        if(FluTheme.isDark){
             if(disabled){
                 return Qt.rgba(199/255,199/255,199/255,1)
             }
@@ -34,7 +34,7 @@ Rectangle {
         id: button_text
         text: button.text
         color: {
-            if(FluApp.isDark){
+            if(FluTheme.isDark){
                 if(disabled){
                     return Qt.rgba(173/255,173/255,173/255,1)
                 }

src/controls/FluIcon.qml

@@ -4,7 +4,7 @@ Text {
 
     property int icon
     property int iconSize: 20
-    property color iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
+    property color iconColor: FluTheme.isDark ? "#FFFFFF" : "#000000"
 
     id:text_icon
     font.family: "fontawesome"

src/controls/FluIconButton.qml

@@ -12,11 +12,24 @@ Rectangle {
     property alias text: tool_tip.text
     signal clicked
     property bool disabled: false
-
+    property bool hovered: button_mouse.containsMouse
+    property color textColor: {
+        if(FluTheme.isDark){
+            if(disabled){
+                return Qt.rgba(130/255,130/255,130/255,1)
+            }
+            return Qt.rgba(1,1,1,1)
+        }else{
+            if(disabled){
+                return Qt.rgba(161/255,161/255,161/255,1)
+            }
+            return Qt.rgba(0,0,0,1)
+        }
+    }
     radius: 4
 
     color: {
-        if(FluApp.isDark){
+        if(FluTheme.isDark){
             if(disabled){
                 return Qt.rgba(59/255,59/255,59/255,1)
             }
@@ -36,19 +49,7 @@ Rectangle {
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
         anchors.centerIn: parent
-        color:{
+        color:button.textColor
-            if(FluApp.isDark){
-                if(disabled){
-                    return Qt.rgba(130/255,130/255,130/255,1)
-                }
-                return Qt.rgba(1,1,1,1)
-            }else{
-                if(disabled){
-                    return Qt.rgba(161/255,161/255,161/255,1)
-                }
-                return Qt.rgba(0,0,0,1)
-            }
-        }
         text: (String.fromCharCode(icon).toString(16));
     }
 

src/controls/FluInfoBar.qml

@@ -144,7 +144,7 @@ FluObject {
             width:  rowlayout.width  + (_super.moremsg ? 25 : 80);
             height: rowlayout.height + 20;
             color: {
-                if(FluApp.isDark){
+                if(FluTheme.isDark){
                     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);
@@ -165,7 +165,7 @@ FluObject {
             radius: 4
             border.width: 1
             border.color: {
-                if(FluApp.isDark){
+                if(FluTheme.isDark){
                     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);
@@ -201,7 +201,7 @@ FluObject {
                     }
                     iconSize:20
                     color: {
-                        if(FluApp.isDark){
+                        if(FluTheme.isDark){
                             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);

src/controls/FluMenu.qml

@@ -9,7 +9,7 @@ Popup {
     background: Rectangle {
         implicitWidth: 140
         implicitHeight: container.height
-        color:FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(237/255,237/255,237/255,1)
+        color:FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(237/255,237/255,237/255,1)
         radius: 5
         FluShadow{
             radius: 5

src/controls/FluMenuItem.qml

@@ -17,9 +17,9 @@ Item {
         radius: 4
         color:{
             if(mouse_area.containsMouse){
-                return FluApp.isDark ? Qt.rgba(56/255,56/255,56/255,1) : Qt.rgba(230/255,230/255,230/255,1)
+                return FluTheme.isDark ? Qt.rgba(56/255,56/255,56/255,1) : Qt.rgba(230/255,230/255,230/255,1)
             }
-            return FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(237/255,237/255,237/255,1)
+            return FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(237/255,237/255,237/255,1)
         }
 
         FluText{

src/controls/FluMultiLineTextBox.qml

@@ -5,11 +5,11 @@ import FluentUI 1.0
 TextArea{
     id:input
     width: 300
-    color: FluApp.isDark ? "#FFFFFF" : "#1A1A1A"
+    color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
     wrapMode: Text.WrapAnywhere
     selectByMouse: true
     selectionColor: {
-        if(FluApp.isDark){
+        if(FluTheme.isDark){
             return FluTheme.primaryColor.lighter
         }else{
             return FluTheme.primaryColor.dark

src/controls/FluProgressBar.qml

@@ -8,7 +8,7 @@ FluRectangle {
     height: 6
     radius: [3,3,3,3]
     clip: true
-    color:  FluApp.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
+    color:  FluTheme.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
     property real progress: 0.5
     property bool indeterminate: true
 
@@ -27,7 +27,7 @@ FluRectangle {
         radius: 3
         width: control.width*progress
         height:  control.height
-        color:FluApp.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+        color:FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
 
         Behavior on x{
             id:behavior

src/controls/FluProgressRing.qml

@@ -9,20 +9,20 @@ Rectangle {
     radius: 30
     border.width: linWidth
     color: "#00000000"
-    border.color: FluApp.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
+    border.color: FluTheme.isDark ? Qt.rgba(41/255,41/255,41/255,1) : Qt.rgba(214/255,214/255,214/255,1)
     property real linWidth : 6
     property real progress: 0.25
     property bool indeterminate: true
     readonly property real radius2 : radius - linWidth/2
-    property color primaryColor : FluApp.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
+    property color primaryColor : FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
 
     onProgressChanged: {
         canvas.requestPaint()
     }
 
     Connections{
-        target: FluApp
+        target: FluTheme
-        function onIsDarkChanged(isDark){
+        function onIsDarkChanged(){
             canvas.requestPaint()
         }
     }

src/controls/FluRadioButton.qml

@@ -47,21 +47,21 @@ Item {
             }
             border.color: {
                 if(disabled){
-                    if(FluApp.isDark){
+                    if(FluTheme.isDark){
                         return Qt.rgba(82/255,82/255,82/255,1)
                     }else{
                         return Qt.rgba(198/255,198/255,198/255,1)
                     }
                 }
                 if(checked){
-                    if(FluApp.isDark){
+                    if(FluTheme.isDark){
                         return FluTheme.primaryColor.lighter
                     }else{
 
                         return FluTheme.primaryColor.dark
                     }
                 }else{
-                    if(FluApp.isDark){
+                    if(FluTheme.isDark){
                         return Qt.rgba(161/255,161/255,161/255,1)
                     }else{
 
@@ -73,7 +73,7 @@ Item {
                 if(disabled&&checked){
                     return Qt.rgba(159/255,159/255,159/255,1)
                 }
-                if(FluApp.isDark){
+                if(FluTheme.isDark){
                     if(root_mouse.containsMouse){
                         return Qt.rgba(43/255,43/255,43/255,1)
                     }

src/controls/FluShadow.qml

@@ -4,7 +4,7 @@ Item {
     id:root
     anchors.fill: parent
     anchors.margins: -4
-    property color color: FluApp.isDark ? "#FFFFFF" : "#000000"
+    property color color: FluTheme.isDark ? "#FFFFFF" : "#000000"
 
     property var radius: 4
 

src/controls/FluSlider.qml

@@ -26,13 +26,13 @@ Item{
         radius: [3,3,3,3]
         clip: true
         anchors.verticalCenter: parent.verticalCenter
-        color:FluApp.isDark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
+        color:FluTheme.isDark ? Qt.rgba(162/255,162/255,162/255,1) : Qt.rgba(138/255,138/255,138/255,1)
         Rectangle{
             id:rect
             radius: 3
             width: control.width*(value/100)
             height:  control.height
-            color:FluApp.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            color:FluTheme.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
         }
     }
 
@@ -45,12 +45,12 @@ Item{
                 }
         radius: 15
         anchors.verticalCenter: parent.verticalCenter
-        color:FluApp.isDark ? Qt.rgba(69/255,69/255,69/255,1) :Qt.rgba(1,1,1,1)
+        color:FluTheme.isDark ? 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:FluApp.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
+            color:FluTheme.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
             anchors.centerIn: parent
             scale: control_mouse.containsMouse ? 1.2 : 1
             Behavior on scale {

src/controls/FluText.qml

@@ -17,7 +17,7 @@ Text {
     }
 
     property int fontStyle: FluText.Body
-    property color textColor: FluApp.isDark ? "#FFFFFF" : "#1A1A1A"
+    property color textColor: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
     property int pixelSize : 14
 
     color: textColor

src/controls/FluTextBox.qml

@@ -5,9 +5,9 @@ import FluentUI 1.0
 TextField{
     id:input
     width: 300
-    color: FluApp.isDark ? "#FFFFFF" : "#1A1A1A"
+    color: FluTheme.isDark ? "#FFFFFF" : "#1A1A1A"
     selectionColor: {
-        if(FluApp.isDark){
+        if(FluTheme.isDark){
             return FluTheme.primaryColor.lighter
         }else{
             return FluTheme.primaryColor.dark

src/controls/FluTextBoxBackground.qml

@@ -10,9 +10,9 @@ Rectangle{
     layer.enabled: true
     color: {
         if(input.hovered){
-            return FluApp.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
+            return FluTheme.isDark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
         }
-        return FluApp.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
+        return FluTheme.isDark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(1,1,1,1)
     }
     layer.effect:OpacityMask {
         maskSource: Rectangle {
@@ -22,13 +22,13 @@ Rectangle{
         }
     }
     border.width: 1
-    border.color: FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
+    border.color: FluTheme.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(238/255,238/255,238/255,1)
     Rectangle{
         width: parent.width
         height: input.focus ? 3 : 1
         anchors.bottom: parent.bottom
         color: {
-            if(FluApp.isDark){
+            if(FluTheme.isDark){
                 input.focus ? FluTheme.primaryColor.lighter  : Qt.rgba(166/255,166/255,166/255,1)
             }else{
                 return input.focus ? FluTheme.primaryColor.dark  : Qt.rgba(183/255,183/255,183/255,1)

src/controls/FluTextButton.qml

@@ -4,10 +4,10 @@ import FluentUI 1.0
 FluText {
     id:root
     color: {
-        if(FluApp.isDark){
+        if(FluTheme.isDark){
-        return mouse_area.containsMouse?Qt.rgba(73/255,148/255,206/255,1):FluTheme.primaryColor.lighter
+        return mouse_area.containsMouse?Qt.darker(FluTheme.primaryColor.lighter,1.1):FluTheme.primaryColor.lighter
         }
-        return mouse_area.containsMouse?Qt.rgba(24/255,116/255,186/255,1):FluTheme.primaryColor.dark
+        return mouse_area.containsMouse?Qt.lighter(FluTheme.primaryColor.dark,1.1):FluTheme.primaryColor.dark
     }
     signal clicked
     MouseArea{

src/controls/FluTheme.qml

@@ -1,10 +0,0 @@
-pragma Singleton
-
-import QtQuick 2.15
-
-QtObject {
-
-    property FluColorSet primaryColor: FluColors._Teal
-
-
-}

src/controls/FluThemeOld.qml

@@ -0,0 +1,10 @@
+pragma Singleton
+
+import QtQuick 2.15
+
+QtObject {
+
+    property FluColorSetOld primaryColor: FluColorsOld._Teal
+
+
+}

src/controls/FluToggleSwitch.qml

@@ -15,7 +15,7 @@ Switch {
         height: root.height
         radius: height / 2
         color: {
-            if(FluApp.isDark){
+            if(FluTheme.isDark){
                 if(root.checked){
                     return FluTheme.primaryColor.dark
                 }

src/controls/FluTooltip.qml

@@ -16,7 +16,7 @@ ToolTip {
 
     background: Rectangle{
         anchors.fill: parent
-        color: FluApp.isDark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1)
+        color: FluTheme.isDark ? Qt.rgba(50/255,49/255,48/255,1) : Qt.rgba(1,1,1,1)
         radius: 5
         FluShadow{}
     }

src/controls/FluWindow.qml

@@ -14,7 +14,7 @@ Item {
         return Window.window
     }
 
-    property color color: FluApp.isDark ? "#202020" : "#F3F3F3"
+    property color color: FluTheme.isDark ? "#202020" : "#F3F3F3"
     property string title: "FluentUI"
     property int minimumWidth
     property int maximumWidth
@@ -41,11 +41,11 @@ Item {
 
 
     Rectangle{
-        color:FluTheme.primaryColor.dark
+        color: FluTheme.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
         border.width: 1
         anchors.fill: parent
         radius: 4
-        border.color:Qt.lighter(FluTheme.primaryColor.dark,1.3)
+        border.color:FluTheme.isDark ? Qt.darker(FluTheme.primaryColor.lighter,1.3) : Qt.lighter(FluTheme.primaryColor.dark,1.3)
     }
 
     Rectangle{

src/res.qrc

@@ -32,8 +32,8 @@
         <file>controls/FluMenuItem.qml</file>
         <file>controls/FluShadow.qml</file>
         <file>controls/FluTextButton.qml</file>
-        <file>controls/FluColorSet.qml</file>
+        <file>controls/FluColorSetOld.qml</file>
-        <file>controls/FluColors.qml</file>
+        <file>controls/FluColorsOld.qml</file>
-        <file>controls/FluTheme.qml</file>
+        <file>controls/FluThemeOld.qml</file>
     </qresource>
 </RCC>