mod(main): /repository dark theme imporved

src/app/repository/page.css

@@ -7,6 +7,7 @@
 }
 
 .title {
+    margin-top: 30px;
     text-align: center;
     font-size: 2em;
     margin-bottom: 20px;
@@ -20,7 +21,7 @@
 
 .repository-list {
     list-style-type: none;
-    margin-top: 0;
+    margin-top: 50px;
     padding-top: 0;
 }
 
@@ -61,23 +62,11 @@
     color: #666;
 }
 
-/* Light Theme */
-.container.light {
-    background-color: #ffffff;
-    color: #000000;
-}
-
-/* Dark Theme */
-.container.dark {
-    background-color: #333333;
-    color: #ffffff;
+.container.dark .repository-item:hover {
+    background-color: #111111;
 }
 
 .container.dark .repository-item {
-    background-color: #444444;
-}
-
-.container.dark .repository-item:hover {
-    background-color: #555555;
+    background-color: rgba(37, 37, 37, 0.77);
 }
 

src/app/repository/page.tsx

@@ -60,6 +60,15 @@ const RepositoryPage: React.FC = () => {
     const [organizations, setOrganizations] = useState<Organization[]>([]);
     const [currentOrg, setCurrentOrg] = useState<Organization | null>(null);
 
+    useEffect(() => {
+        const mode = localStorage.getItem("darkMode");
+        if (mode === "true") {
+            theme === "light" ? setTheme("dark") : setTheme("light");
+        } else {
+            document.documentElement.classList.remove("dark");
+        }
+    }, []);
+
     useEffect(() => {
         const fetchRepositories = async () => {
             try {
@@ -123,9 +132,6 @@ const RepositoryPage: React.FC = () => {
         <>
             <div className={`container ${theme}`}>
                 <h1 className="title">Your Repositories</h1>
-                <button onClick={toggleTheme} className="theme-toggle">
-                    Switch to {theme === "light" ? "Dark" : "Light"} Theme
-                </button>
                 <ul className="repository-list">
                     {Array.isArray(repositories) && repositories.map((repo) => (
                         <li key={repo.id} className="repository-item">