fixing Issue - Fix Express.js Icon Visibility in Dark Mode on GitHub Profile #900

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 (
     <div className="shadow flex items-center justify-center flex-col mb-2 py-2">
       <Link to={links.home}>
-        <h1 className="text-base font-bold font-title sm:text-2xl font-medium text-blue-800 flex justify-center items-center flex-col">
+  <h1 className="text-base font-bold font-title sm:text-2xl text-blue-800 flex justify-center items-center flex-col">
           <img src={logo} className="w-12 h-12" alt="github profile markdown generator logo" />
           <div>{heading}</div>
         </h1>
       </Link>
-      <div className="flex justify-center items-center">
+  <div className="flex justify-center items-center">
         <a
           href="https://github.com/rahuldkjain/github-profile-readme-generator"
           aria-label="Star rahuldkjain/github-profile-readme-generator on GitHub"
@@ -73,6 +91,14 @@ const Header = (props) => {
             <span className="github-count px-1 sm:px-2">{stats.starsCount}</span>
           </div>
         </a>
+        <button
+          type="button"
+          onClick={toggleTheme}
+          aria-label="Toggle dark mode"
+          className="ml-2 text-xxs sm:text-sm border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1 px-2 rounded"
+        >
+          {theme === 'dark' ? 'Light' : 'Dark'}
+        </button>
         <a
           href="https://github.com/rahuldkjain/github-profile-readme-generator/fork"
           aria-label="Fork rahuldkjain/github-profile-readme-generator on GitHub"

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',

src/styles/tailwind.css

@@ -108,3 +108,20 @@
 .markdown .highlight pre {
   @apply bg-gray-100 !important;
 }
+
+/* Dark mode overrides */
+.dark .markdown {
+  @apply text-gray-100;
+}
+
+.dark body, .dark .min-h-screen {
+  background-color: #0f172a; /* slate-900 */
+}
+
+.dark .border-gray-900 {
+  border-color: #e5e7eb;
+}
+
+.dark .bg-gray-100 {
+  background-color: #0b1220; /* darker panel */
+}

tailwind.config.js

@@ -1,5 +1,6 @@
 module.exports = {
   purge: [],
+  darkMode: 'class', // enable class-based dark mode
   theme: {
     extend: {},
     fontSize: {