How to change background color of the left bar?

[AidanNotFunny]

Title. I was wondering how to change the color of the bar on the left that houses the login button, username + password entry, clock, etc... I'm trying to make a fork of this that follows the Tokyo Night VSCode colors but I was lost on how to change the background color of this bar.

[ChocoMadeleines]

The theme doesn't set any background color on the left pane. It fallback to a default color from QML. In order to set my own background color, I had to add a bit of code in Main.qml.

Here's my modified Main.qml, I've added a comment above the added code:

import QtQuick 2.11
import QtQuick.Layouts 1.11
import QtQuick.Controls 2.4
import "Components"

Pane{
    id: root

    height: config.ScreenHeight
    width: config.ScreenWidth
    padding: config.ScreenPadding || root.padding

    LayoutMirroring.enabled: config.ForceRightToLeft == "true" ? true : Qt.application.layoutDirection === Qt.RightToLeft
    LayoutMirroring.childrenInherit: true

    palette.button: "transparent"
    palette.highlight: config.ThemeColor
    palette.text: config.ThemeColor
    palette.buttonText: config.ThemeColor

    font.family: config.Font
    font.pointSize: config.FontSize !== "" ? config.FontSize : parseInt(height / 80)
    focus: true

   /* The piece of code I've added in order to set my own background color: */
    Item {
        Rectangle {
            implicitWidth: config.ScreenWidth / 2.5
            implicitHeight: config.ScreenHeight
            color: "#F0F1F6" /* <- background color */
        }
    }

    RowLayout {
        anchors.fill: parent
        spacing: 0

        LoginForm {
            Layout.minimumHeight: parent.height
            Layout.maximumWidth: parent.width / 2.5
        }

        Item {
            id: image
            Layout.fillWidth: true
            Layout.fillHeight: true
            Image {
                source: config.background || config.Background
                anchors.fill: parent
                asynchronous: true
                cache: true
                fillMode: config.ScaleImageCropped == "true" ? Image.PreserveAspectCrop : Image.PreserveAspectFit
                clip: true
                mipmap: true
            }
            MouseArea {
                anchors.fill: parent
                onClicked: parent.forceActiveFocus()
            }
        }
    }
}

Hope this helps. :3

miao~ 🐈‍⬛

[ChocoMadeleines]

Also it might be better to modify sugar-dark instead as it seems to have been more maintained. I've not checked it before using sugar-light.