Enable dark mode and fix theme

2025-11-20 16:04:57 +00:00 · 2023-06-05 22:20:55 +02:00
parent 3ae6405f4d
commit 41fe78bc4c
17 changed files with 478 additions and 73 deletions
--- a/front/.storybook/main.js
+++ b/front/.storybook/main.js
@@ -34,7 +34,9 @@ module.exports = {
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/preset-create-react-app",
-    "@storybook/addon-coverage"
+    "@storybook/addon-coverage",
+    "@storybook/addon-styling"
+
  ],
  framework: {
    name: '@storybook/react-webpack5',
--- a/front/.storybook/preview.ts
+++ b/front/.storybook/preview.ts
@@ -1,10 +1,24 @@
 import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { Preview } from '@storybook/react';
+import { ThemeProvider } from '@emotion/react';
+import { withThemeFromJSXProvider } from "@storybook/addon-styling";
+import { lightTheme, darkTheme } from '../src/modules/ui/layout/styles/themes';
+

 initialize();

 const preview: Preview = {
-  decorators: [mswDecorator],
+  decorators: [
+    mswDecorator,
+    withThemeFromJSXProvider({
+        themes: {
+          light: lightTheme,
+          dark: darkTheme,
+        },
+        defaultTheme: "light",
+        Provider: ThemeProvider,
+      })
+  ],
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -42,6 +42,7 @@
        "@storybook/addon-essentials": "^7.0.2",
        "@storybook/addon-interactions": "^7.0.2",
        "@storybook/addon-links": "^7.0.2",
+        "@storybook/addon-styling": "^1.0.8",
        "@storybook/jest": "^0.1.0",
        "@storybook/node-logger": "^7.0.2",
        "@storybook/preset-create-react-app": "^7.0.2",
@@ -7344,6 +7345,177 @@
        }
      }
    },
+    "node_modules/@storybook/addon-styling": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-styling/-/addon-styling-1.0.8.tgz",
+      "integrity": "sha512-Ubi75gHNFO60Sjti2n/i3f0utERNOYcpsRkWHdzV+C26kUemLG+2riKHUt8zVbNskyJxA0EZxh84HYItRe4coA==",
+      "dev": true,
+      "dependencies": {
+        "@storybook/api": "^7.0.2",
+        "@storybook/components": "^7.0.2",
+        "@storybook/core-events": "^7.0.2",
+        "@storybook/manager-api": "^7.0.2",
+        "@storybook/node-logger": "^7.0.7",
+        "@storybook/preview-api": "^7.0.2",
+        "@storybook/theming": "^7.0.2",
+        "@storybook/types": "^7.0.2",
+        "css-loader": "^6.7.3",
+        "less-loader": "^11.1.0",
+        "postcss-loader": "^7.2.4",
+        "resolve-url-loader": "^5.0.0",
+        "sass-loader": "^13.2.2",
+        "style-loader": "^3.3.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/cosmiconfig": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.2.0.tgz",
+      "integrity": "sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==",
+      "dev": true,
+      "dependencies": {
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/postcss-loader": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.2.tgz",
+      "integrity": "sha512-c7qDlXErX6n0VT+LUsW+nwefVtTu3ORtVvK8EXuUIDcxo+b/euYqpuHlJAvePb0Af5e8uMjR/13e0lTuYifaig==",
+      "dev": true,
+      "dependencies": {
+        "cosmiconfig": "^8.1.3",
+        "jiti": "^1.18.2",
+        "klona": "^2.0.6",
+        "semver": "^7.3.8"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "postcss": "^7.0.0 || ^8.0.1",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/resolve-url-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-url-loader/-/resolve-url-loader-5.0.0.tgz",
+      "integrity": "sha512-uZtduh8/8srhBoMx//5bwqjQ+rfYOUq8zC9NrMUGtjBiGTtFJM42s58/36+hTqeqINcnYe08Nj3LkK9lW4N8Xg==",
+      "dev": true,
+      "dependencies": {
+        "adjust-sourcemap-loader": "^4.0.0",
+        "convert-source-map": "^1.7.0",
+        "loader-utils": "^2.0.0",
+        "postcss": "^8.2.14",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/sass-loader": {
+      "version": "13.3.1",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-13.3.1.tgz",
+      "integrity": "sha512-cBTxmgyVA1nXPvIK4brjJMXOMJ2v2YrQEuHqLw3LylGb3gsR6jAvdjHMcy/+JGTmmIF9SauTrLLR7bsWDMWqgg==",
+      "dev": true,
+      "dependencies": {
+        "klona": "^2.0.6",
+        "neo-async": "^2.6.2"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "fibers": ">= 3.1.0",
+        "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0",
+        "sass": "^1.3.0",
+        "sass-embedded": "*",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "fibers": {
+          "optional": true
+        },
+        "node-sass": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/semver": {
+      "version": "7.5.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.1.tgz",
+      "integrity": "sha512-Wvss5ivl8TMRZXXESstBA4uR5iXgEN/VC5/sOcuXdVLzcdkz4HWetIoRfG5gb5X+ij/G9rw9YoGn3QoQ8OCSpw==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@storybook/addon-styling/node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
+    },
    "node_modules/@storybook/addon-toolbars": {
      "version": "7.0.18",
      "resolved": "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-7.0.18.tgz",
@@ -15647,6 +15819,19 @@
      "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
      "dev": true
    },
+    "node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "is-what": "^3.14.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
    "node_modules/core-js": {
      "version": "3.30.2",
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.2.tgz",
@@ -17261,6 +17446,20 @@
        "node": ">=4"
      }
    },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
    "node_modules/error-ex": {
      "version": "1.3.2",
      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -20939,6 +21138,20 @@
        "node": ">= 4"
      }
    },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/immer": {
      "version": "9.0.21",
      "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
@@ -21827,6 +22040,13 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true,
+      "peer": true
+    },
    "node_modules/is-windows": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -27521,6 +27741,101 @@
        "node": ">=14.0.0"
      }
    },
