Merge pull request #303 from scroll-tech/dark-mode-style

Adjust dark mode style

src/components/Aside.astro

@@ -21,7 +21,7 @@ const icons = {
 
 <aside class={`content ${type}`} aria-label={title}>
   <div class="icon">
-    <span class="inline-block w-[1.5rem] h-[1.5rem] text-black dark:text-white">
+    <span class="inline-block w-[1.5rem] h-[1.5rem] text-black dark:text-white-800">
       <Fragment set:html={icons[type]} />
     </span>
   </div>

src/components/Footer/Subscribe/EmailInput.tsx

@@ -32,9 +32,9 @@ const EmailInput = (props) => {
         onKeyDown={handleEnter}
         className={clsx(
           styles.inputBase,
-          "dark:text-white",
+          "dark:text-white-800",
           "dark:bg-black",
-          "dark:border-white",
+          "dark:border-white-800",
           "placeholder:text-[#dcdcdc]",
           "placeholder:dark:text-[#FFF8F366]",
           "focus:outline-none"

src/components/Header/Header.astro

@@ -53,7 +53,7 @@ const section = frontmatter?.section ?? ""
       <a href={localizePath("/home")}>
         <span
           class={clsx(
-            "inline-block w-[144px] h-[22px]  dark:bg-[url('/scroll-docs-white.svg')] bg-contain bg-no-repeat bg-center",
+            "inline-block w-[144px] h-[22px]  dark:bg-[url('/scroll-docs-white-800.svg')] bg-contain bg-no-repeat bg-center",
             dark ? "bg-[url('/scroll-docs-white.svg')]" : "bg-[url('/scroll-docs.svg')]"
           )}></span>
       </a>
@@ -83,7 +83,7 @@ const section = frontmatter?.section ?? ""
         <a href="https://github.com/scroll-tech/scroll-documentation" class="github-url" target="_blank" rel="nofollow">
           <span
             class={clsx(
-              "inline-block w-[35px] h-[35px] dark:bg-[url('/assets/github-white.svg')] bg-contain bg-no-repeat bg-center",
+              "inline-block w-[35px] h-[35px] dark:bg-[url('/assets/github-white-800.svg')] bg-contain bg-no-repeat bg-center",
               dark ? "bg-[url('/assets/github-white.svg')]" : "bg-[url('/assets/github.svg')]"
             )}></span>
         </a>
@@ -113,7 +113,7 @@ const section = frontmatter?.section ?? ""
   .nav-link {
     line-height: 32px;
     padding-top: 7px;
-    @apply text-black dark:text-white;
+    @apply text-black dark:text-white-800;
     color: var(--textColor);
     white-space: nowrap;
   }

src/components/Header/LanguageSelector/LanguageSelector.astro

@@ -25,8 +25,14 @@ const getLabel = (language) => {
 }
 ---
 
-<div class={clsx("language-selector", dark && "dark")}>
-  <div class="current-language">
+<div class={clsx("language-selector")}>
+  <div
+    class={clsx(
+      "current-language",
+      "text-black border-black dark:text-white-800 dark:border-white-800",
+      dark ? "text-white border-white" : ""
+    )}
+  >
     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
       <path
         d="M12.0886 2.19173C11.899 1.99095 11.5825 1.98187 11.3817 2.17145C11.181 2.36103 11.1719 2.67748 11.3615 2.87827L12.0886 2.19173ZM9.82896 1.70578C10.0724 1.83614 10.3754 1.74448 10.5058 1.50104C10.6361 1.25761 10.5445 0.954588 10.301 0.824224L9.82896 1.70578ZM6.475 0.71L6.83644 1.05549L6.83781 1.05405L6.475 0.71ZM6.51 13.325L6.84218 12.9513L6.84158 12.9508L6.51 13.325ZM7.43 13.27L7.8006 13.6056L7.80182 13.6043L7.43 13.27ZM11.3615 2.87827C12.3774 3.95429 13 5.40282 13 7H14C14 5.13718 13.2726 3.44571 12.0886 2.19173L11.3615 2.87827ZM13 7C13 10.3139 10.3139 13 7 13V14C10.8661 14 14 10.8661 14 7H13ZM7 13C3.68614 13 1 10.3139 1 7H0C0 10.8661 3.13386 14 7 14V13ZM1 7C1 3.68614 3.68614 1 7 1V0C3.13386 0 0 3.13386 0 7H1ZM7 1C8.02607 1 8.98516 1.25391 9.82896 1.70578L10.301 0.824224C9.31484 0.296094 8.19393 0 7 0V1ZM1.50005 4.99H12.965V3.99H1.50005V4.99ZM1.49999 9.995H12.97V8.995H1.49999V9.995ZM7.81355 0.406447C7.39863 -0.00847185 6.63779 -0.188318 6.11219 0.365954L6.83781 1.05405C6.86485 1.02554 6.89025 1.0169 6.92687 1.01975C6.97276 1.02331 7.04172 1.04883 7.10645 1.11355L7.81355 0.406447ZM6.11356 0.364509C5.02397 1.5044 4 3.93397 4 7.225H5C5 4.10603 5.97603 1.9556 6.83644 1.05549L6.11356 0.364509ZM4 7.225C4 10.5231 5.07388 12.7206 6.17842 13.6992L6.84158 12.9508C6.01612 12.2194 5 10.3369 5 7.225H4ZM6.17782 13.6987C6.65963 14.127 7.3826 14.0672 7.8006 13.6056L7.0594 12.9344C6.9974 13.0028 6.90037 13.003 6.84218 12.9513L6.17782 13.6987ZM7.80182 13.6043C8.80675 12.4865 10 10.6511 10 7.23H9C9 10.3689 7.92325 11.9735 7.05818 12.9357L7.80182 13.6043ZM10 7.23C10 3.85511 8.90599 1.49888 7.81355 0.406447L7.10645 1.11355C7.96401 1.97112 9 4.04489 9 7.23H10Z"
@@ -35,14 +41,23 @@ const getLabel = (language) => {
     <span>{getLabel(supportedLanguages[0])}</span>
   </div>
   <div class="options-modal">
-    <ul class="options-list">
+    <ul
+      class={clsx(
+        "options-list",
+        "bg-pure-white  border-black dark:border-white-800 dark:bg-black",
+        dark ? "!bg-pure-black !border-white dark:!border-white-800" : ""
+      )}
+    >
       {
         supportedLanguages.map((supportedLanguage, idx) => {
           let value = localizePath(pathname, supportedLanguage)
           const label = getLabel(supportedLanguage)
-
           return (
-            <li value={value} onclick={`if ("${value}" !== window.location.pathname) location.href = "${value}";`}>
+            <li
+              class={clsx("text-black dark:text-white-800", dark ? "text-white dark:text-white-800" : "")}
+              value={value}
+              onclick={`if ("${value}" !== window.location.pathname) location.href = "${value}";`}
+            >
               {idx === 0 ? (
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                   <rect x="0.5" y="0.5" width="15" height="15" rx="7.5" stroke="currentColor" />
@@ -88,7 +103,6 @@ const getLabel = (language) => {
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
-    @apply text-black dark:text-white border-black dark:border-white;
   }
 
   .options-list {
@@ -107,7 +121,6 @@ const getLabel = (language) => {
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    @apply bg-pure-white dark:bg-black border-black dark:border-white;
   }
 
   .options-list li {
@@ -117,7 +130,6 @@ const getLabel = (language) => {
     align-items: center;
     flex-direction: row;
     padding: 8px 0px;
-    @apply text-black dark:text-white;
   }
 
   .options-list li svg,