Circle emoji added and changed color

docs/stylesheets/extra.css

@@ -1,3 +0,0 @@
-.md-icon span[data-icon="red"]     { color: #ff0000 !important; } 
-.md-icon span[data-icon="blue"]     { color: #3700ff !important; } 
-.md-icon span[data-icon="purple"]     { color: #f700ff !important; } 

mkdocs.yml

@@ -4,34 +4,22 @@ site_url: https://pombas_n.pages.psi.ch
 theme:
   name: material
   palette:
-    # Palette toggle for light mode
-    - media: "(prefers-color-scheme: dark)"
-      scheme: default
-      toggle:
-        icon:
-          blue: material/circle
-        name: Switch to dark mode
+    - scheme: blue
       primary: blue
       accent: blue
-
-    # Palette toggle for dark mode
-    - media: "(prefers-color-scheme: dark)"
-      scheme: slate
-      toggle:
-        icon: 
-          purple: material/circle
-        name: Switch to light mode
+    - scheme: purple
       primary: purple
       accent: purple
+    - scheme: green
+      primary: green
+      accent: green
+
 
 extra_css:
   - stylesheets/extra.css
-
-markdown_extensions:
-  - attr_list
-  - pymdownx.emoji:
-      emoji_index: !!python/name:material.extensions.emoji.twemoji
-      emoji_generator: !!python/name:material.extensions.emoji.to_svg
+  
+extra_javascript:
+  - javascripts/color-toggle.js
 
 plugins:
   - projects:

overrides/javascripts/color-toggle.js

@@ -0,0 +1,14 @@
+const palettes = ["blue", "purple", "green"];
+let current = 0;
+
+function switchColor() {
+  current = (current + 1) % palettes.length;
+  const color = palettes[current];
+  document.documentElement.setAttribute("data-md-color-scheme", color);
+}
+
+// Botão no topo do site
+const btn = document.createElement("button");
+btn.textContent = "Switch Color";
+btn.onclick = switchColor;
+document.body.prepend(btn);

overrides/stylesheets/extra.css

@@ -0,0 +1,14 @@
+:root[data-md-color-scheme="blue"] {
+  --md-primary-fg-color: #3498db;
+  --md-accent-fg-color: #3498db;
+}
+
+:root[data-md-color-scheme="purple"] {
+  --md-primary-fg-color: #9b59b6;
+  --md-accent-fg-color: #9b59b6;
+}
+
+:root[data-md-color-scheme="green"] {
+  --md-primary-fg-color: #2ecc71;
+  --md-accent-fg-color: #2ecc71;
+}