update

example/qml/page/T_StaggeredLayout.qml

@@ -11,13 +11,12 @@ FluContentPage{
 
     property var colors : [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
 
-
     ListModel{
         id:list_model
         Component.onCompleted: {
             for(var i=0;i<=100;i++){
                 var item = {}
-                item.color = colors[rand(0,7)].dark
+                item.color = colors[rand(0,7)]
                 item.height = rand(100,300)
                 append(item)
             }
@@ -40,7 +39,7 @@ FluContentPage{
             model:list_model
             delegate: Rectangle{
                 height: model.height
-                color:model.color
+                color:model.color.normal
                 FluText{
                     color:"#FFFFFF"
                     text:model.index
@@ -57,4 +56,3 @@ FluContentPage{
     }
 
 }
-

example/qml/page/T_TabView.qml

@@ -15,12 +15,12 @@ FluScrollablePage{
         id:com_page
         Rectangle{
             anchors.fill: parent
-            color: argument
+            color: argument.normal
         }
     }
 
     function newTab(){
-        tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)].dark)
+        tab_view.appendTab("qrc:/example/res/image/favicon.ico","Document "+tab_view.count(),com_page,colors[Math.floor(Math.random() * 8)])
     }
 
     Component.onCompleted: {
@@ -126,5 +126,4 @@ FluScrollablePage{
 }
 '
     }
-
 }

example/qml/page/T_Theme.qml

@@ -7,32 +7,40 @@ import "../component"
 
 FluScrollablePage{
 
+    property var colorData: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
+    id:root
     title:"Theme"
 
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 270
+        Layout.preferredHeight: 340
         paddings: 10
+
         ColumnLayout{
             spacing:0
             anchors{
                 left: parent.left
             }
-            RowLayout{
+            FluText{
+                text:"主题颜色"
                 Layout.topMargin: 10
+            }
+            RowLayout{
+                Layout.topMargin: 5
                 Repeater{
-                    model: [FluColors.Yellow,FluColors.Orange,FluColors.Red,FluColors.Magenta,FluColors.Purple,FluColors.Blue,FluColors.Teal,FluColors.Green]
-                    delegate:  FluRectangle{
+                    model: root.colorData
+                    delegate:  Rectangle{
                         width: 42
                         height: 42
-                        radius: [4,4,4,4]
+                        radius: 4
                         color: mouse_item.containsMouse ? Qt.lighter(modelData.normal,1.1) : modelData.normal
+                        border.color: modelData.darkest
                         FluIcon {
                             anchors.centerIn: parent
                             iconSource: FluentIcons.AcceptMedium
                             iconSize: 15
-                            visible: modelData === FluTheme.themeColor
+                            visible: modelData === FluTheme.accentColor
                             color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
                         }
                         MouseArea{
@@ -40,12 +48,41 @@ FluScrollablePage{
                             anchors.fill: parent
                             hoverEnabled: true
                             onClicked: {
-                                FluTheme.themeColor = modelData
+                                FluTheme.accentColor = modelData
                             }
                         }
                     }
                 }
             }
+            Row{
+                Layout.topMargin: 10
+                spacing: 10
+                FluText{
+                    text:"自定义主题颜色"
+                    anchors.verticalCenter: parent.verticalCenter
+                }
+                FluColorPicker{
+                    id:color_picker
+                    current: FluTheme.accentColor.normal
+                    onAccepted: {
+                       FluTheme.accentColor = FluColors.createAccentColor(current)
+                    }
+                    FluIcon {
+                        anchors.centerIn: parent
+                        iconSource: FluentIcons.AcceptMedium
+                        iconSize: 15
+                        visible: {
+                            for(var i =0 ;i< root.colorData.length; i++){
+                                if(root.colorData[i] === FluTheme.accentColor){
+                                    return false
+                                }
+                            }
+                            return true
+                        }
+                        color: FluTheme.dark ? Qt.rgba(0,0,0,1) : Qt.rgba(1,1,1,1)
+                    }
+                }
+            }
             FluText{
                 text:"夜间模式"
                 Layout.topMargin: 20
@@ -88,7 +125,7 @@ FluScrollablePage{
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
-        code:'FluTheme.themeColor = FluColors.Orange
+        code:'FluTheme.accentColor = FluColors.Orange
 
 FluTheme.dark = true