Here you are. Pls remove all logic yourself, but preserve this layout. This popover must be shown via PopupUtils.open Component { id: readingOptionsPopoverComponent Popover { id: readingOptionsPopover Component.onCompleted: { // var useDarkTheme = DB.getUseDarkTheme() // console.log("USE DARK", useDarkTheme) fontSizeSlider.value = optionsKeeper.fontSize() buttonRow.updateButtonsState() } Column { id: contentColumn anchors { left: parent.left top: parent.top right: parent.right } ListItem.Empty { showDivider: false Label { id: lblLess text: "A" fontSize: "small" color: "black" // TODO TEMP anchors { left: parent.left leftMargin: units.gu(2) verticalCenter: parent.verticalCenter } } Slider { id: fontSizeSlider anchors { right: lblMore.left rightMargin: units.gu(1) left: lblLess.right leftMargin: units.gu(1) verticalCenter: parent.verticalCenter } minimumValue: 0 maximumValue: 2 onValueChanged: { var res if (value < maximumValue / 3) res = 0 else if (value < maximumValue / 3 * 2) res = 1 else res = 2 optionsKeeper.setFontSize(res) } function formatValue(v) { if (v < maximumValue / 3) return i18n.tr("Small") else if (v < maximumValue / 3 * 2) return i18n.tr("Mid") else return i18n.tr("Large") } } // SLider Label { id: lblMore text: "A" fontSize: "large" color: "black" // TODO TEMP anchors { right: parent.right rightMargin: units.gu(2) verticalCenter: parent.verticalCenter } } } // ListItem.Empty ListItem.Empty { Row { id: buttonRow property bool useDark: false spacing: units.gu(2) anchors.centerIn: parent Button { text: "Dark" width: units.gu(14) gradient: buttonRow.useDark ? UbuntuColors.orangeGradient : UbuntuColors.greyGradient onClicked: { optionsKeeper.setUseDarkTheme(true) buttonRow.updateButtonsState() } } Button { text: "Light" width: units.gu(14) gradient: buttonRow.useDark ? UbuntuColors.greyGradient : UbuntuColors.orangeGradient onClicked: { optionsKeeper.setUseDarkTheme(false) buttonRow.updateButtonsState() } } function updateButtonsState() { useDark = optionsKeeper.useDarkTheme() } } } } } } // Component