diff --git a/src/plugins/vis_type_vega/public/__snapshots__/vega_visualization.test.js.snap b/src/plugins/vis_type_vega/public/__snapshots__/vega_visualization.test.js.snap
index 001382d946df6..639559dff3091 100644
--- a/src/plugins/vis_type_vega/public/__snapshots__/vega_visualization.test.js.snap
+++ b/src/plugins/vis_type_vega/public/__snapshots__/vega_visualization.test.js.snap
@@ -1,9 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`VegaVisualizations VegaVisualization - basics should show vega blank rectangle on top of a map (vegamap) 1`] = `""`;
+exports[`VegaVisualizations VegaVisualization - basics should show vega blank rectangle on top of a map (vegamap) 1`] = `""`;
-exports[`VegaVisualizations VegaVisualization - basics should show vega graph (may fail in dev env) 1`] = `""`;
+exports[`VegaVisualizations VegaVisualization - basics should show vega graph (may fail in dev env) 1`] = `""`;
-exports[`VegaVisualizations VegaVisualization - basics should show vegalite graph and update on resize (may fail in dev env) 1`] = `""`;
+exports[`VegaVisualizations VegaVisualization - basics should show vegalite graph and update on resize (may fail in dev env) 1`] = `""`;
-exports[`VegaVisualizations VegaVisualization - basics should show vegalite graph and update on resize (may fail in dev env) 2`] = `""`;
+exports[`VegaVisualizations VegaVisualization - basics should show vegalite graph and update on resize (may fail in dev env) 2`] = `""`;
diff --git a/src/plugins/vis_type_vega/public/data_model/vega_parser.test.js b/src/plugins/vis_type_vega/public/data_model/vega_parser.test.js
index ac92f31b890ed..4883a8129903a 100644
--- a/src/plugins/vis_type_vega/public/data_model/vega_parser.test.js
+++ b/src/plugins/vis_type_vega/public/data_model/vega_parser.test.js
@@ -18,6 +18,7 @@
*/
import { cloneDeep } from 'lodash';
+import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
import { VegaParser } from './vega_parser';
import { bypassExternalUrlCheck } from '../vega_view/vega_base_view';
@@ -70,8 +71,31 @@ describe(`VegaParser._setDefaultColors`, () => {
`vegalite`,
check({}, true, {
config: {
+ axis: {
+ domainColor: euiThemeVars.euiColorChartLines,
+ gridColor: euiThemeVars.euiColorChartLines,
+ tickColor: euiThemeVars.euiColorChartLines,
+ },
+ background: 'transparent',
range: { category: { scheme: 'elastic' } },
mark: { color: '#54B399' },
+ style: {
+ 'group-title': {
+ fill: euiThemeVars.euiColorDarkestShade,
+ },
+ 'guide-label': {
+ fill: euiThemeVars.euiColorDarkShade,
+ },
+ 'guide-title': {
+ fill: euiThemeVars.euiColorDarkestShade,
+ },
+ 'group-subtitle': {
+ fill: euiThemeVars.euiColorDarkestShade,
+ },
+ },
+ title: {
+ color: euiThemeVars.euiColorDarkestShade,
+ },
},
})
);
@@ -80,6 +104,12 @@ describe(`VegaParser._setDefaultColors`, () => {
`vega`,
check({}, false, {
config: {
+ axis: {
+ domainColor: euiThemeVars.euiColorChartLines,
+ gridColor: euiThemeVars.euiColorChartLines,
+ tickColor: euiThemeVars.euiColorChartLines,
+ },
+ background: 'transparent',
range: { category: { scheme: 'elastic' } },
arc: { fill: '#54B399' },
area: { fill: '#54B399' },
@@ -90,6 +120,23 @@ describe(`VegaParser._setDefaultColors`, () => {
shape: { stroke: '#54B399' },
symbol: { fill: '#54B399' },
trail: { fill: '#54B399' },
+ style: {
+ 'group-title': {
+ fill: euiThemeVars.euiColorDarkestShade,
+ },
+ 'guide-label': {
+ fill: euiThemeVars.euiColorDarkShade,
+ },
+ 'guide-title': {
+ fill: euiThemeVars.euiColorDarkestShade,
+ },
+ 'group-subtitle': {
+ fill: euiThemeVars.euiColorDarkestShade,
+ },
+ },
+ title: {
+ color: euiThemeVars.euiColorDarkestShade,
+ },
},
})
);
diff --git a/src/plugins/vis_type_vega/public/data_model/vega_parser.ts b/src/plugins/vis_type_vega/public/data_model/vega_parser.ts
index aceeefd953655..da5c76fa6beab 100644
--- a/src/plugins/vis_type_vega/public/data_model/vega_parser.ts
+++ b/src/plugins/vis_type_vega/public/data_model/vega_parser.ts
@@ -21,7 +21,8 @@ import _ from 'lodash';
import schemaParser from 'vega-schema-url-parser';
import versionCompare from 'compare-versions';
import hjson from 'hjson';
-import { VISUALIZATION_COLORS } from '@elastic/eui';
+import { euiPaletteColorBlind } from '@elastic/eui';
+import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
import { i18n } from '@kbn/i18n';
// @ts-ignore
import { vega, vegaLite } from '../lib/vega';
@@ -47,7 +48,7 @@ import {
} from './types';
// Set default single color to match other Kibana visualizations
-const defaultColor: string = VISUALIZATION_COLORS[0];
+const defaultColor: string = euiPaletteColorBlind()[0];
const locToDirMap: Record = {
left: 'row-reverse',
@@ -659,6 +660,35 @@ The URL is an identifier only. Kibana and your browser will never access this UR
this._setDefaultValue(defaultColor, 'config', 'trail', 'fill');
}
}
+
+ // provide right colors for light and dark themes
+ this._setDefaultValue(euiThemeVars.euiColorDarkestShade, 'config', 'title', 'color');
+ this._setDefaultValue(euiThemeVars.euiColorDarkShade, 'config', 'style', 'guide-label', 'fill');
+ this._setDefaultValue(
+ euiThemeVars.euiColorDarkestShade,
+ 'config',
+ 'style',
+ 'guide-title',
+ 'fill'
+ );
+ this._setDefaultValue(
+ euiThemeVars.euiColorDarkestShade,
+ 'config',
+ 'style',
+ 'group-title',
+ 'fill'
+ );
+ this._setDefaultValue(
+ euiThemeVars.euiColorDarkestShade,
+ 'config',
+ 'style',
+ 'group-subtitle',
+ 'fill'
+ );
+ this._setDefaultValue(euiThemeVars.euiColorChartLines, 'config', 'axis', 'tickColor');
+ this._setDefaultValue(euiThemeVars.euiColorChartLines, 'config', 'axis', 'domainColor');
+ this._setDefaultValue(euiThemeVars.euiColorChartLines, 'config', 'axis', 'gridColor');
+ this._setDefaultValue('transparent', 'config', 'background');
}
/**
diff --git a/src/plugins/vis_type_vega/public/vega_view/vega_base_view.js b/src/plugins/vis_type_vega/public/vega_view/vega_base_view.js
index a2a973d232de0..9b51b68e93bb4 100644
--- a/src/plugins/vis_type_vega/public/vega_view/vega_base_view.js
+++ b/src/plugins/vis_type_vega/public/vega_view/vega_base_view.js
@@ -22,14 +22,14 @@ import moment from 'moment';
import dateMath from '@elastic/datemath';
import { vega, vegaLite } from '../lib/vega';
import { Utils } from '../data_model/utils';
-import { VISUALIZATION_COLORS } from '@elastic/eui';
+import { euiPaletteColorBlind } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { TooltipHandler } from './vega_tooltip';
import { esFilters } from '../../../data/public';
import { getEnableExternalUrls } from '../services';
-vega.scheme('elastic', VISUALIZATION_COLORS);
+vega.scheme('elastic', euiPaletteColorBlind());
// Vega's extension functions are global. When called,
// we forward execution to the instance-specific handler