+    "node_modules/less": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
+      "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/less-loader": {
+      "version": "11.1.2",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.2.tgz",
+      "integrity": "sha512-2bSaN2j13bUh/5BuwJKuY2DDWVmfBsS6oWRe8v1mGj7F0EpcL+WyWkDQVoEfsVRE4ac5/OuP44ZCaVsXWrQQ9A==",
+      "dev": true,
+      "dependencies": {
+        "klona": "^2.0.6"
+      },
+      "engines": {
+        "node": ">= 14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "less": "^3.5.0 || ^4.0.0",
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/less/node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/less/node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/less/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/less/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -28582,6 +28897,50 @@
      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
      "dev": true
    },
+    "node_modules/needle": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-3.2.0.tgz",
+      "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
+    "node_modules/needle/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/needle/node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/negotiator": {
      "version": "0.6.3",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -29559,6 +29918,16 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "peer": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
    "node_modules/parse-passwd": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
@@ -31446,6 +31815,14 @@
      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
      "dev": true
    },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true,
+      "peer": true
+    },
    "node_modules/pseudomap": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
--- a/front/package.json
+++ b/front/package.json
@@ -86,6 +86,7 @@
    "@storybook/addon-essentials": "^7.0.2",
    "@storybook/addon-interactions": "^7.0.2",
    "@storybook/addon-links": "^7.0.2",
+    "@storybook/addon-styling": "^1.0.8",
    "@storybook/jest": "^0.1.0",
    "@storybook/node-logger": "^7.0.2",
    "@storybook/preset-create-react-app": "^7.0.2",
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -1,9 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
+import { ThemeProvider } from '@emotion/react';
+
+import { browserPrefersDarkMode } from '@/utils/utils';

 import { RequireAuth } from './modules/auth/components/RequireAuth';
 import { getUserIdFromToken } from './modules/auth/services/AuthService';
 import { AppLayout } from './modules/ui/layout/AppLayout';
+import { darkTheme, lightTheme } from './modules/ui/layout/styles/themes';
 import { mapToUser, User } from './modules/users/interfaces/user.interface';
 import { useGetCurrentUserQuery } from './modules/users/services';
 import AuthCallback from './pages/auth/Callback';
