Merge pull request #6 from AlvaroNW/theme-toggle

Theme toggle

app/globals.css

@@ -25,3 +25,33 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
+.toggle {
+  height: 2em;
+  width: 3em;
+  border-radius: 50px;
+  margin: auto;
+  background-image: linear-gradient(aqua, skyblue);
+  position: relative;
+  cursor: pointer;
+}
+.toggle-dark {
+  height: 2em;
+  width: 3em;
+  border-radius: 50px;
+  margin: auto;
+  background-image: linear-gradient(midnightblue, rebeccapurple);
+  position: relative;
+  cursor: pointer;
+}
+.theme-icon{
+  margin-left: 0.2em;
+  height: 2em;
+  width: 1.2em;
+  color: yellow;
+}
+
+.theme-icon-dark{
+  height: 2em;
+  width: 1.2em;
+  margin-left: auto;
+}

components/ThemeSwitcher.tsx

@@ -1,22 +1,37 @@
 "use client";
 
-import { MdOutlineDarkMode, MdLightbulbOutline } from "react-icons/md";
+import { MdBrightness2, MdCircle } from "react-icons/md";
 import useDarkMode from "@/hooks/useDarkMode";
+import { useEffect, useState} from 'react'
 
 // TODO write tests for light/mode
-// TODO new SVG for light/dark theme
 // TODO fix TS error on setTheme
 const ThemeSwitcher = () => {
+  const [mounted, setMounted] = useState(false);
   const [colorTheme, setTheme] = useDarkMode();
 
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if(!mounted) {
+    return null;
+  }
+
   return (
-    <>
+    <div>
       {colorTheme === "light" ? (
-        <MdOutlineDarkMode onClick={() => setTheme("light")} />
+        <div className="toggle-dark" onClick={() => setTheme("light")}>
+          <MdBrightness2 className="theme-icon-dark"  />
+        </div>
+        
       ) : (
-        <MdLightbulbOutline onClick={() => setTheme("dark")} />
+        <div className="toggle" onClick={() => setTheme("dark")}>
+          <MdCircle className="theme-icon"  />
+        </div>
+        
       )}
-    </>
+    </div>
   );
 };
 

cypress/component/themeToggle.cy.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import ThemeSwitcher from "../../components/ThemeSwitcher";
+import Home from "@/app/page";
+import useDarkMode from '@/hooks/useDarkMode';
+import '../../app/globals.css';
+
+describe('ThemeSwitcher component', () => {
+  it('should toggle between light and dark mode', () => {
+    cy.mount(<Home />);
+    cy.mount(<ThemeSwitcher />);
+    cy.wait(100);
+
+    // checking that the toggle is there and light mode is active
+    cy.get('.toggle').should('exist');
+    cy.get('.toggle').should(($toggle) => {
+        const backgroundImage = $toggle.css('background-image');
+        expect(backgroundImage).to.include('linear-gradient(rgb(0, 255, 255), rgb(135, 206, 235)');
+    });
+    // checking that the toggle is clickable and dark mode is active
+    cy.get('.toggle').click();
+    cy.get('.toggle-dark').should('exist');
+    cy.get('.toggle-dark').should(($toggle) => {
+        const backgroundImage = $toggle.css('background-image');
+        expect(backgroundImage).to.include('linear-gradient(rgb(25, 25, 112), rgb(102, 51, 153)');
+    });
+  });
+});