Feat/dark theme (#562)

.storybook/main.js

@@ -3,6 +3,11 @@ module.exports = {
     framework: {
         name: "@storybook/react-webpack5",
     },
+    previewBody: (body) => `
+    ${body}
+    <script>
+      document.body.setAttribute('data-theme', 'Light Theme');
+    </script>`,
     babel: { presets: ["@babel/preset-react"] },
     webpackFinal: async (config, { configType }) => {
         config.module.rules = config.module.rules.filter(

.storybook/preview.js

@@ -5,13 +5,15 @@ import React from "react";
 import { Providers } from "../src/Providers/Providers";
 
 export const decorators = [
-    (Story) => (
-        <MemoryRouter initialEntries={["/"]}>
-            <Providers>
-                <Story />
-            </Providers>
-        </MemoryRouter>
-    ),
+    (Story) => {
+        return (
+            <MemoryRouter initialEntries={["/"]}>
+                <Providers>
+                    <Story />
+                </Providers>
+            </MemoryRouter>
+        );
+    },
 ];
 
 export const parameters = {

local_modules/styles/mixins.less

@@ -43,3 +43,13 @@
     color: @colorGrey;
     height: 100vh - 50px;
 }
+
+.dropdown-checkbox {
+    display: flex;
+    align-items: center;
+    padding: 0;
+}
+
+.dropdown-checkbox-item {
+    padding: 6px 8px;
+}

local_modules/styles/variables.less

@@ -10,3 +10,65 @@
 @moira-brand-color: #00bfa5;
 @moira-color-dev: #9780b3;
 @moira-color-staging: #809cb3;
+
+body[data-theme="Light Theme"] {
+    --background-primary: #ffffff;
+    --background-tertiary: #dddddd;
+    --background-secondary: #f2f2f2;
+    --background-plate: #f3f3f3;
+
+    --divider: rgba(0, 0, 0, 0.15);
+
+    --header-menu-buttons: #ffffff;
+
+    --inverted: #151515;
+
+    --item-hover: #f2f2f2;
+
+    --text-primary: #151515;
+    --text-secondary: @colorGrey;
+
+    --icon-checked-color: #00a8ff;
+    --icon-hover-color: #000;
+    --icon-color: #858585;
+
+    --search-selector: #ffffff;
+
+    // code editor light theme colors
+    --background-gutter: #f5f5f5;
+    --line-number-gutter: #6c6c6c;
+    --active-line-gutter: #e2f2ff;
+    --active-line: #cceeff44;
+    --border-gutter: #ddd;
+}
+
+body[data-theme="Dark Theme"] {
+    --background-primary: #151515;
+    --background-secondary: #232323;
+    --background-tertiary: #505050;
+    --background-plate: transparent;
+
+    --divider: #505050;
+
+    --header-menu-buttons: #ffffff;
+
+    --inverted: #fff;
+
+    --item-hover: #232323;
+
+    --text-primary: #e6e6e6;
+    --text-secondary: @colorGrey;
+
+    --icon-checked-color: #00a8ff;
+    --icon-hover-color: #ffffff;
+    --icon-color: #858585;
+
+    --search-selector: #232323;
+
+    // code editor dark theme colors
+    --background-gutter: #585858;
+    --line-number-gutter: #151515;
+    --active-line-gutter: #cbcbcb;
+    --active-line: rgba(255, 255, 255, 0.16);
+    --border-gutter: #979797;
+}

package.json

@@ -24,10 +24,10 @@
         "screenshots": "start-server-and-test storybook:ci http://localhost:9001 pw:screenshotTest"
     },
     "dependencies": {
-        "@skbkontur-moira/codemirror-metricsql": "0.0.1-dev.1809240003",
         "@lezer/highlight": "1.1.6",
         "@reduxjs/toolkit": "2.2.1",
         "@sentry/react": "7.81.1",
+        "@skbkontur-moira/codemirror-metricsql": "0.0.1-dev.1809240003",
         "@skbkontur/react-icons": "5.2.9",
         "@skbkontur/react-stack-layout": "1.0.3",
         "@skbkontur/react-ui": "4.16.0",

src/Components/AddingButton/AddingButton.less

@@ -1,12 +1,12 @@
-@import '~styles/variables.less';
-@import '~styles/mixins.less';
+@import "~styles/variables.less";
+@import "~styles/mixins.less";
 
 .button {
     display: block;
     padding-top: 10px;
     padding-bottom: 10px;
     border: 2px dashed #eee;
-    color: #000;
+    color: var(--text-primary);
     font-size: 16px;
     line-height: 20px;
     text-align: center;

src/Components/AllContatcsTable/AllContactsTable.less

@@ -50,7 +50,7 @@
 
 .clickable {
     &:hover {
-        background-color: rgba(0, 0, 0, 0.05);
+        background-color: var(--item-hover);
         cursor: pointer;
     }
 }

src/Components/CodeRef/CodeRef.less

@@ -1,4 +1,4 @@
 .code-ref {
     font-family: "Consolas", monospace;
-    background-color: #eee;
+    background-color: var(--background-tertiary);
 }

src/Components/ContactEventStats/Components/ContactEventsChart.tsx

@@ -12,6 +12,7 @@ import { Select } from "@skbkontur/react-ui/components/Select";
 import zoomPlugin from "chartjs-plugin-zoom";
 import { getContactEventsChartOptions } from "../../../helpers/getChartOptions";
 import { Flexbox } from "../../Flexbox/FlexBox";
+import { useTheme } from "../../../Themes";
 
 ChartJS.register(...registerables);
 
@@ -21,6 +22,7 @@ interface IContactEventsBarChartProps {
 
 export const ContactEventsChart: React.FC<IContactEventsBarChartProps> = ({ events }) => {
     const [interval, setInterval] = useState<EContactEventsInterval>(EContactEventsInterval.hour);
+    const theme = useTheme();
 
     const groupedTransitions = useMemo(() => groupEventsByInterval(events, interval), [
         events,
@@ -62,7 +64,12 @@ export const ContactEventsChart: React.FC<IContactEventsBarChartProps> = ({ even
             <Bar
                 plugins={[createHtmlLegendPlugin(false), zoomPlugin]}
                 data={{ labels, datasets }}
-                options={getContactEventsChartOptions(interval) as ChartOptions<"bar">}
+                options={
+                    getContactEventsChartOptions(
+                        interval,
+                        theme.chartGridLinesColor
+                    ) as ChartOptions<"bar">
+                }
             />
         </Flexbox>
     );

src/Components/ContactEventStats/Components/TriggerEventsChart.tsx

@@ -7,6 +7,7 @@ import { getColor } from "../../Tag/Tag";
 import { createHtmlLegendPlugin } from "./htmlLegendPlugin";
 import { triggerEventsChartOptions } from "../../../helpers/getChartOptions";
 import { Flexbox } from "../../Flexbox/FlexBox";
+import { useTheme } from "../../../Themes";
 
 ChartJS.register(...registerables);
 
@@ -24,6 +25,8 @@ export const TriggerEventsChart: React.FC<ITriggerEventsBarChartProps> = ({ even
         [events]
     );
 
+    const theme = useTheme();
+
     const sortedEvents = useMemo(() => {
         return Object.entries(groupedEvents).sort(([, a], [, b]) => b - a);
     }, [events]);
@@ -46,7 +49,9 @@ export const TriggerEventsChart: React.FC<ITriggerEventsBarChartProps> = ({ even
             <Bar
                 data={data}
                 plugins={[createHtmlLegendPlugin(true)]}
-                options={triggerEventsChartOptions as ChartOptions<"bar">}
+                options={
+                    triggerEventsChartOptions(theme.chartGridLinesColor) as ChartOptions<"bar">
+                }
             />
         </Flexbox>
     );

src/Components/ContactList/ContactList.less

@@ -27,9 +27,6 @@
 
 .item {
     cursor: pointer;
-    &:hover {
-        background-color: #f8f8f8;
-    }
 
     td {
         padding: 10px;
@@ -45,6 +42,7 @@
     }
 
     &:hover {
+        background-color: var(--item-hover);
         .actions {
             display: inline;
         }