Index: sources/gui/qml/pages/settings/SettingsVolumeBrightness.qml
===================================================================
diff -u -r934354462a353ff5e7fc2ddfe6f3a8f0121a8f3f -rabb959f145f8af64bab3b8f24314bf0ba8f3bb0e
--- sources/gui/qml/pages/settings/SettingsVolumeBrightness.qml	(.../SettingsVolumeBrightness.qml)	(revision 934354462a353ff5e7fc2ddfe6f3a8f0121a8f3f)
+++ sources/gui/qml/pages/settings/SettingsVolumeBrightness.qml	(.../SettingsVolumeBrightness.qml)	(revision abb959f145f8af64bab3b8f24314bf0ba8f3bb0e)
@@ -22,119 +22,90 @@
 //  Qml imports
 import "qrc:/globals"
 import "qrc:/components"
+import "qrc:/compounds"
 
 /*!
  * \brief   SettingsVolumeBrightness is used to adjust the
  *          volume (alarm/system), brightness on the device
  */
 SettingsBase    { id: _root
-    itemIndex       : SettingsStack.VolumeBrightness
-
     readonly property int spacing: 100
 
-    confirmVisible  : false
+    itemIndex                       : SettingsStack.VolumeBrightness
+    confirmVisible                  : false
+    notificationText                :  ""
+    contentArea.anchors.topMargin   : Variables.defaultMargin * 10
 
-    notificationText:  ""
+    QtObject { id: _private
+        readonly property int   contentWidth     : _root.width / 2.5
+    }
 
-    contentArea.anchors.topMargin: Variables.defaultMargin * 10
-
     contentItem: Column {
         spacing     : _root.spacing
 
-        Row {
-            spacing : _root.spacing
+        Row { id: _themeRow
             anchors.horizontalCenter: parent.horizontalCenter
-            Label  {
-                anchors.verticalCenter: parent.verticalCenter
-                width   : labelWidth
-                text    : qsTr("Brightness")
+            width                   : _private.contentWidth
+
+            Text  { id  : _text
+                font.pixelSize  : Fonts.fontPixelContainerTitle
+                color           : Colors.offWhite
+                width           : 200
+                text            : qsTr("Theme")
             }
-            Slider { id : _brightness
-                anchors.verticalCenter: parent.verticalCenter
-                width   : 500
-                step    : 1    // no zero
-                minimum : 1
-                maximum : 5
-                ticks   : true
-                unit    : ""
-                onReleased  : vDevice.brightness = _brightness.value
-                Connections { target: vDevice
-                    // in case the value is rejecte it will be set to the previous value
-                    // also the init value shall be set when navigate to the screen
-                    function onBrightnessChanged    ( vValue ) { _brightness.reset(vValue) }
-                    function onStatusChanged        ( vValue ) { _root.notificationText = vValue }
+
+            BaseSwitch  { id: _darkMode
+                source          : vSettings.darkMode ? "qrc:/images/iMoon" : "qrc:/images/iSun"
+                checked         : vSettings.darkMode
+                activeColor     : Colors.switchActiveColor
+                inactiveColor   : Colors.switchInactiveColor
+                knobColor       : vSettings.darkMode ?  Colors.switchKnobActiveColor :
+                                                        Colors.switchKnobInactiveColor
+
+                onClicked: {
+                    vSettings.darkMode = ! vSettings.darkMode
                 }
             }
-            Label  {
-                anchors.verticalCenter: parent.verticalCenter
-                width   : 100
-                text    : vDevice.brightness + _brightness.unit
-            }
         }
 
-        Row {
-            spacing     : _root.spacing
+        SettingsSlider { id: _brightness
             anchors.horizontalCenter: parent.horizontalCenter
-            Label  {
-                anchors.verticalCenter: parent.verticalCenter
-                width   : labelWidth
-                text: qsTr("Alarm Volume")
-            }
-            Slider { id : _alarmVolume
-                anchors.verticalCenter: parent.verticalCenter
-                width   : 500
-                step    : 1    // no zero
-                minimum : 1
-                maximum : 5
-                ticks   : true
-                unit    : ""
-                onReleased  : {
-                    vAdjustmentAlarmVolume.doAdjustment( _alarmVolume.value )
-                }
-                Connections { target: vAdjustmentAlarmVolume
-                    function onAdjustmentTriggered  ( vValue ) {
-                        if ( vAdjustmentAlarmVolume.adjustment_Accepted ) {
-                            vSettings   .alarmVolume   = vAdjustmentAlarmVolume.hdAlarmVolume
-                            _root.notificationText  = ""
-                        }
-                        else {
-                            _root.notificationText  = vAdjustmentAlarmVolume.adjustment_ReasonText
-                        }
-                        // regardless of the rejection or acceptance the value will be sent from C++ to be adjusted.
-                        _alarmVolume.reset          ( vAdjustmentAlarmVolume.hdAlarmVolume )
-                    }
-                }
-            }
-            Label  {
-                anchors.verticalCenter: parent.verticalCenter
-                width   : 100
-                text    : vAdjustmentAlarmVolume.hdAlarmVolume + _alarmVolume.unit
-            }
+            width                   : _private.contentWidth
+            value                   : vDevice.brightnesss ?? 0
+            text                    : qsTr("Brightness")
+            textOnly                : true
+            sliderBkgndColor        : Colors.createTreatmentInactive
+
+            onValueChanged          :  vDevice.brightness = slider.value
         }
 
-        Row {
-            visible     : false
-            spacing     : _root.spacing
+        SettingsSlider { id: _volume
             anchors.horizontalCenter: parent.horizontalCenter
-            Label  {
-                anchors.verticalCenter: parent.verticalCenter
-                width   : labelWidth
-                text    : qsTr("System Volume")
+            width                   : _private.contentWidth
+            value                   : vAdjustmentAlarmVolume.hdAlarmVolume ?? 0
+            text                    : qsTr("Alarm Volume")
+            textOnly                : true
+            sliderBkgndColor        : Colors.createTreatmentInactive
+
+            onValueChanged  : vAdjustmentAlarmVolume.doAdjustment( slider.value )
+        }
+    }
+
+    Connections { target: vAdjustmentAlarmVolume
+        function onAdjustmentTriggered  ( vValue ) {
+            if ( vAdjustmentAlarmVolume.adjustment_Accepted ) {
+                vSettings   .alarmVolume   = vAdjustmentAlarmVolume.hdAlarmVolume
+                _root.notificationText  = ""
             }
-            Slider { id : _systemVolume
-                anchors.verticalCenter: parent.verticalCenter
-                width   : 500
-                step    : 20    // no zero
-                minimum : 20    // 1
-                maximum : 100   // 5
-                ticks   : true
-                unit    : qsTr("%")
+            else {
+                _root.notificationText  = vAdjustmentAlarmVolume.adjustment_ReasonText
             }
-            Label  {
-                anchors.verticalCenter: parent.verticalCenter
-                width   : 100
-                text    : "0" + _systemVolume.unit
-            }
+            // regardless of the rejection or acceptance the value will be sent from C++ to be adjusted.
+            _alarmVolume.reset          ( vAdjustmentAlarmVolume.hdAlarmVolume )
         }
     }
+
+    Connections { target: vDevice
+        function onStatusChanged    ( vValue ) { _root.notificationText  = vValue ? qsTr("Brightness Status: %1" ).arg(vValue) : "" }
+    }
 }