diff --git a/nymea-app/styles.qrc b/nymea-app/styles.qrc
index f6b0e151..dada34d6 100644
--- a/nymea-app/styles.qrc
+++ b/nymea-app/styles.qrc
@@ -12,5 +12,9 @@
styles/noir/Page.qml
styles/noir/logo.svg
styles/noir/Button.qml
+ styles/lime/ApplicationWindow.qml
+ styles/lime/Page.qml
+ styles/lime/logo.svg
+ styles/lime/Button.qml
diff --git a/nymea-app/styles/lime/ApplicationWindow.qml b/nymea-app/styles/lime/ApplicationWindow.qml
new file mode 100644
index 00000000..f946ec85
--- /dev/null
+++ b/nymea-app/styles/lime/ApplicationWindow.qml
@@ -0,0 +1,51 @@
+import QtQuick 2.9
+import QtQuick.Templates 2.2
+import QtQuick.Controls.Material 2.2
+
+ApplicationWindow {
+ Material.theme: Material.Dark
+
+ font.pixelSize: 16
+ font.weight: Font.Normal
+ font.capitalization: Font.MixedCase
+ font.family: "Ubuntu"
+
+ Material.background: "black"
+
+ // The core system name.
+ property string systemName: "nymea"
+
+ // The app name
+ property string appName: "nymea:app"
+
+ // The header background color
+ property color primaryColor: Material.background
+
+ // Header font color
+ property color headerForegroundColor: Material.foreground
+
+ // The font color
+ property color foregroundColor: Material.foreground
+
+ // The color of selected/highlighted things
+ property color accentColor: "#ffb0d827"
+
+ // colors for interfaces, e.g. icons
+ property var interfaceColors: {
+ "temperaturesensor": "red",
+ "humiditysensor": "deepskyblue",
+ "moisturesensor":"blue",
+ "lightsensor": "orange",
+ "conductivitysensor": "green",
+ "pressuresensor": "grey",
+ "noisesensor": "darkviolet",
+ "co2sensor": "turquoise",
+ "smartmeterproducer": "lightgreen",
+ "smartmeterconsumer": "orange",
+ "extendedsmartmeterproducer": "blue",
+ "extendedsmartmeterconsumer": "blue"
+ }
+
+ // Optional: Set this to override the cloud environment
+ //property string cloudEnvironment: "Community"
+}
diff --git a/nymea-app/styles/lime/Button.qml b/nymea-app/styles/lime/Button.qml
new file mode 100644
index 00000000..6cb40a2a
--- /dev/null
+++ b/nymea-app/styles/lime/Button.qml
@@ -0,0 +1,86 @@
+import QtQuick 2.9
+import QtQuick.Templates 2.2 as T
+import QtQuick.Controls 2.2
+import QtQuick.Controls.impl 2.2
+import QtQuick.Controls.Material 2.2
+import QtQuick.Controls.Material.impl 2.2
+
+T.Button {
+ id: control
+
+ implicitWidth: Math.max(background ? background.implicitWidth : 0,
+ contentItem.implicitWidth + leftPadding + rightPadding)
+ implicitHeight: Math.max(background ? background.implicitHeight : 0,
+ contentItem.implicitHeight + topPadding + bottomPadding)
+ baselineOffset: contentItem.y + contentItem.baselineOffset
+
+ // external vertical padding is 6 (to increase touch area)
+ padding: 12
+ leftPadding: padding - 4
+ rightPadding: padding - 4
+
+ Material.elevation: flat ? control.down || control.hovered ? 2 : 0
+ : control.down ? 8 : 2
+ Material.background: flat ? "transparent" : undefined
+
+ contentItem: Text {
+ text: control.text
+ color: app.backgroundColor
+ font.bold: control.font.bold
+ font.capitalization: Font.AllUppercase
+ font.family: control.font.family
+ font.hintingPreference: control.font.hintingPreference
+ font.italic: control.font.italic
+ font.letterSpacing: 2
+ font.overline: control.font.overline
+ font.pixelSize: app.smallFont
+ font.weight: Font.Bold
+
+ horizontalAlignment: Text.AlignHCenter
+ verticalAlignment: Text.AlignVCenter
+ elide: Text.ElideRight
+ }
+
+ // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
+ background: Rectangle {
+ implicitWidth: 64
+ implicitHeight: 40
+
+ // external vertical padding is 6 (to increase touch area)
+ y: 6
+ width: parent.width
+ height: parent.height - 12
+ radius: height / 2
+ color: !control.enabled ? control.Material.buttonDisabledColor :
+ control.highlighted ? control.Material.highlightedButtonColor : control.Material.accentColor
+
+ PaddedRectangle {
+ y: parent.height - 4
+ width: parent.width
+ height: 4
+ radius: 2
+ topPadding: -2
+ clip: true
+ visible: control.checkable && (!control.highlighted || control.flat)
+ color: control.checked && control.enabled ? control.Material.accentColor : control.Material.secondaryTextColor
+ }
+
+ // The layer is disabled when the button color is transparent so you can do
+ // Material.background: "transparent" and get a proper flat button without needing
+ // to set Material.elevation as well
+ layer.enabled: control.enabled && control.Material.buttonColor.a > 0
+ layer.effect: ElevationEffect {
+ elevation: control.Material.elevation
+ }
+
+ Ripple {
+ clipRadius: 2
+ width: parent.width
+ height: parent.height
+ pressed: control.pressed
+ anchor: control
+ active: control.down || control.visualFocus || control.hovered
+ color: control.Material.rippleColor
+ }
+ }
+}
diff --git a/nymea-app/styles/lime/Page.qml b/nymea-app/styles/lime/Page.qml
new file mode 100644
index 00000000..43c4f49e
--- /dev/null
+++ b/nymea-app/styles/lime/Page.qml
@@ -0,0 +1,10 @@
+import QtQuick 2.0
+import QtQuick.Templates 2.2
+import QtQuick.Controls.Material 2.2
+
+Page {
+
+ background: Rectangle {
+ color: Material.background
+ }
+}
diff --git a/nymea-app/styles/lime/logo.svg b/nymea-app/styles/lime/logo.svg
new file mode 100644
index 00000000..9d1907c3
--- /dev/null
+++ b/nymea-app/styles/lime/logo.svg
@@ -0,0 +1,603 @@
+
+
+
+