Adding support for Dark Mode (#29133) (#29513)

* Adding support for Dark Mode * Use transparentize for suggestion icon bg color
elastic · Jan 29, 2019 · 4d3f79c · 4d3f79c
1 parent cfcf4ba
commit 4d3f79c
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 15 deletions.
diff --git a/x-pack/plugins/infra/public/apps/start_app.tsx b/x-pack/plugins/infra/public/apps/start_app.tsx
@@ -15,7 +15,8 @@ import { ThemeProvider } from 'styled-components';
 
 // TODO use theme provided from parentApp when kibana supports it
 import { EuiErrorBoundary } from '@elastic/eui';
-import euiVars from '@elastic/eui/dist/eui_theme_k6_light.json';
+import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import { I18nProvider } from '@kbn/i18n/react';
 import { InfraFrontendLibs } from '../lib/lib';
 import { PageRouter } from '../routes';
@@ -36,7 +37,12 @@ export async function startApp(libs: InfraFrontendLibs) {
         <ConstateProvider devtools>
           <ReduxStoreProvider store={store}>
             <ApolloProvider client={libs.apolloClient}>
-              <ThemeProvider theme={{ eui: euiVars }}>
+              <ThemeProvider
+                theme={() => ({
+                  eui: libs.framework.darkMode ? euiDarkVars : euiLightVars,
+                  darkMode: libs.framework.darkMode,
+                })}
+              >
                 <PageRouter history={history} />
               </ThemeProvider>
             </ApolloProvider>

diff --git a/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiIcon } from '@elastic/eui';
-import { tint } from 'polished';
+import { transparentize } from 'polished';
 import React from 'react';
 import styled from 'styled-components';
 
@@ -66,7 +66,8 @@ const SuggestionItemField = styled.div`
 `;
 
 const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>`
-  background-color: ${props => tint(0.1, getEuiIconColor(props.theme, props.suggestionType))};
+  background-color: ${props =>
+    transparentize(0.9, getEuiIconColor(props.theme, props.suggestionType))};
   color: ${props => getEuiIconColor(props.theme, props.suggestionType)};
   flex: 0 0 auto;
   justify-content: center;

diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx
@@ -56,9 +56,15 @@ export const DensityChart: React.SFC<DensityChartProps> = ({
 };
 
 const PositiveAreaPath = styled.path`
-  fill: ${props => props.theme.eui.euiColorLightShade};
+  fill: ${props =>
+    props.theme.darkMode
+      ? props.theme.eui.euiColorMediumShade
+      : props.theme.eui.euiColorLightShade};
 `;
 
 const NegativeAreaPath = styled.path`
-  fill: ${props => props.theme.eui.euiColorLightestShade};
+  fill: ${props =>
+    props.theme.darkMode
+      ? props.theme.eui.euiColorLightShade
+      : props.theme.eui.euiColorLightestShade};
 `;
diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
@@ -46,11 +46,12 @@ TimeRuler.displayName = 'TimeRuler';
 const TimeRulerTickLabel = styled.text`
   font-size: ${props => props.theme.eui.euiFontSizeXs};
   line-height: ${props => props.theme.eui.euiLineHeight};
-  color: ${props => props.theme.eui.euiTextColor};
+  fill: ${props => props.theme.eui.textColors.subdued};
 `;
 
 const TimeRulerGridLine = styled.line`
-  stroke: ${props => props.theme.eui.euiColorMediumShade};
+  stroke: ${props =>
+    props.theme.darkMode ? props.theme.eui.euiColorDarkShade : props.theme.eui.euiColorMediumShade};
   stroke-dasharray: 2, 2;
   stroke-opacity: 0.5;
   stroke-width: 1px;

diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/item_date_field.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/item_date_field.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { darken } from 'polished';
+import { darken, transparentize } from 'polished';
 import * as React from 'react';
 import { css } from 'styled-components';
 
@@ -45,8 +45,14 @@ const highlightedFieldStyle = css`
 `;
 
 const hoveredFieldStyle = css`
-  background-color: ${props => darken(0.05, props.theme.eui.euiColorHighlight)};
-  border-color: ${props => darken(0.2, props.theme.eui.euiColorHighlight)};
+  background-color: ${props =>
+    props.theme.darkMode
+      ? transparentize(0.9, darken(0.05, props.theme.eui.euiColorHighlight))
+      : darken(0.05, props.theme.eui.euiColorHighlight)};
+  border-color: ${props =>
+    props.theme.darkMode
+      ? transparentize(0.7, darken(0.2, props.theme.eui.euiColorHighlight))
+      : darken(0.2, props.theme.eui.euiColorHighlight)};
   color: ${props => props.theme.eui.euiColorFullShade};
 `;
 

diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/item_message_field.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/item_message_field.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { darken } from 'polished';
+import { darken, transparentize } from 'polished';
 import * as React from 'react';
 import styled, { css } from 'styled-components';
 
@@ -73,7 +73,10 @@ const highlightedFieldStyle = css`
 `;
 
 const hoveredFieldStyle = css`
-  background-color: ${props => darken(0.05, props.theme.eui.euiColorHighlight)};
+  background-color: ${props =>
+    props.theme.darkMode
+      ? transparentize(0.9, darken(0.05, props.theme.eui.euiColorHighlight))
+      : darken(0.05, props.theme.eui.euiColorHighlight)};
 `;
 
 const wrappedFieldStyle = css`

diff --git a/x-pack/plugins/infra/public/components/metrics/side_nav.tsx b/x-pack/plugins/infra/public/components/metrics/side_nav.tsx
@@ -77,7 +77,6 @@ const SideNavContainer = styled.div`
   position: fixed;
   z-index: 1;
   height: 88vh;
-  background-color: #f5f5f5;
   padding-left: 16px;
   margin-left: -16px;
   overflow-y: auto;

diff --git a/x-pack/plugins/infra/public/components/waffle/index.tsx b/x-pack/plugins/infra/public/components/waffle/index.tsx
@@ -93,7 +93,7 @@ const calculateBoundsFromMap = (map: InfraWaffleData): InfraWaffleMapBounds => {
   if (values.length === 1) {
     values.unshift(0);
   }
-  return { min: min(values), max: max(values) };
+  return { min: min(values) || 0, max: max(values) || 0 };
 };
 
 export const Waffle = injectI18n(

diff --git a/x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts b/x-pack/plugins/infra/public/lib/adapters/framework/kibana_framework_adapter.ts
@@ -26,6 +26,7 @@ export class InfraKibanaFrameworkAdapter implements InfraFrameworkAdapter {
   public appState: object;
   public dateFormat?: string;
   public kbnVersion?: string;
+  public darkMode?: boolean;
   public scaledDateFormat?: string;
   public timezone?: string;
 
@@ -132,6 +133,11 @@ export class InfraKibanaFrameworkAdapter implements InfraFrameworkAdapter {
       this.timezone = Private(this.timezoneProvider)();
       this.kbnVersion = kbnVersion;
       this.dateFormat = config.get('dateFormat');
+      try {
+        this.darkMode = config.get('theme:darkMode');
+      } catch (e) {
+        this.darkMode = false;
+      }
       this.scaledDateFormat = config.get('dateFormat:scaled');
     });
 

diff --git a/x-pack/plugins/infra/public/lib/lib.ts b/x-pack/plugins/infra/public/lib/lib.ts
@@ -36,6 +36,7 @@ export interface InfraFrameworkAdapter {
   kbnVersion?: string;
   scaledDateFormat?: string;
   timezone?: string;
+  darkMode?: boolean;
 
   // Methods
   setUISettings(key: string, value: any): void;