From ebe6fd5659e209d4dbfedfc2d9f1b992e2ba6d04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Stefan=20=C3=85lund?= <alund@spotify.com>
Date: Wed, 15 Apr 2020 11:51:46 +0200
Subject: [PATCH] Dark mode has different sidebar (#537)

---
 packages/core/src/layout/Sidebar/Bar.tsx  | 5 +++--
 packages/theme/src/BackstageTheme.ts      | 2 ++
 packages/theme/src/BackstageThemeDark.ts  | 3 ++-
 packages/theme/src/BackstageThemeLight.ts | 2 ++
 packages/theme/src/types.ts               | 1 +
 5 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/layout/Sidebar/Bar.tsx b/packages/core/src/layout/Sidebar/Bar.tsx
index 23ac14b6a4..4cf3db63ab 100644
--- a/packages/core/src/layout/Sidebar/Bar.tsx
+++ b/packages/core/src/layout/Sidebar/Bar.tsx
@@ -18,8 +18,9 @@ import { makeStyles } from '@material-ui/core';
 import clsx from 'clsx';
 import React, { FC, useRef, useState } from 'react';
 import { sidebarConfig, SidebarContext } from './config';
+import { BackstageTheme } from '@backstage/theme';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles<typeof BackstageTheme>(theme => ({
   root: {
     zIndex: 1000,
     position: 'relative',
@@ -35,7 +36,7 @@ const useStyles = makeStyles(theme => ({
     top: 0,
     bottom: 0,
     padding: 0,
-    background: '#171717',
+    background: theme.palette.sidebar,
     overflowX: 'hidden',
     width: sidebarConfig.drawerWidthClosed,
     transition: theme.transitions.create('width', {
diff --git a/packages/theme/src/BackstageTheme.ts b/packages/theme/src/BackstageTheme.ts
index f264e01861..4f61437400 100644
--- a/packages/theme/src/BackstageTheme.ts
+++ b/packages/theme/src/BackstageTheme.ts
@@ -24,6 +24,7 @@ const COLORS = {
   PAGE_BACKGROUND: '#F8F8F8',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',
   DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',
+  SIDEBAR_BACKGROUND_COLOR: '#171717',
   ERROR_BACKGROUND_COLOR: '#FFEBEE',
   ERROR_TEXT_COLOR: '#CA001B',
   INFO_TEXT_COLOR: '#004e8a',
@@ -86,6 +87,7 @@ const extendedThemeConfig: BackstageMuiThemeOptions = {
     linkHover: COLORS.LINK_TEXT_HOVER,
     link: COLORS.LINK_TEXT,
     gold: yellow.A700,
+    sidebar: COLORS.SIDEBAR_BACKGROUND_COLOR,
   },
   navigation: {
     width: 220,
diff --git a/packages/theme/src/BackstageThemeDark.ts b/packages/theme/src/BackstageThemeDark.ts
index 1f02b893ac..9952a5eeaa 100644
--- a/packages/theme/src/BackstageThemeDark.ts
+++ b/packages/theme/src/BackstageThemeDark.ts
@@ -22,9 +22,9 @@ import { BackstageMuiTheme, BackstageMuiThemeOptions } from './types';
 
 const COLORS = {
   PAGE_BACKGROUND: '#282828',
-  EFAULT_PAGE_THEME_COLOR: '#232323',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',
   DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',
+  SIDEBAR_BACKGROUND_COLOR: '#424242',
   ERROR_BACKGROUND_COLOR: '#FFEBEE',
   ERROR_TEXT_COLOR: '#CA001B',
   INFO_TEXT_COLOR: '#004e8a',
@@ -91,6 +91,7 @@ const extendedThemeConfig: BackstageMuiThemeOptions = {
     linkHover: COLORS.LINK_TEXT_HOVER,
     link: COLORS.LINK_TEXT,
     gold: yellow.A700,
+    sidebar: COLORS.SIDEBAR_BACKGROUND_COLOR,
   },
   navigation: {
     width: 220,
diff --git a/packages/theme/src/BackstageThemeLight.ts b/packages/theme/src/BackstageThemeLight.ts
index f238132f50..a0a063ad24 100644
--- a/packages/theme/src/BackstageThemeLight.ts
+++ b/packages/theme/src/BackstageThemeLight.ts
@@ -24,6 +24,7 @@ const COLORS = {
   PAGE_BACKGROUND: '#F8F8F8',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',
   DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',
+  SIDEBAR_BACKGROUND_COLOR: '#171717',
   ERROR_BACKGROUND_COLOR: '#FFEBEE',
   ERROR_TEXT_COLOR: '#CA001B',
   INFO_TEXT_COLOR: '#004e8a',
@@ -89,6 +90,7 @@ const extendedThemeConfig: BackstageMuiThemeOptions = {
     linkHover: COLORS.LINK_TEXT_HOVER,
     link: COLORS.LINK_TEXT,
     gold: yellow.A700,
+    sidebar: COLORS.SIDEBAR_BACKGROUND_COLOR,
   },
   navigation: {
     width: 220,
diff --git a/packages/theme/src/types.ts b/packages/theme/src/types.ts
index 9a3e93c3a9..cbd3de4efa 100644
--- a/packages/theme/src/types.ts
+++ b/packages/theme/src/types.ts
@@ -38,6 +38,7 @@ export type BackstageMuiPalette = Theme['palette'] & {
   linkHover: string;
   link: string;
   gold: string;
+  sidebar: string;
   bursts: {
     fontColor: string;
     slackChannelText: string;