https://abdulohab.github.io/js/index.2f98b2f692149f3b5df30584b6f548eb58c2a1334c12bd36ee2c10452df0e5d8.js

1// Theme toggle functionality
2var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
3var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
4
5// Initialize theme function
6function initTheme() {
7  // Hide both icons first
8  if (themeToggleDarkIcon) themeToggleDarkIcon.classList.add('hidden');
9  if (themeToggleLightIcon) themeToggleLightIcon.classList.add('hidden');
10  
11  // Show the correct icon based on current theme
12  if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
13      // Dark mode is active, show light icon (to switch to light)
14      if (themeToggleLightIcon) themeToggleLightIcon.classList.remove('hidden');
15  } else {
16      // Light mode is active, show dark icon (to switch to dark)
17      if (themeToggleDarkIcon) themeToggleDarkIcon.classList.remove('hidden');
18  }
19}
20
21// Theme toggle button functionality
22var themeToggleBtn = document.getElementById('theme-toggle');
23
24if (themeToggleBtn) {
25  themeToggleBtn.addEventListener('click', function () {
26      // Hide both icons first
27      if (themeToggleDarkIcon) themeToggleDarkIcon.classList.add('hidden');
28      if (themeToggleLightIcon) themeToggleLightIcon.classList.add('hidden');
29
30      // Check current theme and toggle
31      if (localStorage.getItem('color-theme')) {
32          if (localStorage.getItem('color-theme') === 'light') {
33              // Switch to dark mode
34              document.documentElement.classList.add('dark');
35              localStorage.setItem('color-theme', 'dark');
36              // Show light icon (to indicate next action)
37              if (themeToggleLightIcon) themeToggleLightIcon.classList.remove('hidden');
38          } else {
39              // Switch to light mode
40              document.documentElement.classList.remove('dark');
41              localStorage.setItem('color-theme', 'light');
42              // Show dark icon (to indicate next action)
43              if (themeToggleDarkIcon) themeToggleDarkIcon.classList.remove('hidden');
44          }
45      } else {
46          // No stored preference, check current state
47          if (document.documentElement.classList.contains('dark')) {
48              // Currently dark, switch to light
49              document.documentElement.classList.remove('dark');
50              localStorage.setItem('color-theme', 'light');
51              if (themeToggleDarkIcon) themeToggleDarkIcon.classList.remove('hidden');
52          } else {
53              // Currently light, switch to dark
54              document.documentElement.classList.add('dark');
55              localStorage.setItem('color-theme', 'dark');
56              if (themeToggleLightIcon) themeToggleLightIcon.classList.remove('hidden');
57          }
58      }
59  });
60}
61
62// Mobile menu functionality
63const mobileMenuButton = document.getElementById("mobile-menu-button");
64const mobileMenu = document.getElementById("mobile-menu");
65
66if (mobileMenuButton && mobileMenu) {
67  mobileMenuButton.addEventListener("click", function () {
68    mobileMenu.classList.toggle("hidden");
69  });
70
71  // Close mobile menu when clicking on links
72  const mobileMenuLinks = mobileMenu.querySelectorAll("a");
73  mobileMenuLinks.forEach((link) => {
74    link.addEventListener("click", function () {
75      mobileMenu.classList.add("hidden");
76    });
77  });
78
79  // Close mobile menu when clicking outside
80  document.addEventListener("click", function (e) {
81    if (
82      !mobileMenuButton.contains(e.target) &&
83      !mobileMenu.contains(e.target)
84    ) {
85      mobileMenu.classList.add("hidden");
86    }
87  });
88}
89
90// Initialize theme when DOM is loaded
91if (document.readyState === "loading") {
92  document.addEventListener("DOMContentLoaded", initTheme);
93} else {
94  initTheme();
95}