Support dark mode

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(),

src/content/docs/en/developers/tooling-deployed-on-scroll.mdx

@@ -5,6 +5,7 @@ title: "Tooling deployed on Scroll"
 lang: "en"
 permalink: "developers/tooling-deployed-on-scroll/"
 excerpt: ""
+widerContent: true
 ---
 
 import Aside from "../../../../components/Aside.astro"

src/content/tools/en/aave.mdx

@@ -4,7 +4,7 @@ category: ["Defi"]
 excerpt: ""
 logo: { src: "https://cryptologos.cc/logos/aave-aave-logo.png", alt: "Aave Logo" }
 website: "https://search.onaave.com/?q=Scroll"
-network: "Mainnet"
+network: ["Mainnet"]
 ---
 
 You can find contract addresses for Aave on [Scroll Mainnet](https://github.com/bgd-labs/aave-address-book/blob/main/src/AaveV3Scroll.sol) and [Scroll Sepolia](https://github.com/bgd-labs/aave-address-book/blob/main/src/AaveV3ScrollSepolia.sol).

src/content/tools/en/eas.mdx

@@ -4,19 +4,26 @@ category: ["Identity"]
 excerpt: "Ethereum Attestation Service (EAS) is an infrastructure public good for making attestations onchain or offchain about anything."
 logo: { src: "https://pbs.twimg.com/profile_images/1593335725751083008/0XMyDyLq_400x400.png", alt: "EAS Logo" }
 website: "https://attest.org/"
-network: "Mainnet"
+network: ["Mainnet"]
 ---
 
 **_Scroll Mainnet contracts:_**
 
-- EAS: [`0xC47300428b6AD2c7D03BB76D05A176058b47E6B0`](https://scrollscan.com/address/0xC47300428b6AD2c7D03BB76D05A176058b47E6B0)
-- SchemaRegistry: [`0xD2CDF46556543316e7D34e8eDc4624e2bB95e3B6`](https://scrollscan.com/address/0xD2CDF46556543316e7D34e8eDc4624e2bB95e3B6)
-- EIP712Proxy: [`0x77b7DA1c40762Cd8AFfE2069b575328EfD4D9801`](https://scrollscan.com/address/0x77b7DA1c40762Cd8AFfE2069b575328EfD4D9801)
+- EAS:  
+[`0xC47300428b6AD2c7D03BB76D05A176058b47E6B0`](https://scrollscan.com/address/0xC47300428b6AD2c7D03BB76D05A176058b47E6B0)
+- SchemaRegistry:   
+[`0xD2CDF46556543316e7D34e8eDc4624e2bB95e3B6`](https://scrollscan.com/address/0xD2CDF46556543316e7D34e8eDc4624e2bB95e3B6)
+- EIP712Proxy:  
+[`0x77b7DA1c40762Cd8AFfE2069b575328EfD4D9801`](https://scrollscan.com/address/0x77b7DA1c40762Cd8AFfE2069b575328EfD4D9801)
 - Indexer: `Not deployed yet`
 
 **_Scroll Sepolia contracts:_**
 
-- EAS: [`0xaEF4103A04090071165F78D45D83A0C0782c2B2a`](https://sepolia.scrollscan.com/address/0xaEF4103A04090071165F78D45D83A0C0782c2B2a)
-- SchemaRegistry: [`0x55D26f9ae0203EF95494AE4C170eD35f4Cf77797`](https://sepolia.scrollscan.com/address/0x55D26f9ae0203EF95494AE4C170eD35f4Cf77797)
-- EIP712Proxy: [`0xB3574f76b1720E61FdA98702c7016674CD6Eaa7b`](https://sepolia.scrollscan.com/address/0xB3574f76b1720E61FdA98702c7016674CD6Eaa7b)
-- Indexer: [`0x7C2cb1eDC328491da52de2a0afc44D3B0Ae7ee17`](https://sepolia.scrollscan.com/address/0x7C2cb1eDC328491da52de2a0afc44D3B0Ae7ee17)
+- EAS:  
+[`0xaEF4103A04090071165F78D45D83A0C0782c2B2a`](https://sepolia.scrollscan.com/address/0xaEF4103A04090071165F78D45D83A0C0782c2B2a)
+- SchemaRegistry:   
+[`0x55D26f9ae0203EF95494AE4C170eD35f4Cf77797`](https://sepolia.scrollscan.com/address/0x55D26f9ae0203EF95494AE4C170eD35f4Cf77797)
+- EIP712Proxy:  
+[`0xB3574f76b1720E61FdA98702c7016674CD6Eaa7b`](https://sepolia.scrollscan.com/address/0xB3574f76b1720E61FdA98702c7016674CD6Eaa7b)
+- Indexer:  
+[`0x7C2cb1eDC328491da52de2a0afc44D3B0Ae7ee17`](https://sepolia.scrollscan.com/address/0x7C2cb1eDC328491da52de2a0afc44D3B0Ae7ee17)

src/content/tools/en/fake-data/alchemy-pay.mdx

@@ -4,7 +4,7 @@ category: ["Infrastructure", "Tooling"]
 excerpt: "At Dora we believe that as applications leverage online & onchain infrastructure, unlocking search drives understandability — embedding interactivity at the discoverability layer catalyzes mass adoption."
 logo: { src: "https://scroll-eco-list.netlify.app/logos/Chainlink.png", alt: "Chainlink Logo" }
 website: "https://chain.link/"
-network: "Mainnet"
+network: ["Mainnet"]
 ---
 
 Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link.

src/content/tools/en/fake-data/bware-labs.mdx

@@ -4,7 +4,7 @@ category: ["Infrastructure", "Tooling"]
 excerpt: "At Dora we believe that as applications leverage online & onchain infrastructure, unlocking search drives understandability — embedding interactivity at the discoverability layer catalyzes mass adoption."
 logo: { src: "https://scroll-eco-list.netlify.app/logos/Bware%20Labs.png", alt: "Chainlink Logo" }
 website: "https://bwarelabs.com/"
-network: "Mainnet"
+network: ["Mainnet"]
 ---
 
 Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link.

src/content/tools/en/fake-data/chainlink.mdx

@@ -4,7 +4,7 @@ category: ["Infrastructure", "Tooling"]
 excerpt: "Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link."
 logo: { src: "https://scroll-eco-list.netlify.app/logos/Chainlink.png", alt: "Chainlink Logo" }
 website: "https://chain.link/"
-network: "Testnet"
+network: ["Testnet"]
 ---
 
 Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link.

src/content/tools/en/fake-data/chainstack.mdx

@@ -4,7 +4,7 @@ category: ["Indexer", "Tooling"]
 excerpt: "Crypto’s Data Platform\nQuery, visualize, share and export data across 15+ blockchains. Build together with Web3’s biggest data community."
 logo: { src: "https://scroll-eco-list.netlify.app/logos/Chainstack.png", alt: "Chainlink Logo" }
 website: "https://bwarelabs.com/"
-network: "Mainnet"
+network: ["Mainnet"]
 ---
 
 Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link.

src/content/tools/en/fake-data/dune.mdx

@@ -4,7 +4,7 @@ category: ["Indexer", "Tooling"]
 excerpt: "Crypto’s Data Platform Query, visualize, share and export data across 15+ blockchains. Build together with Web3’s biggest data community."
 logo: { src: "https://scroll-eco-list.netlify.app/logos/dune.jpg", alt: "Chainlink Logo" }
 website: "https://bwarelabs.com/"
-network: "Mainnet"
+network: ["Mainnet"]
 ---
 
 Chainlink is the industry-standard decentralized computing platform powering the verifiable web. Chainlink has enabled over $9 trillion in transaction value by providing financial institutions, startups, and developers worldwide with access to real-world data, offchain computation, and secure cross-chain interoperability across any blockchain. Chainlink powers verifiable applications and high-integrity markets for banking, DeFi, global trade, gaming, and other major sectors. Learn more about Chainlink by visiting chain.link or reading the developer documentation at docs.chain.link.

src/content/tools/en/fake-data/espresso-systems.mdx

@@ -4,7 +4,7 @@ category: ["Infrastructure", "Privacy", "Tooling"]
 excerpt: "Espresso Systems builds tools and infrastructure that create more safe, open, and performant options for interacting and transacting on-chain."
 logo: { src: "https://scroll-eco-list.netlify.app/logos/Espresso%20Systems.png", alt: "Chainlink Logo" }
 website: "https://bwarelabs.com/"
-network: "Mainnet"
+network: ["Mainnet"]
 ---
 
 Espresso Systems builds tools and infrastructure that create more safe, open, and performant options for interacting and transacting on-chain.

src/content/tools/en/fake-data/etherspot.mdx

@@ -4,7 +4,7 @@ category: ["Infrastructure", "Tooling", "Wallet"]
 excerpt: "Account Abstraction SDK that simplifies complex blockchain operations and enables easy onboarding of new users for a frictionless Web3 experience"
 logo: { src: "https://scroll-eco-list.netlify.app/logos/Etherspot.png", alt: "Chainlink Logo" }
 website: "https://bwarelabs.com/"
-network: "Mainnet"
+network: ["Mainnet"]
 ---
 
 Espresso Systems builds tools and infrastructure that create more safe, open, and performant options for interacting and transacting on-chain.

src/content/tools/en/fake-data/openocean.mdx

@@ -4,7 +4,7 @@ category:  ["DeFi", "Tooling"]
 excerpt: "OpenOcean is the leading DEX aggregator across 30+ networks and integrated 1000+ deep liquidity sources. With its dynamic intelligent routing algorithm, OpenOcean brings the best swap returns .."
 logo: { src: "https://scroll-eco-list.netlify.app/logos/OpenOcean.png", alt: "Chainlink Logo" }
 website: "https://bwarelabs.com/"
-network: "Mainnet"
+network: ["Mainnet"]
 noAdditionalInfo: true
 ---
 

src/content/tools/en/fake-data/quick-node.mdx

@@ -4,7 +4,7 @@ category:  ["Infrastructure", "Tooling"]
 excerpt: "Since its founding in 2017, QuickNode has emerged as the go-to solution for businesses and innovators requiring world-class blockchain development tools for speed, reliability, and security. Handling ... "
 logo: { src: "https://scroll-eco-list.netlify.app/logos/QuickNode.png", alt: "Chainlink Logo" }
 website: "https://bwarelabs.com/"
-network: "Mainnet"
+network: ["Mainnet"]
 noAdditionalInfo: true
 ---
 

src/content/tools/en/fake-data/search-on-dora.mdx

@@ -4,7 +4,7 @@ category:  ["Infrastructure", "Tooling"]
 excerpt: "At Dora we believe that as applications leverage online & onchain infrastructure, unlocking search drives understandability — embedding interactivity at the discoverability layer catalyzes mass adoption. "
 logo: { src: "https://scroll-eco-list.netlify.app/logos/Search%20On%20Dora.png", alt: "Chainlink Logo" }
 website: "https://bwarelabs.com/"
-network: "Mainnet"
+network: ["Mainnet"]
 noAdditionalInfo: true
 ---