diff --git a/public/components/event_analytics/explorer/events_views/data_grid.tsx b/public/components/event_analytics/explorer/events_views/data_grid.tsx
index d0385a9a00..fb15d0694c 100644
--- a/public/components/event_analytics/explorer/events_views/data_grid.tsx
+++ b/public/components/event_analytics/explorer/events_views/data_grid.tsx
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './data_grid.scss';
-
 import React, { useMemo, useState, useEffect, useRef, RefObject } from 'react';
 import { IExplorerFields } from '../../../../../common/types/explorer';
 import { DEFAULT_COLUMNS, PAGE_SIZE } from '../../../../../common/constants/explorer';
diff --git a/public/components/event_analytics/explorer/events_views/docViewRow.tsx b/public/components/event_analytics/explorer/events_views/docViewRow.tsx
index 7a4f2c3b27..5cfb0f69c5 100644
--- a/public/components/event_analytics/explorer/events_views/docViewRow.tsx
+++ b/public/components/event_analytics/explorer/events_views/docViewRow.tsx
@@ -3,11 +3,10 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './docView.scss';
 import moment from 'moment';
 import React, { forwardRef, useImperativeHandle, useMemo, useState } from 'react';
 import { toPairs, uniqueId, has, forEach, isEqual } from 'lodash';
-import { EuiButtonEmpty, EuiButtonIcon, EuiIcon, EuiLink } from '@elastic/eui';
+import { EuiButtonIcon, EuiLink } from '@elastic/eui';
 import { useEffect } from 'react';
 import { IExplorerFields, IField } from '../../../../../common/types/explorer';
 import { DocFlyout } from './doc_flyout';
diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
index 1294d03a1c..7ec96871a4 100644
--- a/public/components/event_analytics/explorer/explorer.tsx
+++ b/public/components/event_analytics/explorer/explorer.tsx
@@ -95,7 +95,6 @@ import {
 } from '../redux/slices/viualization_config_slice';
 import { formatError, getDefaultVisConfig } from '../utils';
 import { DataGrid } from './events_views/data_grid';
-import './explorer.scss';
 import { HitsCounter } from './hits_counter/hits_counter';
 import { PatternsTable } from './log_patterns/patterns_table';
 import { NoResults } from './no_results';
@@ -104,6 +103,7 @@ import { TimechartHeader } from './timechart_header';
 import { ExplorerVisualizations } from './visualizations';
 import { CountDistribution } from './visualizations/count_distribution';
 import { QueryManager } from '../../../../common/query_manager';
+import { uiSettingsService } from '../../../../common/utils';
 
 const TYPE_TAB_MAPPING = {
   [SAVED_QUERY]: TAB_EVENT_ID,
@@ -1478,7 +1478,7 @@ export const Explorer = ({
         query,
       }}
     >
-      <div className="dscAppContainer">
+      <div className={`dscAppContainer${uiSettingsService.get('theme:darkMode') && ' explorer-dark'}`}>
         <Search
           key="search-component"
           query={appLogEvents ? generateViewQuery(tempQuery) : query[RAW_QUERY]}
diff --git a/public/components/event_analytics/explorer/log_explorer.scss b/public/components/event_analytics/explorer/log_explorer.scss
index ae6d83409c..772a5b873b 100644
--- a/public/components/event_analytics/explorer/log_explorer.scss
+++ b/public/components/event_analytics/explorer/log_explorer.scss
@@ -25,10 +25,6 @@
   }
 }
 
-// #queryTabs {
-//   height: calc(100vh - 98px);
-// }
-
 .tab-title {
   display: inline-block;
   margin-right: 5px;
diff --git a/public/components/event_analytics/explorer/log_explorer.tsx b/public/components/event_analytics/explorer/log_explorer.tsx
index 9996b19482..656cc82841 100644
--- a/public/components/event_analytics/explorer/log_explorer.tsx
+++ b/public/components/event_analytics/explorer/log_explorer.tsx
@@ -4,7 +4,6 @@
  */
 /* eslint-disable react-hooks/exhaustive-deps */
 
-import './log_explorer.scss';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector, batch } from 'react-redux';
 import { uniqueId, map, isEmpty } from 'lodash';
diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.tsx b/public/components/event_analytics/explorer/sidebar/sidebar.tsx
index 794ce53285..9b57aae095 100644
--- a/public/components/event_analytics/explorer/sidebar/sidebar.tsx
+++ b/public/components/event_analytics/explorer/sidebar/sidebar.tsx
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './sidebar.scss';
-
 import React, { useState } from 'react';
 import { isEmpty } from 'lodash';
 import { EuiTitle, EuiSpacer, EuiFieldSearch, EuiAccordion } from '@elastic/eui';
