Allow the toolbar color to be the same as the theme background and small fixes

example/main.qml

@@ -13,7 +13,8 @@ UI.App {
 
     property string primary: Material.primary
     property string accent: Material.accent
-    property bool theme: false
+    property bool theme: Material.theme === Material.Dark
+    property string themeStyle: "System"
 
     initialPage: UI.AppStackPage {
         id: homePage
@@ -193,10 +194,10 @@ UI.App {
                             text: "Display"
                         }
 
-                        UI.SettingsCheckItem {
-                            title: "Dark Theme"
-                            checkState: root.theme ? Qt.Checked : Qt.Unchecked
-                            onClicked: root.theme = !root.theme
+                        UI.SettingsItem {
+                            title: "Theme"
+                            subtitle: root.themeStyle
+                            onClicked: themeDialog.open()
                             Layout.fillWidth: true
                         }
 
@@ -217,6 +218,14 @@ UI.App {
                                 colorDialog.open()
                             }
                         }
+
+                        UI.SettingsCheckItem {
+                            title: "Tool bar primary color"
+                            subtitle: "Use the primary color for the tool bar background"
+                            checkState: UI.Style.toolBarPrimary ? Qt.Checked : Qt.Unchecked
+                            onClicked: UI.Style.toolBarPrimary = !UI.Style.toolBarPrimary
+                            Layout.fillWidth: true
+                        }
                     }
                 }
             }
@@ -281,6 +290,32 @@ UI.App {
         text: "Information message."
     }
 
