diff --git a/code/Nav.js b/code/Nav.js
index 23df2880..add1f6fd 100644
--- a/code/Nav.js
+++ b/code/Nav.js
@@ -6,6 +6,7 @@ import LogoSansTexte from 'Images/fabmob_cmjn6.svg'
 import { useLocation } from 'react-router-dom'
 import { useContext } from 'react'
 import { WikiContext } from './App'
+import ColorSchemeToggle from './components/ColorSchemeToggle'
 
 const MenuLink = (setClosed) => ({ to, children }) => (
 	<RouterLink to={to} onClick={() => setClosed()}>
@@ -53,7 +54,7 @@ export default () => {
 					display: block;
 				}
 				ul > li > a {
-					color: black;
+					color: var(--color-text);
 				}
 				.emoji {
 					margin: 0;
@@ -113,6 +114,9 @@ export default () => {
 				>
 					<Link to="/participer">Participer</Link>
 				</li>
+				<li>
+					<ColorSchemeToggle />
+				</li>
 				{false && (
 					<li>
 						<LangSwitch />
diff --git a/code/components/ColorSchemeToggle.js b/code/components/ColorSchemeToggle.js
new file mode 100644
index 00000000..75c43376
--- /dev/null
+++ b/code/components/ColorSchemeToggle.js
@@ -0,0 +1,15 @@
+import { DarkModeToggle } from "react-dark-mode-toggle-2";
+import { useColorScheme } from '../scripts/ColorScheme';
+
+const ColorSchemeToggle = () => {
+    const  [ value, setValue ] = useColorScheme();
+    return (
+        <DarkModeToggle
+            onChange={setValue}
+            isDarkMode={value} 
+            size={40} 
+        />
+    );
+};
+
+export default ColorSchemeToggle;
\ No newline at end of file
diff --git a/code/main.css.js b/code/main.css.js
index f5c0a633..e8c16f36 100644
--- a/code/main.css.js
+++ b/code/main.css.js
@@ -23,21 +23,31 @@ export default `
   --width-content: 1080px;
 }
 
-/*
-@media (prefers-color-scheme: dark) {
-    :root {
-        --color: #0097fc;
-        --color-accent: #0097fc4f;
-        --color-bg: #333;
-        --color-bg-secondary: #555;
-        --color-secondary: #e20de9;
-        --color-secondary-accent: #e20de94f;
-        --color-shadow: #bbbbbb20;
-        --color-text: #f7f7f7;
-        --color-text-secondary: #aaa;
-    }
-}
-*/
+body.dark {
+  --color: #0097fc;
+  --color-accent: #0097fc4f;
+  --color-bg: #333;
+  --color-bg-secondary: #555;
+  // --color-secondary: #e20de9;
+  --color-secondary-accent: #e20de94f;
+  --color-shadow: #bbbbbb20;
+  --color-text: #f7f7f7;
+  --color-text-secondary: #aaa;
+}
+// @media (prefers-color-scheme: dark) {
+//     :root {
+//         --color: #0097fc;
+//         --color-accent: #0097fc4f;
+//         --color-bg: #333;
+//         --color-bg-secondary: #555;
+//         // --color-secondary: #e20de9;
+//         --color-secondary-accent: #e20de94f;
+//         --color-shadow: #bbbbbb20;
+//         --color-text: #f7f7f7;
+//         --color-text-secondary: #aaa;
+//     }
+// }
+
 
 /* open-sans-regular - latin */
 @font-face {
@@ -211,7 +221,7 @@ h4,
 h5,
 h6 {
   line-height: var(--line-height);
-  color: black
+  color: var(--color-text)
 }
 
 mark {
@@ -280,6 +290,7 @@ button {
   line-height: var(--line-height);
   margin: 1.5rem 0 0.5rem 0;
   padding: 1rem 2rem;
+  color: var(--color-text);
 }
 
 button {
@@ -290,12 +301,20 @@ button {
 }
 
 button:hover {
-background: black;
+background: gray;
 color: white;
   cursor: pointer;
   filter: brightness(var(--hover-brightness));
 }
-
+nav button:hover {
+  background: transparent;
+}
+nav button {
+  height: 24px;
+  padding: 0;
+  margin: 0;
+  vertical-align: middle;
+}
 
 /* Images */
 figure {
diff --git a/code/scripts/ColorScheme.js b/code/scripts/ColorScheme.js
new file mode 100644
index 00000000..a00c016f
--- /dev/null
+++ b/code/scripts/ColorScheme.js
@@ -0,0 +1,21 @@
+import { useEffect, useMemo } from 'react';
+import createPersistedState from 'use-persisted-state';
+
+const useColorSchemeState = createPersistedState('colorScheme');
+
+export function useColorScheme() {
+    const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
+    const [isDark, setIsDark] = useColorSchemeState();
+    const value = useMemo(() => isDark === undefined ? !!systemPrefersDark : isDark,
+    [isDark, systemPrefersDark])
+    useEffect(() => {
+    if (value) {
+        console.log("add dark")
+        document.body.classList.add('dark');
+    } else {
+        console.log("rm dark")
+        document.body.classList.remove('dark');
+    }
+    }, [value]);
+    return [value, setIsDark]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index ea808bd4..e04c545d 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
 		"process": "^0.11.10",
 		"raw-loader": "^4.0.2",
 		"react": "17.0.1",
+		"react-dark-mode-toggle-2": "^2.0.5",
 		"react-dom": "17.0.1",
 		"react-helmet": "^6.1.0",
 		"react-highlight-words": "^0.17.0",
@@ -27,6 +28,7 @@
 		"remark-footnotes": "^3.0.0",
 		"twemoji": "^13.0.1",
 		"url-loader": "^4.1.1",
+		"use-persisted-state": "^0.3.3",
 		"yaml-loader": "^0.6.0"
 	},
 	"devDependencies": {