diff --git a/applets/notes/package/contents/ui/main.qml b/applets/notes/package/contents/ui/main.qml
--- a/applets/notes/package/contents/ui/main.qml
+++ b/applets/notes/package/contents/ui/main.qml
@@ -18,7 +18,7 @@
 */
 
 import QtQuick 2.1
-import QtQuick.Controls 1.3 as QtControls
+import QtQuick.Controls 2.5 as QQC2
 import QtQuick.Layouts 1.1
 
 import org.kde.draganddrop 2.0 as DragDrop
@@ -57,6 +57,16 @@
     //note is of type Note
     property QtObject note: noteManager.loadNote(plasmoid.configuration.noteId);
 
+    //define colors used for icons in ToolButtons and for text in TextArea
+    //this is deliberately _NOT_ the theme color as we are over a known bright background
+    //an unknown colour over a known colour is a bad move as you end up with white on yellow
+    function textIconColor() {
+        if (plasmoid.configuration.color === "black" || plasmoid.configuration.color === "translucent-light") {
+            return "#dfdfdf";
+        }
+        return "#202020";
+    }
+
     Timer {
         id: forceFocusTimer
         interval: 1
@@ -134,6 +144,20 @@
             bottomMargin: verticalMargins
         }
 
+        Rectangle {
+            visible: (plasmoid.configuration.color === "white" || plasmoid.configuration.color === "yellow")
+            anchors.right: parent.right
+            anchors.rightMargin: 3
+            anchors.top: parent.top
+            anchors.topMargin: 9
+            anchors.bottom: fontButtons.top
+            anchors.bottomMargin: 22
+            radius: units.largeSpacing
+            width: units.gridUnit / 2
+            color: "black"
+            opacity: 0.2
+        }
+
         PlasmaComponents.TextArea {
             id: mainTextArea
             anchors {
@@ -172,9 +196,7 @@
             }
 
             style: PlasmaStyle.TextAreaStyle {
-                //this is deliberately _NOT_ the theme color as we are over a known bright background
-                //an unknown colour over a known colour is a bad move as you end up with white on yellow
-                textColor: (plasmoid.configuration.color === "black" || plasmoid.configuration.color === "translucent-light") ? "#dfdfdf" : "#202020"
+                textColor: textIconColor()
             }
 
             //update the note if the source changes, but only if the user isn't editing it currently
@@ -247,47 +269,67 @@
                 enabled: opacity > 0
                 visible: fontButtons.showFormatButtons
 
-                PlasmaComponents.ToolButton {
-                    tooltip: i18nc("@info:tooltip", "Bold")
-                    iconSource: "format-text-bold"
+                QQC2.ToolButton {
+                    icon.name: "format-text-bold"
+                    icon.color: textIconColor()
                     checked: documentHandler.bold
                     onClicked: documentHandler.bold = !documentHandler.bold
-                    Accessible.name: tooltip
+                    Accessible.name: boldTooltip.text
+                    QQC2.ToolTip {
+                        id: boldTooltip
+                        text: i18nc("@info:tooltip", "Bold")
+                    }
                 }
-                PlasmaComponents.ToolButton {
-                    tooltip: i18nc("@info:tooltip", "Italic")
-                    iconSource: "format-text-italic"
+                QQC2.ToolButton {
+                    icon.name: "format-text-italic"
+                    icon.color: textIconColor()
                     checked: documentHandler.italic
                     onClicked: documentHandler.italic = !documentHandler.italic
-                    Accessible.name: tooltip
+                    Accessible.name: italicTooltip.text
+                    QQC2.ToolTip {
+                        id: italicTooltip
+                        text: i18nc("@info:tooltip", "Italic")
+                    }
                 }
-                PlasmaComponents.ToolButton {
-                    tooltip: i18nc("@info:tooltip", "Underline")
-                    iconSource: "format-text-underline"
+                QQC2.ToolButton {
+                    icon.name: "format-text-underline"
+                    icon.color: textIconColor()
                     checked: documentHandler.underline
                     onClicked: documentHandler.underline = !documentHandler.underline
-                    Accessible.name: tooltip
+                    Accessible.name: underlineTooltip.text
+                    QQC2.ToolTip {
+                        id: underlineTooltip
+                        text: i18nc("@info:tooltip", "Underline")
+                    }
                 }
-                PlasmaComponents.ToolButton {
-                    tooltip: i18nc("@info:tooltip", "Strikethrough")
-                    iconSource: "format-text-strikethrough"
+                QQC2.ToolButton {
+                    icon.name: "format-text-strikethrough"
+                    icon.color: textIconColor()
                     checked: documentHandler.strikeOut
                     onClicked: documentHandler.strikeOut = !documentHandler.strikeOut
-                    Accessible.name: tooltip
+                    Accessible.name: strikethroughTooltip.text
+                    QQC2.ToolTip {
+                        id: strikethroughTooltip
+                        text: i18nc("@info:tooltip", "Strikethrough")
+                    }
                 }
             }
 
             Item { // spacer
                 Layout.fillWidth: true
                 Layout.fillHeight: true
             }
 
-            PlasmaComponents.ToolButton {
+            QQC2.ToolButton {
                 id: settingsButton
-                tooltip: plasmoid.action("configure").text
-                iconSource: "configure"
+                icon.name: "configure"
+                icon.color: textIconColor()
                 onClicked: plasmoid.action("configure").trigger()
-                Accessible.name: tooltip
+                Accessible.name: settingsTooltip.text
+                QQC2.ToolTip {
+                    id: settingsTooltip
+                    text: plasmoid.action("configure").text
+                }
             }
         }
     }