diff --git a/public/components/event_analytics/explorer/visualizations/_mixins.scss b/public/components/event_analytics/explorer/visualizations/_mixins.scss
deleted file mode 100644
index ae22f3905f..0000000000
--- a/public/components/event_analytics/explorer/visualizations/_mixins.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-// sass-lint:disable-block indentation, no-color-keywords
-
-// SASSTODO: Create this in EUI
-@mixin lnsOverflowShadowHorizontal {
-  $hideHeight: $euiScrollBarCorner * 1.25;
-  mask-image: linear-gradient(
-    to right,
-    transparentize(red, .9) 0%,
-    transparentize(red, 0) $hideHeight,
-    transparentize(red, 0) calc(100% - #{$hideHeight}),
-    transparentize(red, .9) 100%
-  );
-}
-
-// Static styles for a draggable item
-@mixin lnsDraggable {
-  @include euiSlightShadow;
-  background: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightestShade);
-  border: $euiBorderWidthThin dashed transparent;
-  cursor: grab;
-}
-
-// Static styles for a drop area
-@mixin lnsDroppable {
-  border: $euiBorderWidthThin dashed $euiBorderColor;
-}
-
-// Hovering state for drag item and drop area
-@mixin lnsDragDropHover {
-  &:hover {
-    border: $euiBorderWidthThin dashed $euiColorMediumShade;
-  }
-}
-
-// Style for drop area when there's an item being dragged
-@mixin lnsDroppableActive {
-  background-color: transparentize($euiColorVis0, .9);
-}
-
-// Style for drop area while hovering with item
-@mixin lnsDroppableActiveHover {
-  background-color: transparentize($euiColorVis0, .75);
-  border: $euiBorderWidthThin dashed $euiColorVis0;
-}
-
-// Style for drop area that is not allowed for current item
-@mixin lnsDroppableNotAllowed {
-  opacity: .5;
-}
diff --git a/public/components/event_analytics/explorer/visualizations/_variables.scss b/public/components/event_analytics/explorer/visualizations/_variables.scss
deleted file mode 100644
index a4248f8142..0000000000
--- a/public/components/event_analytics/explorer/visualizations/_variables.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/*
- * Copyright OpenSearch Contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-$lnsPanelMinWidth: $euiSize * 18;
-
-// These sizes also match canvas' page thumbnails for consistency
-$lnsSuggestionHeight: 100px;
-$lnsSuggestionWidth: 150px;
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
index 816934a1fa..7025380fc7 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.scss
@@ -3,14 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-.lnsConfigPanel__addLayerBtn {
-  color: transparentize($euiColorMediumShade, 0.3);
-  // Remove EuiButton's default shadow to make button more subtle
-  // sass-lint:disable-block no-important
-  box-shadow: none !important;
-  border-color: $euiColorLightShade;
-}
-
 //
 // LAYOUT
 //
@@ -140,7 +132,7 @@ $vis-editor-sidebar-min-width: 350px;
   
   .cp__rightHeader, .cp__rightSettings {
     padding: 8px;
-    background-color: #FFF;
+    background-color: transparent;
   }
 
   .cp__rightHeader {
@@ -196,3 +188,10 @@ $vis-editor-sidebar-min-width: 350px;
 .color-theme-combo-box-option .euiFlexItem.euiFlexItem--flexGrowZero {
   display: none;
 }
+
+// dark mode
+.explorer-dark {
+  .panel_section, .cp__rightHeader {
+    border-bottom: 1px solid $border-color-on-dark;
+  }
+}
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
index d00bb9c29d..453b0d7c55 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panel.tsx
@@ -19,7 +19,6 @@ import { getVisTypeData } from '../../../../visualizations/charts/helpers/viz_ty
 import { TabContext } from '../../../hooks';
 import { reset as resetVisualizationConfig } from '../../../redux/slices/viualization_config_slice';
 import { getDefaultSpec } from '../visualization_specs/default_spec';
-import './config_panel.scss';
 
 const CONFIG_LAYOUT_TEMPLATE = `
 {
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss
index a6ac6798cb..cac373f90a 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.scss
@@ -4,9 +4,6 @@
  */
 
 .explorer__vizDataConfig {
-  @include euiYScrollWithShadows;
-
-  background: $euiColorLightestShade;
   border-left: $euiBorderThin;
   border-right: $euiBorderThin;
   position: relative;
diff --git a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
index 1d745b8562..2241f435ab 100644
--- a/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
+++ b/public/components/event_analytics/explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel.tsx
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './data_configurations_panel.scss';
-
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import {
   EuiButton,
diff --git a/public/components/event_analytics/explorer/visualizations/index.tsx b/public/components/event_analytics/explorer/visualizations/index.tsx
index 98ab13799c..e4207dfbff 100644
--- a/public/components/event_analytics/explorer/visualizations/index.tsx
+++ b/public/components/event_analytics/explorer/visualizations/index.tsx
@@ -3,10 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './app.scss';
-
 import { isEmpty } from 'lodash';
-
 import React from 'react';
 import { EuiResizableContainer } from '@elastic/eui';
 import { QueryManager } from 'common/query_manager';
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
index 56b8886fe2..397672821e 100644
--- a/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/empty_placeholder.tsx
@@ -6,7 +6,6 @@
 import React from 'react';
 import { EuiIcon, EuiText, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@osd/i18n/react';
-import './empty_placeholder.scss';
 
 export const EmptyPlaceholder = (props: { icon: string }) => (
   <>
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx
index f16c7b69e8..2d1abe549a 100644
--- a/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/plotly_viz_editor/plotly_viz_editor.tsx
@@ -30,9 +30,6 @@
  * GitHub history for details.
  */
 
-import './plotly_vis.scss';
-import './plotly_editor.scss';
-
 import React, { useCallback } from 'react';
 import { EuiCodeEditor } from '@elastic/eui';
 import compactStringify from 'json-stringify-pretty-compact';
diff --git a/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx b/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx
index 99d0aca643..12e8894742 100644
--- a/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx
+++ b/public/components/event_analytics/explorer/visualizations/shared_components/toolbar_button.tsx
@@ -3,7 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './toolbar_button.scss';
 import React from 'react';
 import classNames from 'classnames';
 import { EuiButton, PropsOf, EuiButtonProps } from '@elastic/eui';
diff --git a/public/components/event_analytics/explorer/visualizations/app.scss b/public/components/event_analytics/explorer/visualizations/visualizations.scss
similarity index 91%
rename from public/components/event_analytics/explorer/visualizations/app.scss
rename to public/components/event_analytics/explorer/visualizations/visualizations.scss
index 8f4e129e97..be0fb8ea39 100644
--- a/public/components/event_analytics/explorer/visualizations/app.scss
+++ b/public/components/event_analytics/explorer/visualizations/visualizations.scss
@@ -12,6 +12,5 @@
   display: grid;
   grid-template-rows: auto 1fr;
   grid-area: workspace;
-  background-color: #FFF;
   height: 100%;
 }
diff --git a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss
index a7c2eb66de..820236aa11 100644
--- a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss
+++ b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.scss
@@ -20,6 +20,9 @@
 }
 
 #vis__mainContent .ws__central--canvas {
-  background-color: #FFF;
   border-right: 1px solid #D3DAE6;
 }
+
+.explorer-dark #vis__mainContent .ws__central--canvas {
+  border-right: 1px solid $border-color-on-dark;
+}
diff --git a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
index 81bcb6e0b0..a5fdd3f001 100644
--- a/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
+++ b/public/components/event_analytics/explorer/visualizations/workspace_panel/workspace_panel.tsx
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './workspace_panel.scss';
-
 import React, { useState, useMemo } from 'react';
 import { isEmpty } from 'lodash';
 import { EuiPanel, EuiSwitch } from '@elastic/eui';
