From f93e73368b01bc86e2fd133c70c5d1200f6f8cb7 Mon Sep 17 00:00:00 2001
From: Pikles <11828103+myleskeeffe@users.noreply.github.com>
Date: Sun, 6 Dec 2020 16:18:09 +0800
Subject: [PATCH 1/2] Add CSS Variables for Menu

Add CSS Variables for Menu - Fallback value is as default (primary-text-color and primary-background-color). This allows for the menu to have a color/background that is decoupled from the main pages color/background.
---
 src/components/ha-sidebar.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 7a4791b96748..db92c5d18887 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -772,9 +772,9 @@ class HaSidebar extends LitElement {
           border-bottom: 1px solid transparent;
           white-space: nowrap;
           font-weight: 400;
-          color: var(--primary-text-color);
+          color: var(--menu-text-color, --primary-text-color);
           border-bottom: 1px solid var(--divider-color);
-          background-color: var(--primary-background-color);
+          background-color: var(--menu-background-color, --primary-background-color);
           font-size: 20px;
           align-items: center;
           padding-left: calc(4px + env(safe-area-inset-left));

From 87007be19636e68af5f6b8f87c6c20ec72713840 Mon Sep 17 00:00:00 2001
From: Pikles <11828103+myleskeeffe@users.noreply.github.com>
Date: Sun, 10 Jan 2021 10:48:20 +0800
Subject: [PATCH 2/2] Update CSS Variable Names

Update CSS Variables to better conform to already existing names.
---
 src/components/ha-sidebar.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index db92c5d18887..9f90b8da62a6 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -772,9 +772,9 @@ class HaSidebar extends LitElement {
           border-bottom: 1px solid transparent;
           white-space: nowrap;
           font-weight: 400;
-          color: var(--menu-text-color, --primary-text-color);
+          color: var(--sidebar-menu-button-text-color, --primary-text-color);
           border-bottom: 1px solid var(--divider-color);
-          background-color: var(--menu-background-color, --primary-background-color);
+          background-color: var(--sidebar-menu-button-background-color, --primary-background-color);
           font-size: 20px;
           align-items: center;
           padding-left: calc(4px + env(safe-area-inset-left));