From ba6547f762236e7593cb705a43aff2ba3a61e563 Mon Sep 17 00:00:00 2001
From: Noah Pombas <admin@noahpombas.ch>
Date: Thu, 4 Dec 2025 16:22:53 +0100
Subject: [PATCH] Added Custom JS and CSS

---
 mkdocs.yml                                   |  4 ++--
 overrides/assets/javascripts/color-toggle.js | 20 ++++++++------------
 overrides/assets/stylesheets/extra.css       | 12 ++++++------
 overrides/main.html                          | 10 ++++++++--
 4 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/mkdocs.yml b/mkdocs.yml
index 93b3e81..dee42d1 100644
--- a/mkdocs.yml
+++ b/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:
diff --git a/overrides/assets/javascripts/color-toggle.js b/overrides/assets/javascripts/color-toggle.js
index f4b34d5..a5fb9e1 100644
--- a/overrides/assets/javascripts/color-toggle.js
+++ b/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);
+    });
+  });
 });
diff --git a/overrides/assets/stylesheets/extra.css b/overrides/assets/stylesheets/extra.css
index 3e8aeb5..d34b64b 100644
--- a/overrides/assets/stylesheets/extra.css
+++ b/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;
 }
diff --git a/overrides/main.html b/overrides/main.html
index e358c49..4547b6f 100644
--- a/overrides/main.html
+++ b/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 %}