update

example/MainPage.qml

@@ -54,6 +54,10 @@ FluWindow {
                 text:"Rectangle"
                 page:"qrc:/T_Rectangle.qml"
             }
+            ListElement{
+                text:"Theme"
+                page:"qrc:/T_Theme.qml"
+            }
             ListElement{
                 text:"Awesome"
                 page:"qrc:/T_Awesome.qml"

example/T_Theme.qml

@@ -0,0 +1,46 @@
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Window 2.15
+import QtGraphicalEffects 1.15
+import FluentUI 1.0
+
+Item {
+
+    ColumnLayout{
+        spacing: 5
+
+        FluText{
+            text:"Theme"
+            fontStyle: FluText.TitleLarge
+        }
+        RowLayout{
+            Layout.topMargin: 20
+
+
+            Repeater{
+                model: [FluColors._Yellow,FluColors._Orange,FluColors._Red,FluColors._Magenta,FluColors._Purple,FluColors._Blue,FluColors._Teal,FluColors._Green]
+                delegate:  Rectangle{
+                    width: 42
+                    height: 42
+                    radius: 4
+                    color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
+                    FluIcon {
+                        anchors.centerIn: parent
+                        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)
+                    }
+                    MouseArea{
+                        id:mouse_item
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        onClicked: {
+                            FluTheme.primaryColor = modelData
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

example/qml.qrc

@@ -26,5 +26,6 @@
         <file>res/svg/avatar_12.svg</file>
         <file>T_Awesome.qml</file>
         <file>T_TextBox.qml</file>
+        <file>T_Theme.qml</file>
     </qresource>
 </RCC>

src/FluColorSet.cpp

@@ -0,0 +1,7 @@
+#include "FluColorSet.h"
+
+FluColorSet::FluColorSet(QObject *parent)
+    : QObject{parent}
+{
+
+}

src/FluColorSet.h

@@ -0,0 +1,23 @@
+#ifndef FLUCOLORSET_H
+#define FLUCOLORSET_H
+
+#include <QObject>
+#include "stdafx.h"
+
+class FluColorSet : public QObject
+{
+
+    Q_OBJECT
+    Q_PROPERTY_AUTO(QString,darkest)
+    Q_PROPERTY_AUTO(QString,darker)
+    Q_PROPERTY_AUTO(QString,dark)
+    Q_PROPERTY_AUTO(QString,normal)
+    Q_PROPERTY_AUTO(QString,light)
+    Q_PROPERTY_AUTO(QString,lighter)
+    Q_PROPERTY_AUTO(QString,lightest)
+public:
+    explicit FluColorSet(QObject *parent = nullptr);
+
+};
+
+#endif // FLUCOLORSET_H

src/FluColors.cpp

@@ -0,0 +1,7 @@
+#include "FluColors.h"
+
+FluColors::FluColors(QObject *parent)
+    : QObject{parent}
+{
+
+}

src/FluColors.h

@@ -0,0 +1,52 @@
+#ifndef FLUCOLORS_H
+#define FLUCOLORS_H
+
+#include <QObject>
+#include "FluColorSet.h"
+#include "stdafx.h"
+
+class FluColors : public QObject
+{
+    Q_OBJECT
+    Q_PROPERTY_AUTO(QString,Black);
+    Q_PROPERTY_AUTO(QString,White);
+    Q_PROPERTY_AUTO(QString,Grey10);
+    Q_PROPERTY_AUTO(QString,Grey20);
+    Q_PROPERTY_AUTO(QString,Grey30);
+    Q_PROPERTY_AUTO(QString,Grey40);
+    Q_PROPERTY_AUTO(QString,Grey50);
+    Q_PROPERTY_AUTO(QString,Grey60);
+    Q_PROPERTY_AUTO(QString,Grey70);
+    Q_PROPERTY_AUTO(QString,Grey80);
+    Q_PROPERTY_AUTO(QString,Grey90);
+    Q_PROPERTY_AUTO(QString,Grey100);
+    Q_PROPERTY_AUTO(QString,Grey110);
+    Q_PROPERTY_AUTO(QString,Grey120);
+    Q_PROPERTY_AUTO(QString,Grey130);
+    Q_PROPERTY_AUTO(QString,Grey140);
+    Q_PROPERTY_AUTO(QString,Grey150);
+    Q_PROPERTY_AUTO(QString,Grey160);
+    Q_PROPERTY_AUTO(QString,Grey170);
+    Q_PROPERTY_AUTO(QString,Grey180);
+    Q_PROPERTY_AUTO(QString,Grey190);
+    Q_PROPERTY_AUTO(QString,Grey200);
+    Q_PROPERTY_AUTO(QString,Grey210);
+    Q_PROPERTY_AUTO(QString,Grey220);
+
+    Q_PROPERTY_AUTO(FluColorSet*,Yellow);
+    Q_PROPERTY_AUTO(FluColorSet*,Orange);
+    Q_PROPERTY_AUTO(FluColorSet*,Red);
+    Q_PROPERTY_AUTO(FluColorSet*,Magenta);
+    Q_PROPERTY_AUTO(FluColorSet*,Purple);
+    Q_PROPERTY_AUTO(FluColorSet*,Blue);
+    Q_PROPERTY_AUTO(FluColorSet*,Teal);
+    Q_PROPERTY_AUTO(FluColorSet*,Green);
+
+public:
+    explicit FluColors(QObject *parent = nullptr);
+
+signals:
+
+};
+
+#endif // FLUCOLORS_H

src/Fluent.cpp

@@ -30,6 +30,10 @@ void Fluent::registerTypes(const char *uri){
 
     qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
 
+    qmlRegisterSingletonType(QUrl("qrc:/com.zhuzichu/controls/FluColors.qml"),uri,major,minor,"FluColors");
+    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");
@@ -43,7 +47,6 @@ void Fluent::registerTypes(const char *uri){
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluWindow.qml"),uri,major,minor,"FluWindow");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluRectangle.qml"),uri,major,minor,"FluRectangle");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluAppBar.qml"),uri,major,minor,"FluAppBar");
-    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluAppBar.qml"),uri,major,minor,"FluAppBar");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluButton.qml"),uri,major,minor,"FluButton");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCheckBox.qml"),uri,major,minor,"FluCheckBox");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluComboBox.qml"),uri,major,minor,"FluComboBox");

src/FluentUI.pro

@@ -13,6 +13,8 @@ RESOURCES += \
 HEADERS += \
     Def.h \
     FluApp.h \
+    FluColorSet.h \
+    FluColors.h \
     Fluent.h \
     FluentUI.h \
     FramelessView.h \
@@ -23,6 +25,8 @@ HEADERS += \
 SOURCES += \
     Def.cpp \
     FluApp.cpp \
+    FluColorSet.cpp \
+    FluColors.cpp \
     Fluent.cpp \
     FluentUI.cpp \
     WindowHelper.cpp \

src/controls/FluAppBar.qml

@@ -5,14 +5,14 @@ import FluentUI 1.0
 
 Rectangle{
 
-    color: FluApp.isDark ? "#323232" : "#FFFFFF"
+    color: FluTheme.primaryColor.dark
     height: 50
     width: {
         if(parent==null)
             return 200
         return parent.width
     }
-
+    z: 65535
     property string title: "标题"
 
     property bool showDark: false
@@ -52,6 +52,7 @@ Rectangle{
             left: parent.left
             leftMargin: 14
         }
+        color:"#FFFFFFFF"
         fontStyle: FluText.Title
         font.pixelSize: 14
         font.bold: true
@@ -59,13 +60,15 @@ Rectangle{
 
     RowLayout{
         anchors.right: parent.right;
+        anchors.rightMargin: 10
         height: parent.height
-        spacing: 5
+        spacing: 15
 
         TFpsMonitor{
             Layout.alignment: Qt.AlignVCenter
             Layout.rightMargin: 12
             Layout.topMargin: 5
+            color:"#FFFFFFFF"
             visible: showFps
         }
 
@@ -75,6 +78,7 @@ Rectangle{
             visible: showDark
             FluText{
                 text:"夜间模式"
+                color:"#FFFFFFFF"
                 fontStyle: FluText.Body
             }
             FluToggleSwitch{
@@ -85,39 +89,73 @@ Rectangle{
             }
         }
 
-        FluIconButton{
+        FluIcon{
             icon : FluentIcons.FA_window_minimize
             Layout.alignment: Qt.AlignVCenter
             iconSize: 15
-            text:"最小化"
+            color:"#FFFFFF"
-            onClicked: {
+            MouseArea{
-                Window.window.showMinimized()
+                id:mouse_miniminzed
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: {
+                    Window.window.showMinimized()
+                }
+            }
+            FluTooltip{
+                visible: mouse_miniminzed.containsMouse
+                text:"最小化"
+                delay: 1000
             }
         }
-        FluIconButton{
+        FluIcon{
-            icon :  {
+
+            property bool isRestore: {
                 if(Window.window == null)
                     return false
+                return Window.Maximized === Window.window.visibility
+            }
+            color:"#FFFFFF"
+            icon :  {
+                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
-            text:{
-                if(Window.window == null)
-                    return ""
-                Window.Maximized === Window.window.visibility?"向下还原":"最大化"
-            }
             iconSize: 15
-            onClicked: {
+            MouseArea{
-                toggleMaximized()
+                id:mouse_maximized
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: {
+                    toggleMaximized()
+                }
+            }
+            FluTooltip{
+                visible: mouse_maximized.containsMouse
+                text:{
+                    return parent.isRestore?"向下还原":"最大化"
+                }
+                delay: 1000
             }
         }
-        FluIconButton{
+        FluIcon{
             icon : FluentIcons.FA_close
             Layout.alignment: Qt.AlignVCenter
-            text:"关闭"
+            color:"#FFFFFF"
-            onClicked: {
+            MouseArea{
-                Window.window.close()
+                id:mouse_close
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: {
+                    Window.window.close()
+                }
+            }
+            FluTooltip{
+                visible: mouse_close.containsMouse
+                text:"关闭"
+                delay: 1000
             }
         }
     }

src/controls/FluCheckBox.qml

@@ -19,7 +19,7 @@ Item {
             border.color: {
                 if(FluApp.isDark){
                     if(checked){
-                        return Qt.rgba(76/255,160/255,224/255,1)
+                        return FluTheme.primaryColor.lighter
                     }
                     return Qt.rgba(160/255,160/255,160/255,1)
                 }else{
@@ -27,7 +27,7 @@ Item {
                         if(mouse_area.containsMouse){
                             return Qt.rgba(25/255,117/255,187/255,1)
                         }
-                        return Qt.rgba(0/255,102/255,180/255,1)
+                        return FluTheme.primaryColor.dark
                     }
                     return Qt.rgba(136/255,136/255,136/255,1)
                 }
@@ -39,7 +39,7 @@ Item {
                         if(mouse_area.containsMouse){
                             return Qt.rgba(74/255,149/255,207/255,1)
                         }
-                        return Qt.rgba(76/255,160/255,224/255,1)
+                        return FluTheme.primaryColor.lighter
                     }
                     if(mouse_area.containsMouse){
                         return Qt.rgba(62/255,62/255,62/255,1)
@@ -50,7 +50,7 @@ Item {
                         if(mouse_area.containsMouse){
                             return Qt.rgba(25/255,117/255,187/255,1)
                         }
-                        return Qt.rgba(0/255,102/255,180/255,1)
+                        return FluTheme.primaryColor.dark
                     }
                     if(mouse_area.containsMouse){
                         return Qt.rgba(244/255,244/255,244/255,1)

src/controls/FluColorSet.qml

@@ -0,0 +1,13 @@
+import QtQuick 2.15
+
+QtObject {
+
+  property color darkest: Qt.rgba(0/255,74/255,131/255,1)
+  property color darker:Qt.rgba(0/255,84/255,148/255,1)
+  property color dark:Qt.rgba(0/255,102/255,180/255,1)
+  property color normal:Qt.rgba(0/255,120/255,212/255,1)
+  property color light:Qt.rgba(38/255,140/255,218/255,1)
+  property color lighter:Qt.rgba(76/255,160/255,224/255,1)
+  property color lightest:Qt.rgba(96/255,171/255,228/255,1)
+
+}

src/controls/FluColors.qml

@@ -0,0 +1,112 @@
+pragma Singleton
+
+import QtQuick 2.15
+
+QtObject {
+
+    property color _Black: Qt.rgba(0/255,0/255,0/255,1)
+    property color _White: Qt.rgba(255/255,255/255,255/255,1)
+
+    property color _Grey10: Qt.rgba(250/255,249/255,248/255,1)
+    property color _Grey20: Qt.rgba(243/255,242/255,241/255,1)
+    property color _Grey30: Qt.rgba(237/255,235/255,233/255,1)
+    property color _Grey40: Qt.rgba(225/255,223/255,221/255,1)
+    property color _Grey50: Qt.rgba(210/255,208/255,206/255,1)
+    property color _Grey60: Qt.rgba(200/255,198/255,196/255,1)
+    property color _Grey70: Qt.rgba(190/255,187/255,184/255,1)
+    property color _Grey80: Qt.rgba(179/255,176/255,173/255,1)
+    property color _Grey90: Qt.rgba(161/255,159/255,157/255,1)
+    property color _Grey100: Qt.rgba(151/255,149/255,147/255,1)
+    property color _Grey110: Qt.rgba(138/255,136/255,134/255,1)
+    property color _Grey120: Qt.rgba(121/255,119/255,117/255,1)
+    property color _Grey130: Qt.rgba(96/255,94/255,92/255,1)
+    property color _Grey140: Qt.rgba(72/255,70/255,68/255,1)
+    property color _Grey150: Qt.rgba(59/255,58/255,57/255,1)
+    property color _Grey160: Qt.rgba(50/255,49/255,48/255,1)
+    property color _Grey170: Qt.rgba(41/255,40/255,39/255,1)
+    property color _Grey180: Qt.rgba(37/255,36/255,35/255,1)
+    property color _Grey190: Qt.rgba(32/255,31/255,30/255,1)
+    property color _Grey200: Qt.rgba(27/255,26/255,25/255,1)
+    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{
+        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)
+        normal:Qt.rgba(255/255,235/255,59/255,1)
+        light:Qt.rgba(255/255,238/255,88/255,1)
+        lighter:Qt.rgba(255/255,241/255,118/255,1)
+        lightest:Qt.rgba(255/255,245/255,157/255,1)
+    }
+
+    property FluColorSet _Orange:FluColorSet{
+        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)
+        normal:Qt.rgba(247/255,99/255,12/255,1)
+        light:Qt.rgba(248/255,122/255,48/255,1)
+        lighter:Qt.rgba(249/255,145/255,84/255,1)
+        lightest:Qt.rgba(250/255,158/255,104/255,1)
+    }
+
+    property FluColorSet _Red:FluColorSet{
+        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)
+        normal:Qt.rgba(232/255,17/255,35/255,1)
+        light:Qt.rgba(236/255,64/255,79/255,1)
+        lighter:Qt.rgba(238/255,88/255,101/255,1)
+        lightest:Qt.rgba(240/255,107/255,118/255,1)
+    }
+
+    property FluColorSet _Magenta:FluColorSet{
+        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)
+        normal:Qt.rgba(180/255,0/255,158/255,1)
+        light:Qt.rgba(195/255,51/255,177/255,1)
+        lighter:Qt.rgba(202/255,76/255,187/255,1)
+        lightest:Qt.rgba(208/255,96/255,194/255,1)
+    }
+
+    property FluColorSet _Purple:FluColorSet{
+        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)
+        normal:Qt.rgba(116/255,77/255,169/255,1)
+        light:Qt.rgba(134/255,100/255,180/255,1)
+        lighter:Qt.rgba(157/255,130/255,194/255,1)
+        lightest:Qt.rgba(168/255,144/255,201/255,1)
+    }
+
+    property FluColorSet _Blue:FluColorSet{
+        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)
+        normal:Qt.rgba(0/255,120/255,212/255,1)
+        light:Qt.rgba(38/255,140/255,218/255,1)
+        lighter:Qt.rgba(76/255,160/255,224/255,1)
+        lightest:Qt.rgba(96/255,171/255,228/255,1)
+    }
+
+    property FluColorSet _Teal:FluColorSet{
+        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)
+        normal:Qt.rgba(0/255,178/255,148/255,1)
+        light:Qt.rgba(38/255,189/255,164/255,1)
+        lighter:Qt.rgba(76/255,201/255,180/255,1)
+        lightest:Qt.rgba(96/255,207/255,188/255,1)
+    }
+
+    property FluColorSet _Green:FluColorSet{
+        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)
+        normal:Qt.rgba(16/255,124/255,16/255,1)
+        light:Qt.rgba(39/255,137/255,39/255,1)
+        lighter:Qt.rgba(75/255,156/255,75/255,1)
+        lightest:Qt.rgba(106/255,173/255,106/255,1)
+    }
+}

src/controls/FluFilledButton.qml

@@ -19,12 +19,12 @@ Rectangle {
             if(disabled){
                 return Qt.rgba(199/255,199/255,199/255,1)
             }
-            return  button_mouse.containsMouse ? Qt.rgba(74/255,149/255,207/255,1) : Qt.rgba(76/255,160/255,224/255,1)
+            return  button_mouse.containsMouse ? Qt.darker(FluTheme.primaryColor.lighter,1.1) : FluTheme.primaryColor.lighter
         }else{
             if(disabled){
                 return Qt.rgba(199/255,199/255,199/255,1)
             }
-            return  button_mouse.containsMouse ? Qt.rgba(25/255,117/255,187/255,1) : Qt.rgba(0/255,102/255,180/255,1)
+            return  button_mouse.containsMouse ? Qt.lighter(FluTheme.primaryColor.dark,1.1): FluTheme.primaryColor.dark
         }
     }
     width: button_text.implicitWidth

src/controls/FluInfoBar.qml

@@ -205,7 +205,7 @@ FluObject {
                             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);
-                            case mcontrol.const_info:    return Qt.rgba(76/255,160/255,224/255,1);
+                            case mcontrol.const_info:    return FluTheme.primaryColor.lighter;
                             case mcontrol.const_error:   return Qt.rgba(255/255,153/255,164/255,1);
                             }
                             return "#FFFFFF"

src/controls/FluMultiLineTextBox.qml

@@ -10,9 +10,9 @@ TextArea{
     selectByMouse: true
     selectionColor: {
         if(FluApp.isDark){
-            return Qt.rgba(76/255,160/255,224/255,1)
+            return FluTheme.primaryColor.lighter
         }else{
-            return Qt.rgba(0/255,102/255,180/255,1)
+            return FluTheme.primaryColor.dark
         }
     }
     background: FluTextBoxBackground{

src/controls/FluProgressBar.qml

@@ -27,7 +27,7 @@ FluRectangle {
         radius: 3
         width: control.width*progress
         height:  control.height
-        color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) : Qt.rgba(0/255,102/255,180/255,1)
+        color:FluApp.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
 
         Behavior on x{
             id:behavior

src/controls/FluProgressRing.qml

@@ -14,7 +14,7 @@ Rectangle {
     property real progress: 0.25
     property bool indeterminate: true
     readonly property real radius2 : radius - linWidth/2
-    property color primaryColor : FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) : Qt.rgba(0/255,102/255,180/255,1)
+    property color primaryColor : FluApp.isDark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
 
     onProgressChanged: {
         canvas.requestPaint()

src/controls/FluRadioButton.qml

@@ -55,10 +55,10 @@ Item {
                 }
                 if(checked){
                     if(FluApp.isDark){
-                        return Qt.rgba(76/255,164/255,224/255,1)
+                        return FluTheme.primaryColor.lighter
                     }else{
 
-                        return Qt.rgba(0/255,102/255,180/255,1)
+                        return FluTheme.primaryColor.dark
                     }
                 }else{
                     if(FluApp.isDark){

src/controls/FluSlider.qml

@@ -32,7 +32,7 @@ Item{
             radius: 3
             width: control.width*(value/100)
             height:  control.height
-            color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) :Qt.rgba(0/255,102/255,180/255,1)
+            color:FluApp.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
         }
     }
 
@@ -50,7 +50,7 @@ Item{
             width: dotSize/2
             height: dotSize/2
             radius: dotSize/4
-            color:FluApp.isDark ? Qt.rgba(76/255,160/255,224/255,1) :Qt.rgba(0/255,102/255,180/255,1)
+            color:FluApp.isDark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
             anchors.centerIn: parent
             scale: control_mouse.containsMouse ? 1.2 : 1
             Behavior on scale {

src/controls/FluTextBox.qml

@@ -8,9 +8,9 @@ TextField{
     color: FluApp.isDark ? "#FFFFFF" : "#1A1A1A"
     selectionColor: {
         if(FluApp.isDark){
-            return Qt.rgba(76/255,160/255,224/255,1)
+            return FluTheme.primaryColor.lighter
         }else{
-            return Qt.rgba(0/255,102/255,180/255,1)
+            return FluTheme.primaryColor.dark
         }
     }
     selectByMouse: true

src/controls/FluTextBoxBackground.qml

@@ -29,9 +29,9 @@ Rectangle{
         anchors.bottom: parent.bottom
         color: {
             if(FluApp.isDark){
-                input.focus ? Qt.rgba(76/255,160/255,224/255,1)  : Qt.rgba(166/255,166/255,166/255,1)
+                input.focus ? FluTheme.primaryColor.lighter  : Qt.rgba(166/255,166/255,166/255,1)
             }else{
-                return input.focus ? Qt.rgba(0/255,102/255,180/255,1)  : Qt.rgba(183/255,183/255,183/255,1)
+                return input.focus ? FluTheme.primaryColor.dark  : Qt.rgba(183/255,183/255,183/255,1)
             }
         }
         Behavior on height{

src/controls/FluTextButton.qml

@@ -5,9 +5,9 @@ FluText {
     id:root
     color: {
         if(FluApp.isDark){
-        return mouse_area.containsMouse?Qt.rgba(73/255,148/255,206/255,1):Qt.rgba(76/255,160/255,224/255,1)
+        return mouse_area.containsMouse?Qt.rgba(73/255,148/255,206/255,1):FluTheme.primaryColor.lighter
         }
-        return mouse_area.containsMouse?Qt.rgba(24/255,116/255,186/255,1):Qt.rgba(0/255,102/255,180/255,1)
+        return mouse_area.containsMouse?Qt.rgba(24/255,116/255,186/255,1):FluTheme.primaryColor.dark
     }
     signal clicked
     MouseArea{

src/controls/FluTheme.qml

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

src/controls/FluToggleSwitch.qml

@@ -4,7 +4,6 @@ import FluentUI 1.0
 
 Switch {
     id: root
-    property color checkedColor: "#0064B0"
     property var onClickFunc
     width: 40
     implicitWidth: 40
@@ -18,7 +17,7 @@ Switch {
         color: {
             if(FluApp.isDark){
                 if(root.checked){
-                    return checkedColor
+                    return FluTheme.primaryColor.dark
                 }
                 if(switch_mouse.containsMouse){
                     return "#3E3E3C"
@@ -26,7 +25,7 @@ Switch {
                 return "#323232"
             }else{
                 if(root.checked){
-                    return checkedColor
+                    return FluTheme.primaryColor.dark
                 }
                 if(switch_mouse.containsMouse){
                     return "#F4F4F4"
@@ -35,7 +34,7 @@ Switch {
             }
         }
         border.width: 1
-        border.color: root.checked ? checkedColor : "#666666"
+        border.color: root.checked ? Qt.lighter(FluTheme.primaryColor.dark,1.2) : "#666666"
 
         Rectangle {
             x:  root.checked ? root.implicitWidth  - width - 4 : 4

src/controls/FluWindow.qml

@@ -39,8 +39,13 @@ Item {
         }
     }
 
-    FluShadow{
+
-        anchors.fill: container
+    Rectangle{
+        color:FluTheme.primaryColor.dark
+        border.width: 1
+        anchors.fill: parent
+        radius: 4
+        border.color:Qt.lighter(FluTheme.primaryColor.dark,1.3)
     }
 
     Rectangle{

src/controls/TFpsMonitor.qml

@@ -17,6 +17,7 @@ Item {
     Component{
         id:contentComponent
         FluText{
+            color:toou2d_fps.color
             text: " Avg " + fpsAvg + " | " + fps + " Fps";
         }
     }

src/res.qrc

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