Support dark mode

Author: zzq0826

src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.module.css

@@ -17,7 +17,6 @@
   display: none;
 }
 .infoBox {
-  background: #fff;
   padding: 18px 20px;
   width: 100%;
 }
@@ -27,7 +26,6 @@
 }
 
 .title {
-  color: #101010;
   font-size: 18px;
   font-style: normal;
   font-weight: 600;

src/components/Tooling/Content/AdditionalInfo/AdditionalInfo.tsx

@@ -37,8 +37,8 @@ const AdditionalInfo = ({ data, selectedTool, onClose }) => {
           </div>
 
           {status === Status.HAS_ADDITIONAL_INFO && (
-            <div className={styles.infoBox}>
-              <div className={styles.title}>{selectedTool.remarkPluginFrontmatter.name}</div>
+            <div className={clsx(styles.infoBox, 'bg-[#ffffff] dark:bg-black')}>
+              <div className={clsx(styles.title, "text-[#101010] dark:text-white")}>{selectedTool.remarkPluginFrontmatter.name}</div>
               <div className={styles.content}>{data}</div>
             </div>
           )}

src/components/Tooling/Content/Category/Category.module.css

@@ -18,11 +18,8 @@
   margin-bottom: 10px;
   border-width: 1px;
   border-style: solid;
-  background: #ffffff;
-  @apply border-black dark:border-white;
 }
 .toolsCategory .item.active {
-  @apply text-white bg-black dark:text-black dark:bg-white;
 }
 @media screen and (max-width: 50em) {
   .toolsCategory .item {

src/components/Tooling/Content/Category/Category.tsx

@@ -7,7 +7,12 @@ const Category = ({ categories, value, onChange }) => {
     <ul className={styles.toolsCategory}>
       {categories.map((category) => (
         <li
-          className={clsx(styles.item, value.includes(category) ? styles.active : "")}
+          className={clsx(
+            styles.item,
+            value.includes(category)
+            ? "text-white bg-black border-white dark:text-black dark:bg-white  dark:border-black"
+            : "border-black bg-[#ffffff] dark:bg-black dark:border-white",
+          )}
           onClick={() => onChange(category)}
         >
           {category}

src/components/Tooling/Content/Content.module.css

@@ -1,6 +1,6 @@
 .toolsContainer {
   border-radius: 27px;
-  background: #fff8f3;
+  /* background: #fff8f3; */
   padding: 30px;
 }
 

src/components/Tooling/Content/Content.tsx

@@ -68,15 +68,15 @@ const Content = ({ tools, toolsMarkdown }) => {
         searchParams.category.length === 0 ||
         searchParams.category.some((category) => tool.remarkPluginFrontmatter.category.includes(category))
       const networkMatch =
-        searchParams.network === "All networks" || tool.remarkPluginFrontmatter.network === searchParams.network
+        searchParams.network === "All networks" || tool.remarkPluginFrontmatter.network.includes(searchParams.network)
       const keywordMatch = tool.remarkPluginFrontmatter.name.toLowerCase().includes(searchParams.keyword.toLowerCase())
 
       return categoryMatch && networkMatch && keywordMatch
     })
   }, [searchParams])
 
   return (
-    <div className={styles.toolsContainer}>
+    <div className={clsx(styles.toolsContainer, 'bg-white dark:bg-dark-normal')}>
       <Category categories={categories} value={searchParams.category} onChange={handleChangeCategory} />
       <div className="flex">
         <SearchInput value={searchParams.keyword} onChange={handleChangeKeyword} />

src/components/Tooling/Content/List/List.module.css

@@ -1,5 +1,4 @@
 .toolsContainerList {
-  background: #ffffff;
   border-radius: 15px;
   height: 532px;
   overflow: auto;
@@ -9,7 +8,8 @@
   padding: 20px;
 }
 
-.toolItem:hover {
+.toolItem:hover,
+.toolItem.active {
   background-color: #f9f9f9;
   cursor: pointer;
 }
@@ -55,7 +55,6 @@
 }
 
 .toolDescription {
-  color: #5b5b5b;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;

src/components/Tooling/Content/List/List.tsx

@@ -1,5 +1,6 @@
 import styles from "./List.module.css"
 import LinesEllipsis from "../../../../components/LinesEllipsis"
+import { clsx } from "~/lib"
 
 const List = ({ tools, onChange, selectedTool }) => {
   const handleReflow = (value) => {
@@ -11,17 +12,24 @@ const List = ({ tools, onChange, selectedTool }) => {
   }
 
   return (
-    <div className={styles.toolsContainerList}>
+    <div className={clsx(styles.toolsContainerList, "bg-[#ffffff] dark:bg-dark-normal")}>
       {tools.map((tool, index) => (
-        <div onClick={() => onChange(tool)} className={styles.toolItem}>
+        <div
+          onClick={() => onChange(tool)}
+          className={clsx(
+            styles.toolItem,
+            tool.id === selectedTool?.id && "bg-[#f9f9f9] dark:bg-black",
+            "hover:bg-[#f9f9f9] dark:hover:bg-black"
+          )}
+        >
           <img
             src={tool.remarkPluginFrontmatter.logo.src}
             alt={tool.remarkPluginFrontmatter.logo.alt}
             className={styles.logo}
           />
           <div className={styles.toolInfo}>
             <div className="flex justify-between items-center mb-[7px]">
-              <div className={styles.toolName}>
+              <div className={clsx(styles.toolName, "dark:text-white dark:hover:text-white")}>
                 {tool.remarkPluginFrontmatter.name}
                 <svg
                   className="ml-[8px] mr-[25px] hover:opacity-70"
@@ -35,7 +43,7 @@ const List = ({ tools, onChange, selectedTool }) => {
                   <g clip-path="url(#clip0_781_1088)">
                     <path
                       d="M11.9944 5.75C11.9944 5.59833 11.9389 5.44922 11.8241 5.33766L7.02413 0.67099C6.90938 0.559063 6.756 0.50474 6.6 0.50474V0.5H3C1.34588 0.5 0 1.80849 0 3.41667V11.5833C0 13.1915 1.34588 14.5 3 14.5H9C10.6541 14.5 12 13.1915 12 11.5833V5.75H11.9944ZM7.2 2.49172L9.95175 5.16703H9C8.00738 5.16703 7.2 4.38208 7.2 3.41703V2.49172ZM9 13.3333H3C2.00738 13.3333 1.2 12.5484 1.2 11.5833V3.41667C1.2 2.45161 2.00738 1.66667 3 1.66667H6V3.41667C6 5.02484 7.34588 6.33333 9 6.33333H10.8V11.5833C10.8 12.5484 9.99263 13.3333 9 13.3333ZM9 11C9 11.3223 8.7315 11.5833 8.4 11.5833H3.6C3.2685 11.5833 3 11.3223 3 11C3 10.6777 3.2685 10.4167 3.6 10.4167H8.4C8.7315 10.4167 9 10.6777 9 11ZM9 8.66667C9 8.98896 8.7315 9.25 8.4 9.25H3.6C3.2685 9.25 3 8.98896 3 8.66667C3 8.34437 3.2685 8.08333 3.6 8.08333H8.4C8.7315 8.08333 9 8.34437 9 8.66667ZM3 6.33333C3 6.01104 3.2685 5.75 3.6 5.75H4.8C5.1315 5.75 5.4 6.01104 5.4 6.33333C5.4 6.65562 5.1315 6.91667 4.8 6.91667H3.6C3.2685 6.91667 3 6.65562 3 6.33333Z"
-                      fill="#5B5B5B"
+                      fill="currentColor"
                     />
                   </g>
                   <defs>
@@ -52,17 +60,17 @@ const List = ({ tools, onChange, selectedTool }) => {
                     fill-rule="evenodd"
                     clip-rule="evenodd"
                     d="M8 14.5714C11.6286 14.5714 14.5714 11.6286 14.5714 8C14.5714 4.37143 11.6286 1.42857 8 1.42857C4.37143 1.42857 1.42857 4.37143 1.42857 8C1.42857 11.6286 4.37143 14.5714 8 14.5714ZM8 16C12.4171 16 16 12.4171 16 8C16 3.58286 12.4171 0 8 0C3.58286 0 0 3.58286 0 8C0 12.4171 3.58286 16 8 16Z"
-                    fill="#101010"
+                    fill="currentColor"
                   />
                   <path
                     fill-rule="evenodd"
                     clip-rule="evenodd"
                     d="M8 6.35429C8.39429 6.35429 8.71429 6.67429 8.71429 7.06857V11.64C8.71429 12.0343 8.39429 12.3543 8 12.3543C7.60571 12.3543 7.28571 12.0343 7.28571 11.64V7.06857C7.28571 6.67429 7.60571 6.35429 8 6.35429Z"
-                    fill="#101010"
+                    fill="currentColor"
                   />
                   <path
                     d="M8 5.06857C8.39449 5.06857 8.71429 4.74878 8.71429 4.35429C8.71429 3.9598 8.39449 3.64 8 3.64C7.60551 3.64 7.28571 3.9598 7.28571 4.35429C7.28571 4.74878 7.60551 5.06857 8 5.06857Z"
-                    fill="#101010"
+                    fill="currentColor"
                   />
                 </svg>
               )}
@@ -80,7 +88,7 @@ const List = ({ tools, onChange, selectedTool }) => {
               maxLine={tool.id === selectedTool?.id ? 100 : 1}
               ellipsis={
                 <>
-                  &thinsp;...&thinsp;<span className="underline text-[#ABABAB]">more</span>
+                  &thinsp;...&thinsp;<span className="underline text-[#ABABAB] dark:text-[#5b5b5b]">more</span>
                 </>
               }
               basedOn="words"

src/components/Tooling/Content/Search/SearchInput.tsx

@@ -11,9 +11,6 @@ const SearchInput = ({ value, onChange }) => {
         className={clsx(
           styles.input,
           ".focus-visible",
-          "dark:text-white",
-          "dark:border-white",
-          "dark:!bg-[url(/assets/search-white.svg)]"
         )}
         onChange={onChange}
         ref={inputRef}

src/content/config.ts

@@ -18,6 +18,7 @@ const docsCollection = defineCollection({
     stub: z.string().optional(),
     ecosystem: z.string().optional(),
     l2healthflag: z.string().optional(),
+    widerContent: z.boolean().optional(),
 
     metadata: z
       .object({
@@ -36,7 +37,8 @@ const toolsCollection = defineCollection({
     name: z.string(),
     excerpt: z.string(),
     category: z.array(z.string()),
-    network: z.string().optional(),
+    // network: z.string().optional(),
+    network: z.array(z.string()).optional(),
     logo: z
       .object({
         src: z.string().optional(),