@@ -12,7 +16,11 @@ import { Companies } from './pages/companies/Companies';
 import { Opportunities } from './pages/opportunities/Opportunities';
 import { People } from './pages/people/People';

-export function App() {
+type AppProps = {
+  themeEnabled?: boolean;
+};
+
+export function App({ themeEnabled = true }: AppProps) {
  const [user, setUser] = useState<User | undefined>(undefined);

  const userIdFromToken = getUserIdFromToken();
@@ -24,7 +32,9 @@ export function App() {
    }
  }, [data]);

-  return (
+  const defaultTheme = browserPrefersDarkMode() ? darkTheme : lightTheme;
+
+  const app = (
    <>
      {
        <AppLayout user={user}>
@@ -68,4 +78,14 @@ export function App() {
      }
    </>
  );
+
+  return (
+    <>
+      {themeEnabled ? (
+        <ThemeProvider theme={defaultTheme}>{app}</ThemeProvider>
+      ) : (
+        app
+      )}
+    </>
+  );
 }
--- a/front/src/stories/App.stories.tsx
+++ b/front/src/stories/App.stories.tsx
@@ -1,10 +1,8 @@
 import { MemoryRouter } from 'react-router-dom';
 import { ApolloProvider } from '@apollo/client';
-import { ThemeProvider } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { RecoilRoot } from 'recoil';

-import { lightTheme } from '@/ui/layout/styles/themes';
 import { App } from '~/App';
 import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
 import { graphqlMocks } from '~/testing/graphqlMocks';
@@ -22,13 +20,11 @@ type Story = StoryObj<typeof App>;
 const render = () => (
  <RecoilRoot>
    <ApolloProvider client={mockedClient}>
-      <ThemeProvider theme={lightTheme}>
-        <MemoryRouter>
-          <FullHeightStorybookLayout>
-            <App />
-          </FullHeightStorybookLayout>
-        </MemoryRouter>
-      </ThemeProvider>
+      <MemoryRouter>
+        <FullHeightStorybookLayout>
+          <App themeEnabled={false} />
+        </FullHeightStorybookLayout>
+      </MemoryRouter>
    </ApolloProvider>
  </RecoilRoot>
 );
--- a/front/src/modules/ui/components/buttons/IconButton.tsx
+++ b/front/src/modules/ui/components/buttons/IconButton.tsx
@@ -12,9 +12,6 @@ const StyledIconButton = styled.button`
  border: none;
  border-radius: 50%;

-  background: ${(props) => props.theme.text80};
-  color: ${(props) => props.theme.text100};
-
  transition: color 0.1s ease-in-out, background 0.1s ease-in-out;

  background: ${(props) => props.theme.blue};
@@ -22,7 +19,7 @@ const StyledIconButton = styled.button`
  cursor: pointer;

  &:disabled {
-    background: ${(props) => props.theme.quadraryBackground};
+    background: ${(props) => props.theme.quaternaryBackground};
    color: ${(props) => props.theme.text80};
    cursor: default;
  }
--- a/front/src/modules/ui/components/form/DatePicker.tsx
+++ b/front/src/modules/ui/components/form/DatePicker.tsx
@@ -166,10 +166,6 @@ const StyledContainer = styled.div`
    line-height: 34px;
  }

-  & .react-datepicker__day--selected {
-    background-color: ${(props) => props.theme.blue};
-  }
-
  & .react-datepicker__navigation--previous,
  & .react-datepicker__navigation--next {
    height: 34px;
@@ -205,12 +201,26 @@ const StyledContainer = styled.div`
    border-color: ${(props) => props.theme.text40};
  }

+  & .react-datepicker__day--keyboard-selected {
+    background-color: inherit;
+  }
+
+  & .react-datepicker__day,
+  .react-datepicker__time-name {
+    color: ${(props) => props.theme.text80};
+  }
+
+  & .react-datepicker__day--selected {
+    background-color: ${(props) => props.theme.blue};
+    color: ${(props) => props.theme.text0};
+  }
+
  & .react-datepicker__day--outside-month {
    color: ${(props) => props.theme.text40};
  }