diff --git a/public/components/event_analytics/home/home.tsx b/public/components/event_analytics/home/home.tsx
index 1de183f492..ee69667b8c 100644
--- a/public/components/event_analytics/home/home.tsx
+++ b/public/components/event_analytics/home/home.tsx
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import './home.scss';
-
 import React, { useState, ReactElement, useRef, useEffect } from 'react';
 import { useDispatch, batch, useSelector } from 'react-redux';
 import { uniqueId } from 'lodash';
diff --git a/public/components/event_analytics/index.scss b/public/components/event_analytics/index.scss
new file mode 100644
index 0000000000..00accf3bf9
--- /dev/null
+++ b/public/components/event_analytics/index.scss
@@ -0,0 +1,19 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+@import 'home/home';
+@import 'explorer/log_explorer';
+@import 'explorer/explorer';
+@import 'explorer/sidebar/sidebar';
+@import 'explorer/events_views/data_grid';
+@import 'explorer/events_views/docView';
+@import 'explorer/visualizations/config_panel/config_panel';
+@import 'explorer/visualizations/config_panel/config_panes/config_controls/data_configurations_panel';
+@import 'explorer/visualizations/visualizations';
+@import 'explorer/visualizations/shared_components/empty_placeholder';
+@import 'explorer/visualizations/shared_components/toolbar_button';
+@import 'explorer/visualizations/shared_components/plotly_viz_editor/plotly_editor';
+@import 'explorer/visualizations/shared_components/plotly_viz_editor/plotly_vis';
+@import 'explorer/visualizations/workspace_panel/workspace_panel';
\ No newline at end of file
diff --git a/public/index.scss b/public/index.scss
new file mode 100644
index 0000000000..a7dac9456b
--- /dev/null
+++ b/public/index.scss
@@ -0,0 +1,13 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/* base */
+
+@import 'variables';
+
+/* components */
+
+// event analytics
+@import 'components/event_analytics/index';
\ No newline at end of file
diff --git a/public/plugin.ts b/public/plugin.ts
index 1e3189e578..1610c0dbf8 100644
--- a/public/plugin.ts
+++ b/public/plugin.ts
@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import './index.scss';
+
 import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public';
 import {
   observabilityID,
diff --git a/public/variables.scss b/public/variables.scss
new file mode 100644
index 0000000000..943d507498
--- /dev/null
+++ b/public/variables.scss
@@ -0,0 +1,7 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// dark mode border color
+$border-color-on-dark: #343741;