Dark mode has different sidebar (#537)

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', {

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,

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,

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,

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;