-  & .react-datepicker__day--keyboard-selected {
-    background-color: inherit;
+  & .react-datepicker__day:hover {
+    color: ${(props) => props.theme.text40};
  }
 `;

--- a/front/src/modules/ui/layout/AppLayout.tsx
+++ b/front/src/modules/ui/layout/AppLayout.tsx
@@ -1,10 +1,8 @@
-import { ThemeProvider } from '@emotion/react';
 import styled from '@emotion/styled';

 import { User } from '@/users/interfaces/user.interface';

 import { Navbar } from './navbar/Navbar';
-import { lightTheme } from './styles/themes';

 const StyledLayout = styled.div`
  display: flex;
@@ -31,17 +29,15 @@ type OwnProps = {
 export function AppLayout({ children, user }: OwnProps) {
  const userIsAuthenticated = !!user;
  return (
-    <ThemeProvider theme={lightTheme}>
-      <StyledLayout>
-        {userIsAuthenticated ? (
-          <>
-            <Navbar user={user} workspace={user?.workspaceMember?.workspace} />
-            <MainContainer>{children}</MainContainer>
-          </>
-        ) : (
-          children
-        )}
-      </StyledLayout>
-    </ThemeProvider>
+    <StyledLayout>
+      {userIsAuthenticated ? (
+        <>
+          <Navbar user={user} workspace={user?.workspaceMember?.workspace} />
+          <MainContainer>{children}</MainContainer>
+        </>
+      ) : (
+        children
+      )}
+    </StyledLayout>
  );
 }
--- a/front/src/modules/ui/layout/navbar/WorkspaceContainer.tsx
+++ b/front/src/modules/ui/layout/navbar/WorkspaceContainer.tsx
@@ -36,6 +36,7 @@ const StyledName = styled.div`
  font-family: 'Inter';
  font-weight: 500;
  font-size: ${(props) => props.theme.fontSizeLarge};
+  color: ${(props) => props.theme.text80};
 `;

 function WorkspaceContainer({ workspace }: OwnProps) {
--- a/front/src/modules/ui/layout/styles/themes.ts
+++ b/front/src/modules/ui/layout/styles/themes.ts
@@ -27,10 +27,11 @@ const commonTheme = {

 const lightThemeSpecific = {
  noisyBackground: `url(${LightNoise.toString()});`,
+
  primaryBackground: '#fff',
  secondaryBackground: '#fcfcfc',
  tertiaryBackground: '#f5f5f5',
-  quadraryBackground: '#ebebeb',
+  quaternaryBackground: '#ebebeb',

  pinkBackground: '#ffe5f4',
  greenBackground: '#e6fff2',
@@ -68,8 +69,8 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
  noisyBackground: `url(${DarkNoise.toString()});`,
  primaryBackground: '#141414',
  secondaryBackground: '#171717',
-  tertiaryBackground: '#333333',
-  quadraryBackground: '#444444',
+  tertiaryBackground: '#1B1B1B',
+  quaternaryBackground: '#1D1D1D',

  pinkBackground: '#cc0078',
  greenBackground: '#1e7e50',
@@ -115,6 +116,7 @@ export const textInputStyle = (props: any) =>
    border: none;
    outline: none;
    background-color: transparent;
+    color: ${props.theme.text80};

    &::placeholder,
    &::-webkit-input-placeholder {
--- a/front/src/modules/utils/utils.ts
+++ b/front/src/modules/utils/utils.ts
@@ -9,3 +9,7 @@ export const humanReadableDate = (date: Date) => {
 export const getLogoUrlFromDomainName = (domainName?: string): string => {
  return `https://api.faviconkit.com/${domainName}/144`;
 };
+
+export const browserPrefersDarkMode = (): boolean => {
+  return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
--- a/front/src/pages/companies/stories/shared.tsx
+++ b/front/src/pages/companies/stories/shared.tsx
@@ -1,11 +1,9 @@
 import { MemoryRouter } from 'react-router-dom';
 import { ApolloProvider } from '@apollo/client';
-import { ThemeProvider } from '@emotion/react';
 import { graphql } from 'msw';
 import { RecoilRoot } from 'recoil';

 import { GraphqlQueryCompany } from '@/companies/interfaces/company.interface';
-import { lightTheme } from '@/ui/layout/styles/themes';
 import { GraphqlQueryUser } from '@/users/interfaces/user.interface';
 import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
 import { filterAndSortData } from '~/testing/mock-data';
@@ -48,13 +46,11 @@ export function render() {
  return (
    <RecoilRoot>
      <ApolloProvider client={mockedClient}>
-        <ThemeProvider theme={lightTheme}>
-          <MemoryRouter>
-            <FullHeightStorybookLayout>
-              <Companies />
-            </FullHeightStorybookLayout>
-          </MemoryRouter>
-        </ThemeProvider>
+        <MemoryRouter>
+          <FullHeightStorybookLayout>
+            <Companies />
+          </FullHeightStorybookLayout>
+        </MemoryRouter>
      </ApolloProvider>
    </RecoilRoot>
  );
--- a/front/src/pages/people/stories/shared.tsx
+++ b/front/src/pages/people/stories/shared.tsx
@@ -1,9 +1,7 @@
 import { MemoryRouter } from 'react-router-dom';
 import { ApolloProvider } from '@apollo/client';
-import { ThemeProvider } from '@emotion/react';
 import { RecoilRoot } from 'recoil';

-import { lightTheme } from '@/ui/layout/styles/themes';
 import { FullHeightStorybookLayout } from '~/testing/FullHeightStorybookLayout';
 import { mockedClient } from '~/testing/mockedClient';

@@ -13,13 +11,11 @@ export function render() {
  return (
    <RecoilRoot>
      <ApolloProvider client={mockedClient}>
-        <ThemeProvider theme={lightTheme}>
-          <MemoryRouter>
-            <FullHeightStorybookLayout>
-              <People />
-            </FullHeightStorybookLayout>
-          </MemoryRouter>
-        </ThemeProvider>
+        <MemoryRouter>
+          <FullHeightStorybookLayout>
+            <People />
+          </FullHeightStorybookLayout>
+        </MemoryRouter>
      </ApolloProvider>
    </RecoilRoot>
  );
--- a/front/src/testing/mock-data/users.ts
+++ b/front/src/testing/mock-data/users.ts
--- a/front/src/testing/renderWrappers.tsx
+++ b/front/src/testing/renderWrappers.tsx
@@ -1,11 +1,8 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { ApolloProvider } from '@apollo/client';
-import { ThemeProvider } from '@emotion/react';
 import { RecoilRoot } from 'recoil';

-import { lightTheme } from '@/ui/layout/styles/themes';
-
 import { ComponentStorybookLayout } from './ComponentStorybookLayout';
 import { FullHeightStorybookLayout } from './FullHeightStorybookLayout';
 import { mockedClient } from './mockedClient';
@@ -15,11 +12,9 @@ export function getRenderWrapperForPage(children: React.ReactElement) {
    return (
      <RecoilRoot>
        <ApolloProvider client={mockedClient}>
-          <ThemeProvider theme={lightTheme}>
-            <MemoryRouter>
-              <FullHeightStorybookLayout>{children}</FullHeightStorybookLayout>
-            </MemoryRouter>
-          </ThemeProvider>
+          <MemoryRouter>
+            <FullHeightStorybookLayout>{children}</FullHeightStorybookLayout>
+          </MemoryRouter>
        </ApolloProvider>
      </RecoilRoot>
    );
@@ -31,9 +26,7 @@ export function getRenderWrapperForComponent(children: React.ReactElement) {
    return (
      <RecoilRoot>
        <ApolloProvider client={mockedClient}>
-          <ThemeProvider theme={lightTheme}>
-            <ComponentStorybookLayout>{children}</ComponentStorybookLayout>
-          </ThemeProvider>
+          <ComponentStorybookLayout>{children}</ComponentStorybookLayout>
        </ApolloProvider>
      </RecoilRoot>
    );
--- a/server/src/database/seeds/workspaces.ts
+++ b/server/src/database/seeds/workspaces.ts