Added Custom JS and CSS

mkdocs.yml

@@ -17,10 +17,10 @@ theme:
 
 
 extra_css:
-  - stylesheets/extra.css
+  - assets/stylesheets/extra.css
 
 extra_javascript:
-  - javascripts/color-toggle.js
+  - assets/javascripts/color-toggle.js
 
 plugins:
   - projects:

overrides/assets/javascripts/color-toggle.js

@@ -1,13 +1,9 @@
-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);
-}
-
-window.addEventListener("DOMContentLoaded", () => {
-  const btn = document.getElementById("color-toggle-btn");
-  if (btn) btn.onclick = switchColor;
+document.addEventListener("DOMContentLoaded", () => {
+  const circles = document.querySelectorAll(".color-circle");
+  circles.forEach(circle => {
+    circle.addEventListener("click", () => {
+      const color = circle.dataset.color;
+      document.documentElement.setAttribute("data-md-color-scheme", color);
+    });
+  });
 });

overrides/assets/stylesheets/extra.css

@@ -1,9 +1,9 @@
-#color-toggle-btn {
-  margin-left: 1rem;
-  padding: 4px 10px;
-  font-size: 0.9rem;
-  border-radius: 5px;
+.color-circle {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
   border: 1px solid #ccc;
-  background: #fff;
+  display: inline-block;
   cursor: pointer;
+  margin-right: 4px;
 }

overrides/main.html

@@ -1,6 +1,12 @@
-{% extends "nav-item.html" %}
+{% extends "base.html" %}
 
 {% block header %}
   {{ super() }}
-  <button id="color-toggle-btn">🎨 Switch Color</button>
+  <!-- Botão ou círculos coloridos -->
+  <div class="color-switcher" style="display:inline-block; margin-left:1rem;">
+    <button class="color-circle" data-color="blue" style="background:blue;"></button>
+    <button class="color-circle" data-color="purple" style="background:purple;"></button>
+    <button class="color-circle" data-color="green" style="background:green;"></button>
+    <!-- adiciona mais cores se quiser -->
+  </div>
 {% endblock %}