diff --git a/src/plugins/vis_type_timeseries/kibana.json b/src/plugins/vis_type_timeseries/kibana.json
index 38662c6a7ff89..9053d2543e0d0 100644
--- a/src/plugins/vis_type_timeseries/kibana.json
+++ b/src/plugins/vis_type_timeseries/kibana.json
@@ -4,6 +4,6 @@
   "kibanaVersion": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["data", "expressions", "visualizations"],
+  "requiredPlugins": ["charts", "data", "expressions", "visualizations"],
   "optionalPlugins": ["usageCollection"]
 }
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js
index 024f59c3abb1c..d29b795b10ec8 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js
+++ b/src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/config.js
@@ -53,7 +53,7 @@ export const TimeseriesConfig = injectI18n(function(props) {
     point_size: '',
     value_template: '{{value}}',
     offset_time: '',
-    split_color_mode: 'gradient',
+    split_color_mode: 'kibana',
     axis_min: '',
     axis_max: '',
     stacked: STACKED_OPTIONS.NONE,
@@ -140,10 +140,10 @@ export const TimeseriesConfig = injectI18n(function(props) {
   const splitColorOptions = [
     {
       label: intl.formatMessage({
-        id: 'visTypeTimeseries.timeSeries.gradientLabel',
-        defaultMessage: 'Gradient',
+        id: 'visTypeTimeseries.timeSeries.defaultPaletteLabel',
+        defaultMessage: 'Default palette',
       }),
-      value: 'gradient',
+      value: 'kibana',
     },
     {
       label: intl.formatMessage({
@@ -152,6 +152,13 @@ export const TimeseriesConfig = injectI18n(function(props) {
       }),
       value: 'rainbow',
     },
+    {
+      label: intl.formatMessage({
+        id: 'visTypeTimeseries.timeSeries.gradientLabel',
+        defaultMessage: 'Gradient',
+      }),
+      value: 'gradient',
+    },
   ];
   const selectedSplitColorOption = splitColorOptions.find(option => {
     return model.split_color_mode === option.value;
diff --git a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
index b1c3c7ac6b67a..5cf1619150e5c 100644
--- a/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
+++ b/src/plugins/vis_type_timeseries/public/application/visualizations/views/timeseries/index.js
@@ -33,7 +33,7 @@ import {
 import { EuiIcon } from '@elastic/eui';
 import { getTimezone } from '../../../lib/get_timezone';
 import { eventBus, ACTIVE_CURSOR } from '../../lib/active_cursor';
-import { getUISettings } from '../../../../services';
+import { getUISettings, getChartsSetup } from '../../../../services';
 import { GRID_LINE_CONFIG, ICON_TYPES_MAP, STACKED_OPTIONS } from '../../constants';
 import { AreaSeriesDecorator } from './decorators/area_decorator';
 import { BarSeriesDecorator } from './decorators/bar_decorator';
@@ -94,6 +94,12 @@ export const TimeSeries = ({
   // apply legend style change if bgColor is configured
   const classes = classNames('tvbVisTimeSeries', getChartClasses(backgroundColor));
 
+  // If the color isn't configured by the user, use the color mapping service
+  // to assign a color from the Kibana palette. Colors will be shared across the
+  // session, including dashboards.
+  const { colors } = getChartsSetup();
+  colors.mappedColors.mapKeys(series.filter(({ color }) => !color).map(({ label }) => label));
+
   return (
     <Chart ref={chartRef} renderer="canvas" className={classes}>
       <Settings
@@ -163,6 +169,8 @@ export const TimeSeries = ({
           const stackAccessors = getStackAccessors(stack);
           const isPercentage = stack === STACKED_OPTIONS.PERCENT;
           const key = `${id}-${label}`;
+          // Only use color mapping if there is no color from the server
+          const finalColor = color ?? colors.mappedColors.mapping[label];
 
           if (bars.show) {
             return (
@@ -174,7 +182,7 @@ export const TimeSeries = ({
                 data={data}
                 hideInLegend={hideInLegend}
                 bars={bars}
-                color={color}
+                color={finalColor}
                 stackAccessors={stackAccessors}
                 stackAsPercentage={isPercentage}
                 xScaleType={xScaleType}
@@ -199,7 +207,7 @@ export const TimeSeries = ({
                 data={data}
                 hideInLegend={hideInLegend}
                 lines={lines}
-                color={color}
+                color={finalColor}
                 stackAccessors={stackAccessors}
                 stackAsPercentage={isPercentage}
                 points={points}
diff --git a/src/plugins/vis_type_timeseries/public/metrics_type.ts b/src/plugins/vis_type_timeseries/public/metrics_type.ts
index f83881a619a59..c525ce7fa0b3b 100644
--- a/src/plugins/vis_type_timeseries/public/metrics_type.ts
+++ b/src/plugins/vis_type_timeseries/public/metrics_type.ts
@@ -43,6 +43,7 @@ export const metricsVisDefinition = {
           id: '61ca57f1-469d-11e7-af02-69e470af7417',
           color: '#68BC00',
           split_mode: 'everything',
+          split_color_mode: 'kibana',
           metrics: [
             {
               id: '61ca57f2-469d-11e7-af02-69e470af7417',
diff --git a/src/plugins/vis_type_timeseries/public/plugin.ts b/src/plugins/vis_type_timeseries/public/plugin.ts
index e6c92c31450e7..d98e55bdb340c 100644
--- a/src/plugins/vis_type_timeseries/public/plugin.ts
+++ b/src/plugins/vis_type_timeseries/public/plugin.ts
@@ -32,13 +32,16 @@ import {
   setFieldFormats,
   setCoreStart,
   setDataStart,
+  setChartsSetup,
 } from './services';
 import { DataPublicPluginStart } from '../../data/public';
+import { ChartsPluginSetup } from '../../charts/public';
 
 /** @internal */
 export interface MetricsPluginSetupDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
   visualizations: VisualizationsSetup;
+  charts: ChartsPluginSetup;
 }
 
 /** @internal */
@@ -56,10 +59,11 @@ export class MetricsPlugin implements Plugin<Promise<void>, void> {
 
   public async setup(
     core: CoreSetup,
-    { expressions, visualizations }: MetricsPluginSetupDependencies
+    { expressions, visualizations, charts }: MetricsPluginSetupDependencies
   ) {
     expressions.registerFunction(createMetricsFn);
     setUISettings(core.uiSettings);
+    setChartsSetup(charts);
     visualizations.createReactVisualization(metricsVisDefinition);
   }
 
diff --git a/src/plugins/vis_type_timeseries/public/services.ts b/src/plugins/vis_type_timeseries/public/services.ts
index d93a376584eac..9aa84478fb78b 100644
--- a/src/plugins/vis_type_timeseries/public/services.ts
+++ b/src/plugins/vis_type_timeseries/public/services.ts
@@ -19,6 +19,7 @@
 
 import { I18nStart, SavedObjectsStart, IUiSettingsClient, CoreStart } from 'src/core/public';
 import { createGetterSetter } from '../../kibana_utils/public';
+import { ChartsPluginSetup } from '../../charts/public';
 import { DataPublicPluginStart } from '../../data/public';
 
 export const [getUISettings, setUISettings] = createGetterSetter<IUiSettingsClient>('UISettings');
@@ -36,3 +37,7 @@ export const [getCoreStart, setCoreStart] = createGetterSetter<CoreStart>('CoreS
 export const [getDataStart, setDataStart] = createGetterSetter<DataPublicPluginStart>('DataStart');
 
 export const [getI18n, setI18n] = createGetterSetter<I18nStart>('I18n');
+
+export const [getChartsSetup, setChartsSetup] = createGetterSetter<ChartsPluginSetup>(
+  'ChartsPluginSetup'
+);
diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_split_colors.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_split_colors.js
index ff8d9077b0871..cad8c8f2025a1 100644
--- a/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_split_colors.js
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_split_colors.js
@@ -19,7 +19,7 @@
 
 import Color from 'color';
 
-export function getSplitColors(inputColor, size = 10, style = 'gradient') {
+export function getSplitColors(inputColor, size = 10, style = 'kibana') {
   const color = new Color(inputColor);
   const colors = [];
   let workingColor = Color.hsl(color.hsl().object());
@@ -49,7 +49,7 @@ export function getSplitColors(inputColor, size = 10, style = 'gradient') {
       '#0F1419',
       '#666666',
     ];
-  } else {
+  } else if (style === 'gradient') {
     colors.push(color.string());
     const rotateBy = color.luminosity() / (size - 1);
     for (let i = 0; i < size - 1; i++) {
diff --git a/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_splits.test.js b/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_splits.test.js
index 0874d944033f5..376d32d0da13f 100644
--- a/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_splits.test.js
+++ b/src/plugins/vis_type_timeseries/server/lib/vis_data/helpers/get_splits.test.js
@@ -106,7 +106,7 @@ describe('getSplits(resp, panel, series)', () => {
     ]);
   });
 
-  test('should return a splits for terms group bys', () => {
+  describe('terms group bys', () => {
     const resp = {
       aggregations: {
         SERIES: {
@@ -126,38 +126,89 @@ describe('getSplits(resp, panel, series)', () => {
         },
       },
     };
-    const series = {
-      id: 'SERIES',
-      color: '#F00',
-      split_mode: 'terms',
-      terms_field: 'beat.hostname',
-      terms_size: 10,
-      metrics: [
-        { id: 'AVG', type: 'avg', field: 'cpu' },
-        { id: 'SIBAGG', type: 'avg_bucket', field: 'AVG' },
-      ],
-    };
-    const panel = { type: 'timeseries' };
-    expect(getSplits(resp, panel, series)).toEqual([
-      {
-        id: 'SERIES:example-01',
-        key: 'example-01',
-        label: 'example-01',
-        meta: { bucketSize: 10 },
-        color: 'rgb(255, 0, 0)',
-        timeseries: { buckets: [] },
-        SIBAGG: { value: 1 },
-      },
-      {
-        id: 'SERIES:example-02',
-        key: 'example-02',
-        label: 'example-02',
-        meta: { bucketSize: 10 },
-        color: 'rgb(147, 0, 0)',
-        timeseries: { buckets: [] },
-        SIBAGG: { value: 2 },
-      },
-    ]);
+
+    test('should return a splits with no color', () => {
+      const series = {
+        id: 'SERIES',
+        color: '#F00',
+        split_mode: 'terms',
+        terms_field: 'beat.hostname',
+        terms_size: 10,
+        metrics: [
+          { id: 'AVG', type: 'avg', field: 'cpu' },
+          { id: 'SIBAGG', type: 'avg_bucket', field: 'AVG' },
+        ],
+      };
+      const panel = { type: 'timeseries' };
+      expect(getSplits(resp, panel, series)).toEqual([
+        {
+          id: 'SERIES:example-01',
+          key: 'example-01',
+          label: 'example-01',
+          meta: { bucketSize: 10 },
+          color: undefined,
+          timeseries: { buckets: [] },
+          SIBAGG: { value: 1 },
+        },
+        {
+          id: 'SERIES:example-02',
+          key: 'example-02',
+          label: 'example-02',
+          meta: { bucketSize: 10 },
+          color: undefined,
+          timeseries: { buckets: [] },
+          SIBAGG: { value: 2 },
+        },
+      ]);
+    });
+
+    test('should return gradient color', () => {
+      const series = {
+        id: 'SERIES',
+        color: '#F00',
+        split_mode: 'terms',
+        split_color_mode: 'gradient',
+        terms_field: 'beat.hostname',
+        terms_size: 10,
+        metrics: [
+          { id: 'AVG', type: 'avg', field: 'cpu' },
+          { id: 'SIBAGG', type: 'avg_bucket', field: 'AVG' },
+        ],
+      };
+      const panel = { type: 'timeseries' };
+      expect(getSplits(resp, panel, series)).toEqual([
+        expect.objectContaining({
+          color: 'rgb(255, 0, 0)',
+        }),
+        expect.objectContaining({
+          color: 'rgb(147, 0, 0)',
+        }),
+      ]);
+    });
+
+    test('should return rainbow color', () => {
+      const series = {
+        id: 'SERIES',
+        color: '#F00',
+        split_mode: 'terms',
+        split_color_mode: 'rainbow',
+        terms_field: 'beat.hostname',
+        terms_size: 10,
+        metrics: [
+          { id: 'AVG', type: 'avg', field: 'cpu' },
+          { id: 'SIBAGG', type: 'avg_bucket', field: 'AVG' },
+        ],
+      };
+      const panel = { type: 'timeseries' };
+      expect(getSplits(resp, panel, series)).toEqual([
+        expect.objectContaining({
+          color: '#68BC00',
+        }),
+        expect.objectContaining({
+          color: '#009CE0',
+        }),
+      ]);
+    });
   });
 
   test('should return a splits for filters group bys', () => {
diff --git a/src/plugins/visualizations/server/saved_objects/visualization_migrations.test.ts b/src/plugins/visualizations/server/saved_objects/visualization_migrations.test.ts
index 26f8278cd3d43..83d53d27e41fd 100644
--- a/src/plugins/visualizations/server/saved_objects/visualization_migrations.test.ts
+++ b/src/plugins/visualizations/server/saved_objects/visualization_migrations.test.ts
@@ -1460,4 +1460,62 @@ describe('migration visualization', () => {
       expect(migratedParams.gauge_color_rules[1]).toEqual(params.gauge_color_rules[1]);
     });
   });
+
+  describe('7.8.0 tsvb split_color_mode', () => {
+    const migrate = (doc: any) =>
+      visualizationSavedObjectTypeMigrations['7.8.0'](
+        doc as Parameters<SavedObjectMigrationFn>[0],
+        savedObjectMigrationContext
+      );
+
+    const generateDoc = (params: any) => ({
+      attributes: {
+        title: 'My Vis',
+        type: 'visualization',
+        description: 'This is my super cool vis.',
+        visState: JSON.stringify(params),
+        uiStateJSON: '{}',
+        version: 1,
+        kibanaSavedObjectMeta: {
+          searchSourceJSON: '{}',
+        },
+      },
+    });
+
+    it('should change a missing split_color_mode to gradient', () => {
+      const params = { type: 'metrics', params: { series: [{}] } };
+      const testDoc1 = generateDoc(params);
+      const migratedTestDoc1 = migrate(testDoc1);
+      const series = JSON.parse(migratedTestDoc1.attributes.visState).params.series;
+
+      expect(series[0].split_color_mode).toEqual('gradient');
+    });
+
+    it('should not change the color mode if it is set', () => {
+      const params = { type: 'metrics', params: { series: [{ split_color_mode: 'gradient' }] } };
+      const testDoc1 = generateDoc(params);
+      const migratedTestDoc1 = migrate(testDoc1);
+      const series = JSON.parse(migratedTestDoc1.attributes.visState).params.series;
+
+      expect(series[0].split_color_mode).toEqual('gradient');
+    });
+
+    it('should not change the color mode if it is non-default', () => {
+      const params = { type: 'metrics', params: { series: [{ split_color_mode: 'rainbow' }] } };
+      const testDoc1 = generateDoc(params);
+      const migratedTestDoc1 = migrate(testDoc1);
+      const series = JSON.parse(migratedTestDoc1.attributes.visState).params.series;
+
+      expect(series[0].split_color_mode).toEqual('rainbow');
+    });
+
+    it('should not migrate a visualization of unknown type', () => {
+      const params = { type: 'unknown', params: { series: [{}] } };
+      const doc = generateDoc(params);
+      const migratedDoc = migrate(doc);
+      const series = JSON.parse(migratedDoc.attributes.visState).params.series;
+
+      expect(series[0].split_color_mode).toBeUndefined();
+    });
+  });
 });
diff --git a/src/plugins/visualizations/server/saved_objects/visualization_migrations.ts b/src/plugins/visualizations/server/saved_objects/visualization_migrations.ts
index 80783e41863ea..94473e35a942d 100644
--- a/src/plugins/visualizations/server/saved_objects/visualization_migrations.ts
+++ b/src/plugins/visualizations/server/saved_objects/visualization_migrations.ts
@@ -602,7 +602,39 @@ const migrateMatchAllQuery: SavedObjectMigrationFn = doc => {
       };
     }
   }
+  return doc;
+};
+
+// [TSVB] Default color palette is changing, keep the default for older viz
+const migrateTsvbDefaultColorPalettes: SavedObjectMigrationFn = doc => {
+  const visStateJSON = get<string>(doc, 'attributes.visState');
+  let visState;
+
+  if (visStateJSON) {
+    try {
+      visState = JSON.parse(visStateJSON);
+    } catch (e) {
+      // Let it go, the data is invalid and we'll leave it as is
+    }
+    if (visState && visState.type === 'metrics') {
+      const series: any[] = get(visState, 'params.series') || [];
 
+      series.forEach(part => {
+        // The default value was not saved before
+        if (!part.split_color_mode) {
+          part.split_color_mode = 'gradient';
+        }
+      });
+
+      return {
+        ...doc,
+        attributes: {
+          ...doc.attributes,
+          visState: JSON.stringify(visState),
+        },
+      };
+    }
+  }
   return doc;
 };
 
@@ -639,4 +671,5 @@ export const visualizationSavedObjectTypeMigrations = {
   '7.3.1': flow<SavedObjectMigrationFn>(migrateFiltersAggQueryStringQueries),
   '7.4.2': flow<SavedObjectMigrationFn>(transformSplitFiltersStringToQueryObject),
   '7.7.0': flow<SavedObjectMigrationFn>(migrateOperatorKeyTypo),
+  '7.8.0': flow<SavedObjectMigrationFn>(migrateTsvbDefaultColorPalettes),
 };
diff --git a/test/functional/apps/visualize/_tsvb_time_series.ts b/test/functional/apps/visualize/_tsvb_time_series.ts
index fa79190a5bf94..ac89c2b55e514 100644
--- a/test/functional/apps/visualize/_tsvb_time_series.ts
+++ b/test/functional/apps/visualize/_tsvb_time_series.ts
@@ -25,7 +25,6 @@ export default function({ getPageObjects, getService }: FtrProviderContext) {
   const retry = getService('retry');
   const log = getService('log');
   const kibanaServer = getService('kibanaServer');
-  const testSubjects = getService('testSubjects');
 
   describe('visual builder', function describeIndexTests() {
     beforeEach(async () => {
@@ -126,20 +125,18 @@ export default function({ getPageObjects, getService }: FtrProviderContext) {
         expect(actualCountMin).to.be('3 hours');
       });
 
-      // --reversed class is not implemented in @elastic\chart
-      describe.skip('Dark mode', () => {
+      describe('Dark mode', () => {
         before(async () => {
           await kibanaServer.uiSettings.update({
             'theme:darkMode': true,
           });
         });
 
-        it(`viz should have 'reversed' class when background color is white`, async () => {
+        it(`viz should have light class when background color is white`, async () => {
           await visualBuilder.clickPanelOptions('timeSeries');
           await visualBuilder.setBackgroundColor('#FFFFFF');
 
-          const classNames = await testSubjects.getAttribute('timeseriesChart', 'class');
-          expect(classNames.includes('tvbVisTimeSeries--reversed')).to.be(true);
+          expect(await visualBuilder.checkTimeSeriesIsLight()).to.be(true);
         });
 
         after(async () => {
diff --git a/test/functional/page_objects/visual_builder_page.ts b/test/functional/page_objects/visual_builder_page.ts
index b8e6c812b46bd..12962b3a5cdef 100644
--- a/test/functional/page_objects/visual_builder_page.ts
+++ b/test/functional/page_objects/visual_builder_page.ts
@@ -71,6 +71,10 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       }
     }
 
+    public async checkTimeSeriesIsLight() {
+      return await find.existsByCssSelector('.tvbVisTimeSeriesLight');
+    }
+
     public async checkTimeSeriesLegendIsPresent() {
       const isPresent = await find.existsByCssSelector('.echLegend');
       if (!isPresent) {