+    UI.OptionsDialog {
+        id: themeDialog
+
+        title: "Choose theme style"
+        model: [
+            { name: "Dark", style: Material.Dark },
+            { name: "Light", style: Material.Light },
+            { name: "System", style: Material.System }
+        ]
+        delegate: RowLayout {
+            spacing: 0
+
+            RadioButton {
+                checked: modelData.name === root.themeStyle
+                text: modelData.name
+                Layout.leftMargin: 4
+                onClicked: {
+                    themeDialog.close()
+                    root.themeStyle = modelData.name
+                    UI.Style.theme = modelData.style
+                    root.theme = root.Material.theme === Material.Dark
+                }
+            }
+        }
+    }
+
     UI.OptionsDialog {
         id: colorDialog
 
@@ -293,7 +328,7 @@ UI.App {
             return filtered.length ? filtered[0].name : ""
         }
 
-        title: selectAccentColor ? qsTr("Choose accent color") : qsTr("Choose primary color")
+        title: selectAccentColor ? "Choose accent color" : "Choose primary color"
         model: [
             { name: "Material Red", bg: Material.Red },
             { name: "Material Pink", bg: Material.Pink },

include/BaseUI/core.h

@@ -5,7 +5,9 @@ class QQmlEngine;
 
 namespace BaseUI
 {
-    void init(QQmlEngine *engine);
+
+void init(QQmlEngine *engine);
+
 }
 
 #endif

qml/App.qml

@@ -23,5 +23,5 @@ ApplicationWindow {
 
     Material.primary: Style.primaryColor
     Material.accent: Style.accentColor
-    Material.theme: Style.isDarkTheme ? Material.Dark : Material.Light
+    Material.theme: Style.theme
 }

qml/AppToolBar.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import QtQuick.Layouts
 import QtQuick.Controls
+import QtQuick.Controls.Material
 
 ToolBar {
     id: root
@@ -10,6 +11,8 @@ ToolBar {
 
     property alias title: titleLabel.text
 
+    Material.background: Style.toolBarBackground
+
     RowLayout {
         focus: false
         spacing: 0
@@ -17,7 +20,7 @@ ToolBar {
 
         ToolButton {
             icon.source: root.leftButton?.icon.source ?? ""
-            icon.color: Style.textOnPrimary
+            icon.color: Style.toolBarForeground
             focusPolicy: Qt.NoFocus
             opacity: Style.opacityTitle
             enabled: root.leftButton && root.leftButton.enabled
@@ -26,14 +29,14 @@ ToolBar {
         LabelTitle {
             id: titleLabel
             elide: Label.ElideRight
-            color: Style.textOnPrimary
+            color: Style.toolBarForeground
             Layout.fillWidth: true
         }
         Repeater {
             model: root.rightButtons.length
             delegate: ToolButton {
                 icon.source: root.rightButtons[index].icon.source
-                icon.color: Style.textOnPrimary
+                icon.color: Style.toolBarForeground
                 focusPolicy: Qt.NoFocus
                 opacity: Style.opacityTitle
                 enabled: root.rightButtons[index].enabled

qml/Style.qml

@@ -5,6 +5,8 @@ import QtQuick.Controls.Material
 
 QtObject {
     property bool isDarkTheme: false
+    property int theme: Material.System
+    property bool toolBarPrimary: true
 
     property color primaryColor: Material.color(Material.BlueGrey)
     property color accentColor: Material.color(Material.Orange)
@@ -23,6 +25,8 @@ QtObject {
     property color popupTextColor: isDarkTheme ? "#FFFFFF" : "#424242"
     property color toastColor: isDarkTheme ? "Darkgrey" : "#323232"
     property real toastOpacity: isDarkTheme ? 0.9 : 0.75
+    property color toolBarForeground: toolBarPrimary ? textOnPrimary : (isDarkTheme ? "#FFFFFF" : "#000000")
+    property color toolBarBackground: toolBarPrimary ? primaryColor : (isDarkTheme ? "#1C1B1F" : "#FFFBFE")
 
     // font sizes - defaults from Google Material Design Guide
     property int fontSizeDisplay4: 112

qml/TimeCircle.qml

@@ -72,6 +72,11 @@ Item {
             toMiddleTime = Math.abs(minAngle - handToAnimation.to) / 180 * 400
             fromMiddleTime = Math.abs(hourAngle - handFromAnimation.from) / 180 * 400
         }
+        var animTime = toMiddleTime + fromMiddleTime
+        if (animTime > 0 && animTime < 200) {
+            toMiddleTime = toMiddleTime / animTime * 200
+            fromMiddleTime = fromMiddleTime / animTime * 200
+        }
         handToAnimation.duration = circleToAnimation.duration = toMiddleTime
         handFromAnimation.duration = circleFromAnimation.duration = fromMiddleTime
 
@@ -191,7 +196,7 @@ Item {
                 height: width
                 radius: width / 2
                 anchors.centerIn: parent
-                visible: root.pickMinutes && root.minutes % 5
+                visible: root.pickMinutes && !animation.running && root.minutes % 5
                 color: root.labelDotColor
             }
 

src/core.cpp

@@ -11,7 +11,7 @@ namespace BaseUI
 void init(QQmlEngine *engine)
 {
     QQuickStyle::setStyle("Material");
-    Icons::instance = std::make_unique<Icons>();
+    Icons::instance = new Icons(static_cast<QObject *>(engine));
 #ifdef BASEUI_INCLUDE_ICONS
     QString path = ":/baseui/imports/BaseUI/icons/";
     BaseUI::Icons::registerIcons(engine, path + "MaterialIcons-Regular.ttf",

src/icons.h

@@ -4,8 +4,6 @@
 #include <QQmlEngine>
 #include <QQmlPropertyMap>
 
-#include <memory>
-
 namespace BaseUI
 {
 
@@ -16,7 +14,7 @@ class Icons : public QQmlPropertyMap
 public:
     Icons(QObject *parent = nullptr);
 
-    inline static std::unique_ptr<Icons> instance;
+    inline static Icons *instance;
 
     static void registerIcons(QQmlEngine *engine, const QString &fontPath,
                               const QString &fontName, const QVariantMap &codes);
@@ -52,7 +50,7 @@ public:
         else
             s_engine = engine;
 
-        return Icons::instance.get();
+        return Icons::instance;
     }
 
 private: