improve accessiblity

src/config/theme.json

@@ -9,9 +9,9 @@
         "theme_dark": ""
       },
       "text_color": {
-        "default": "#555",
+        "default": "#444444",
         "dark": "#040404",
-        "light": "#999"
+        "light": "#717171"
       }
     },
     "darkmode": {

src/layouts/components/Logo.astro

@@ -28,7 +28,7 @@ const { theme_switcher }: { theme_switcher: boolean } = config.settings;
       <>
         <Image
           src={src ? src : logo}
-          class={`${theme_switcher && "dark:hidden"}`}
+          class={`inline-block ${theme_switcher && "dark:hidden"}`}
           width={logo_width.replace("px", "") * 2}
           height={logo_height.replace("px", "") * 2}
           alt={title}

src/layouts/components/ThemeSwitcher.astro

@@ -10,6 +10,7 @@ const {className} = Astro.props;
   <div class={`theme-switcher ${className}`}>
     <input id="theme-switcher" data-theme-switcher type="checkbox" />
     <label for="theme-switcher">
+      <span class="sr-only">theme switcher</span>
       <span>
         <!-- sun -->
         <svg

src/layouts/partials/Header.astro

@@ -129,6 +129,7 @@ const { pathname } = Astro.url;
           <a
             class="mr-5 inline-block border-r border-border pr-5 text-xl text-dark hover:text-primary dark:border-darkmode-border dark:text-white"
             href="search"
+            aria-label="search"
           >
             <IoSearch />
           </a>