From 28b1a72272109b0414f73518afb1224c6c4015a4 Mon Sep 17 00:00:00 2001 From: indar suthar Date: Sat, 30 Aug 2025 20:31:31 +0530 Subject: [PATCH 1/2] fixing express logoin both black and white theme by replacing existing svg with new one --- src/constants/skills.js | 2 +- src/images/icons/BackendDevelopment/express.svg | 11 ++--------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/src/constants/skills.js b/src/constants/skills.js index b9b28adc..f3393847 100644 --- a/src/constants/skills.js +++ b/src/constants/skills.js @@ -203,7 +203,7 @@ const icons = { docker: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/docker/docker-original-wordmark.svg', dotnet: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/dot-net/dot-net-original-wordmark.svg', electron: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/electron/electron-original.svg', - express: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/express/express-original-wordmark.svg', + express: 'https://www.vectorlogo.zone/logos/expressjs/expressjs-ar21.svg', go: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/go/go-original.svg', graphql: 'https://www.vectorlogo.zone/logos/graphql/graphql-icon.svg', gulp: 'https://raw.githubusercontent.com/devicons/devicon/master/icons/gulp/gulp-plain.svg', diff --git a/src/images/icons/BackendDevelopment/express.svg b/src/images/icons/BackendDevelopment/express.svg index 6550dff3..7cc9e8d8 100644 --- a/src/images/icons/BackendDevelopment/express.svg +++ b/src/images/icons/BackendDevelopment/express.svg @@ -1,10 +1,3 @@ - - - - + From 4d40e3415ecac79dd202e3bf737cab69544c4c04 Mon Sep 17 00:00:00 2001 From: indar suthar Date: Sat, 30 Aug 2025 23:47:01 +0530 Subject: [PATCH 2/2] adding a theme toggle button(issue - #881) --- src/components/header.jsx | 32 +++++++++++++++++++++++++++++--- src/styles/tailwind.css | 17 +++++++++++++++++ tailwind.config.js | 1 + 3 files changed, 47 insertions(+), 3 deletions(-) diff --git a/src/components/header.jsx b/src/components/header.jsx index 8bf66f5a..601e4235 100644 --- a/src/components/header.jsx +++ b/src/components/header.jsx @@ -10,6 +10,13 @@ import logo from '../images/mdg.png'; const Header = (props) => { const { heading } = props; + // Theme state: 'light' or 'dark'. Persisted to localStorage. + const [theme, setTheme] = useState(() => { + if (typeof window === 'undefined') return 'light'; + const stored = window.localStorage.getItem('theme'); + if (stored) return stored; + return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + }); const [stats, setstats] = useState({ starsCount: 0, forksCount: 0, @@ -37,7 +44,7 @@ const Header = (props) => { } }; useEffect(() => { - fetchData(); + fetchData(); setInterval(fetchData, 60000); gsap.set('.star, .fork', { @@ -52,15 +59,26 @@ const Header = (props) => { }); }, []); + // Apply theme to document root and persist selection + useEffect(() => { + if (typeof document !== 'undefined') { + if (theme === 'dark') document.documentElement.classList.add('dark'); + else document.documentElement.classList.remove('dark'); + } + if (typeof window !== 'undefined') window.localStorage.setItem('theme', theme); + }, [theme]); + + const toggleTheme = () => setTheme((t) => (t === 'dark' ? 'light' : 'dark')); + return (
-

+

github profile markdown generator logo
{heading}

-
+
{ {stats.starsCount}
+