feat: add dark mode

components/atoms/Card/card.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import clsx from "clsx";
 
 interface CardProps {
     className?: string;
@@ -8,7 +9,12 @@ interface CardProps {
 
 const Card: React.FC<CardProps> = ({ className, children, heading }) => {
   return (
-    <article className={`${className ? className : ""} block ${heading ? "" : "p-3"} bg-white border rounded-lg drop-shadow-md`}>
+    <article className={clsx(
+      "block bg-white border rounded-lg drop-shadow-md",
+      heading ? "" : "p-3",
+      "dark:bg-dark-slate-3 dark:border-dark-slate-8",
+      className ? className : ""
+    )}>
       {
         heading ?
           <>

components/atoms/ContextFilterButton/context-filter-button.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Text from "../Typography/text";
 import { FiPlus } from "react-icons/fi";
+
 interface ContextFilterButtonProps {
   className?: string;
   children?: React.ReactNode;
@@ -12,7 +13,7 @@ const ContextFilterButton: React.FC<ContextFilterButtonProps> = ({ className, ch
   return (
     <button
       onClick={onClick}
-      className="flex w-full items-center gap-1 py-1 px-2 bg-slate-100 border border-slate-300 text-sm text-slate-800   whitespace-nowrap rounded-md drop-shadow-sm hover:bg-slate-50 focus:outline-none focus:border-orange-500 focus:ring-orange-100 focus-visible:border-orange-500 focus:ring focus-visible:ring focus-visible:ring-orange-100 transition"
+      className="flex w-full items-center gap-1 py-1 px-2 bg-slate-100 border border-slate-300 text-sm text-slate-800 whitespace-nowrap rounded-md drop-shadow-sm hover:bg-slate-50 focus:outline-none focus:border-orange-500 focus:ring-orange-100 focus-visible:border-orange-500 focus:ring focus-visible:ring focus-visible:ring-orange-100 transition dark:bg-dark-slate-4 dark:text-slate-200 dark:hover:bg-dark-slate-6 dark:border-dark-slate-8 dark:focus:ring-dark-slate-3"
     >
       <Text className="!text-sm font-semibold truncate tracking-tight !text-slate-900">{children}</Text>
       {!isSelected && <FiPlus onClick={onClick} />}

components/atoms/Radio/radio.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import clsx from "clsx";
 import { BsFillCheckCircleFill } from "react-icons/bs";
 import { MdOutlineRadioButtonUnchecked } from "react-icons/md";
 
@@ -16,12 +17,14 @@ const Radio = ({ className, withLabel, id, children, value, checked = false, onC
   return (
     <div
       onClick={onClick}
-      className={
-        `${
-          checked && "!bg-light-orange-3"
-        }  px-2 py-1.5 text-sm text-slate-600   group  rounded-md  hover:bg-light-orange-3 hover:text-slate-800 focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200 transition` +
-        `${className}`
-      }
+      className={clsx(
+        "group px-2 py-1.5 text-sm rounded-md transition",
+        "text-slate-600 hover:bg-light-orange-3 hover:text-slate-800",
+        "focus:outline-none focus-visible:border-orange-500 focus-visible:ring focus-visible:ring-orange-200",
+        "dark:text-slate-200 dark:hover:bg-dark-slate-6 dark:hover:text-slate-100",
+        checked && "!bg-light-orange-3 !text-slate-800",
+        className
+      )}
     >
       <input
         type="radio"

components/atoms/Search/search.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { GrClose } from "react-icons/gr";
 import { FaSearch } from "react-icons/fa";
+import clsx from "clsx";
+
 import { Spinner } from "../SpinLoader/spin-loader";
 interface SearchProps {
   name: string;
@@ -61,13 +63,17 @@ const Search = ({
 
   return (
     <div
-      className={`${
+      className={clsx(
+        "flex items-center py-1 w-max px-3 shadow-input transition relative",
+        "rounded-lg bg-white border ring-light-slate-6",
+        "focus-within:ring focus-within:border-orange-500 focus-within:ring-orange-100",
+        "dark:bg-dark-slate-4 dark:border-dark-slate-8 dark:ring-dark-slate-6",
         className && className
-      } flex bg-white  py-1 w-max px-3 shadow-input border transition focus-within:ring focus-within:border-orange-500 focus-within:ring-orange-100 rounded-lg   ring-light-slate-6 items-center relative`}
+      )}
     >
       <FaSearch className="text-light-slate-9" fontSize={16} onClick={handleOnSearch} />
       <input
-        className="w-full pl-2 placeholder:text-md placeholder: text-md focus:outline-none placeholder:text-light-slate-9"
+        className="w-full pl-2 placeholder:text-md text-md focus:outline-none placeholder:text-light-slate-9 dark:bg-dark-slate-4 dark:text-dark-slate-12"
         autoFocus={autoFocus}
         placeholder={placeholder}
         name={name}
@@ -85,15 +91,15 @@ const Search = ({
       />
 
       {suggestions && suggestions.length > 0 && showSuggestions && (
-        <div className="absolute left-0 z-10 w-full pb-3 bg-white border rounded-lg cursor-pointer shadow-input border-light-slate-6 top-full">
+        <div className="absolute left-0 z-10 w-full pb-3 bg-white border rounded-lg cursor-pointer shadow-input border-light-slate-6 top-full dark:bg-dark-slate-3 dark:border-dark-slate-8">
           {suggestions.map((suggestion, index) => (
             <div
-              className="px-4 py-2 my-0.5 h-8 break-all  overflow-hidden"
+              className="px-4 py-2 my-0.5 h-8 break-all overflow-hidden"
               style={suggestionsStyle}
               key={index}
               onClick={() => handleOnSelect(suggestion)}
             >
-              <span className="pl-5 text-sm text-light-slate-9">{suggestion}</span>
+              <span className="pl-5 text-sm text-light-slate-9 dark:text-slate-400">{suggestion}</span>
             </div>
           ))}
         </div>
@@ -104,7 +110,7 @@ const Search = ({
           {isLoading ? (
             <Spinner className="w-5 h-5 " />
           ) : (
-            <GrClose className="cursor-pointer text-light-slate-9" fontSize={16} onClick={handleEmpty} />
+            <GrClose className="cursor-pointer text-light-slate-9 dark:text-dark-slate-12" fontSize={16} onClick={handleEmpty} />
           )}
         </>
       )}

components/atoms/Select/limit-select.tsx

@@ -20,17 +20,18 @@ const LimitSelect = ({ onChange, options, className, placeholder }: LimitSelectP
     <div
       className={clsx(
         "radix-state-open:ring radix-state-open:ring-light-orange-5",
-        " cursor-pointer text-base items-center overflow-x-hidden",
+        "cursor-pointer text-base items-center overflow-x-hidden",
         "bg-white text-light-slate-10 rounded-lg min-w-max",
         className
       )}
     >
       <Select onValueChange={handleSelected}>
         <SelectTrigger
           className={clsx(
-            " radix-state-open:border-light-orange-9",
+            "radix-state-open:border-light-orange-9",
             "relative text-sm items-center overflow-x-hidden",
-            "bg-white text-light-slate-12 min-w-max w-full border-light-slate-6"
+            "bg-white text-light-slate-12 min-w-max w-full border-light-slate-6",
+            "dark:bg-dark-slate-4 dark:text-dark-slate-12 dark:border-dark-slate-8"
           )}
           selectIcon={
             <div className="relative pr-4">
@@ -40,19 +41,20 @@ const LimitSelect = ({ onChange, options, className, placeholder }: LimitSelectP
           }
         >
           <div className="mr-2">
-            <span className="inline-flex mr-1 text-light-slate-9">Showing:</span>
+            <span className="inline-flex mr-1 text-light-slate-9 dark:text-slate-400">Showing:</span>
             <SelectValue>
               {selected ? options.find((option) => option.value === selected)?.name : placeholder}
             </SelectValue>
           </div>
         </SelectTrigger>
-        <SelectContent className="bg-white">
+        <SelectContent className="bg-white dark:bg-dark-slate-3 dark:border-dark-slate-8">
           {options.map((option) => (
             <SelectItem
               className={clsx(
                 "radix-highlighted:bg-light-orange-3 radix-highlighted:text-light-orange-11",
                 "flex items-center text-sm px-4 py-2 md:py-1",
-                "relative cursor-pointer rounded-md outline-none text-light-slate-12"
+                "relative cursor-pointer rounded-md outline-none text-light-slate-12",
+                "dark:text-dark-slate-12"
               )}
               value={option.value as unknown as string}
               key={option.name}

components/atoms/Select/select.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={clsx(
-      "flex h-[2.1rem] w-full items-center justify-between rounded-lg overflow-hidden   px-3 py-2 text-sm border  focus:outline-none  disabled:cursor-not-allowed disabled:opacity-50",
+      "flex h-[2.1rem] w-full items-center justify-between rounded-lg overflow-hidden px-3 py-2 text-sm border focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:text-slate-100",
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={clsx(
-        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border  shadow-md animate-in fade-in-80",
+        "relative z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-md animate-in fade-in-80",
         position === "popper" && "translate-y-1",
         className
       )}
@@ -74,7 +74,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={clsx(
-      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none radix-highlighted:bg-light-orange-3  radix-highlighted:text-light-orange-11 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none radix-highlighted:bg-light-orange-3 radix-highlighted:text-light-orange-11 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:!text-dark-slate-12 dark:radix-highlighted:!text-dark-slate-3",
       className
     )}
     {...props}

components/atoms/TableTitle/table-title.tsx

@@ -7,10 +7,10 @@ interface TableTitleProps {
 
 const TableTitle: React.FC<TableTitleProps> = ({ className, text }) => {
   return (
-    <div className={`${className ? className : ""} font-semibold tracking-wide text-xs text-light-slate-11 uppercase`}>
+    <div className={`${className ? className : ""} font-semibold tracking-wide text-xs text-light-slate-11 uppercase dark:text-dark-slate-12`}>
       {text}
     </div>
   );
 };
 
-export default TableTitle;
+export default TableTitle;

components/atoms/ToggleGroup/toggle-group.tsx

@@ -1,5 +1,7 @@
 import * as GroupToggle from "@radix-ui/react-toggle-group";
 import { useState } from "react";
+import clsx from "clsx";
+
 import ToggleGroupItem from "../ToggleGroupItem/toggle-group-item";
 
 interface ToggleGroupProps {
@@ -42,7 +44,15 @@ const ToggleGroup = ({
   if(!children) return null;
 
   return (
-    <GroupToggle.Root type="single" value={value} onValueChange={handleValueChange} className={`bg-light-slate-6 rounded-lg p-0.25 ${className && className}`}>
+    <GroupToggle.Root
+      type="single"
+      value={value}
+      onValueChange={handleValueChange}
+      className={clsx(
+        "rounded-lg p-0.25 bg-light-slate-6 dark:bg-dark-slate-6",
+        className ? className : ""
+      )}
+    >
       {
         Array.isArray(children) ? children.map((child, index) => (
           <ToggleGroupItem checked={value==`${index}`} value={`${index}`} key={index}>

components/atoms/ToggleGroupItem/toggle-group-item.tsx

@@ -15,8 +15,11 @@ const ToggleGroupItem = ({
 
   return (
     <GroupToggle.Item value={value}
-      className={clsx("text-sm text-light-slate-11 px-4 py-2 m-0.5 rounded-md font-semibold",
-        checked && "bg-light-slate-1 text-light-slate-12")}>
+      className={clsx(
+        "px-4 py-2 m-0.5 rounded-md font-semibold text-sm text-light-slate-11 dark:text-slate-300",
+        checked && "bg-light-slate-1 text-light-slate-12 dark:bg-dark-slate-3 dark:text-dark-slate-12"
+      )}
+    >
       {children}
     </GroupToggle.Item>
   );

components/atoms/ToggleOption/toggle-option.tsx

@@ -10,10 +10,10 @@ const ToggleOption = ({ optionText, withIcon, checked, handleToggle }: ToogleOpt
   return (
     <div
       onClick={handleToggle}
-      className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-0.5 border border-light-slate-6 bg-light-slate-1"
+      className="inline-flex cursor-pointer items-center gap-2 rounded-md px-2 py-0.5 border border-light-slate-6 bg-light-slate-1 dark:border-dark-slate-8 dark:bg-dark-slate-3"
     >
       <ToggleSwitch size="sm" handleToggle={handleToggle} name={optionText} checked={checked} />
-      <span className="  text-sm text-light-slate-11">{optionText}</span>
+      <span className="text-sm text-light-slate-11 dark:text-dark-slate-12">{optionText}</span>
       {withIcon && (
         <HiInformationCircle
           title="An outside contributor is not a member the organization"

components/atoms/ToggleSwitch/toggle-switch.tsx

@@ -25,11 +25,11 @@ const ToggleSwitch = ({
       className={clsx(
         classNames ?? classNames,
         checked && "!bg-light-orange-10 justify-end",
-        "flex rounded-2xl p-[2px] transition overflow-hidden bg-light-slate-8",
+        "flex rounded-2xl p-[2px] transition overflow-hidden bg-light-slate-8 dark:bg-dark-slate-8",
         size === "lg" ? "w-14 h-[30px]" : size === "base" ? "w-11 h-6" : size === "sm" ? "w-7 h-4" : ""
       )}
     >
-      <Switch.Thumb className={clsx("bg-white block rounded-2xl  h-full w-1/2")} />
+      <Switch.Thumb className={clsx("bg-white block rounded-2xl h-full w-1/2")} />
     </Switch.Root>
   );
 };

components/molecules/ComponentDateFilter/component-date-filter.tsx

@@ -21,13 +21,13 @@ const ComponentDateFilter = ({ setRangeFilter, defaultRange }: ComponentDateFilt
 
   return (
     <div className="flex text-sm gap-4 items-center">
-      <span>Date filter:</span>
+      <span className="dark:text-dark-slate-12">Date filter:</span>
       <div className="flex items-center">
         {dates.map((range, index) => (
           <div
             onClick={() => handleFilterClick(range)}
-            className={`px-2 py-1  rounded-lg cursor-pointer transition text-light-slate-9 ${
-              activeFilter === range && "border text-light-slate-12 border-light-orange-10"
+            className={`px-2 py-1 rounded-lg cursor-pointer transition text-light-slate-9 dark:text-slate-400 ${
+              activeFilter === range && "border text-light-slate-12 border-light-orange-10 dark:!text-dark-slate-12"
             }`}
             key={index}
           >

components/molecules/FilterCardSelect/filter-card-select.tsx

@@ -46,18 +46,18 @@ const FilterCardSelect: React.FC<FilterCardSelectProps> = ({
       <SelectTrigger
         selectIcon={
           <Image
-            className="ml-3 "
+            className="ml-3 dark:invert dark:sepia dark:saturate-0 dark:hue-rotate-[183deg] dark:brightness-[104%] dark:contrast-100"
             width={13}
             height={13}
             alt={icons[icon] ? icons[icon].alt : "Icons"}
             src={icons[icon] ? icons[icon].src : icons.topic.src}
           />
         }
-        className="text-base rounded-lg cursor-pointer h-[1.95rem] w-max border-slate-300 hover:bg-slate-50 focus:ring-1 bg-slate-100 focus:ring-slate-300"
+        className="text-base rounded-lg cursor-pointer h-[1.95rem] w-max border-slate-300 hover:bg-slate-50 focus:ring-1 bg-slate-100 focus:ring-slate-300 dark:border-dark-slate-8 dark:hover:bg-dark-slate-6 dark:bg-dark-slate-4"
       >
         <SelectValue placeholder="select topic" />
       </SelectTrigger>
-      <SelectContent className="bg-white">
+      <SelectContent className="bg-white dark:bg-dark-slate-3 dark:border-dark-slate-8">
         {options.map((option, index) => (
           <SelectItem
             className="w-48 text-base"

components/molecules/FilterHeader/filter-header.tsx

@@ -40,10 +40,12 @@ const HeaderFilter = () => {
         <ContextThumbnail size={120} ContextThumbnailURL={getTopicThumbnail(filterName as interestsType)}></ContextThumbnail>
       </div>
       <div className="header-info md:truncate flex flex-col grow justify-center p-2">
-        <Title level={1} className="!text-3xl font-semibold tracking-tight text-slate-900">
+        {/* TODO: remove ! after issue https://github.com/open-sauced/insights/issues/1133 is resolved */}
+        <Title level={1} className="!text-3xl font-semibold tracking-tight text-slate-900 dark:!text-slate-100">
           {topicNameFormatting(filterName as string)}
         </Title>
-        <Text className="mt-1 !text-base   text-slate-500">
+        {/* TODO: remove ! after issue https://github.com/open-sauced/insights/issues/1133 is resolved */}
+        <Text className="mt-1 !text-base text-slate-500 dark:!text-slate-400">
           {`Insights on GitHub repositories using the ${topicNameFormatting(filterName as string)} topic.`}
         </Text>
         <div className="flex mt-4 items-center gap-2">

components/molecules/HeaderLogo/header-logo.tsx

@@ -20,7 +20,7 @@ const HeaderLogo: React.FC<HeaderLogoProps> = ({ textIsBlack, withBg = false })
           height={32}
           src={withBg ? openSaucedImgWithBg : openSaucedImg}
         />
-        <p className={`font-bold !text-base ${textIsBlack ? "!text-black" : "!text-white"}`}>OpenSauced</p>
+        <p className={`font-bold !text-base ${textIsBlack ? "!text-black" : "!text-white"} dark:!text-slate-100`}>OpenSauced</p>
       </div>
     </Link>
   );

components/molecules/HighlightCard/highlight-card.tsx

@@ -91,13 +91,13 @@ const HighlightCard: React.FC<HighlightCardProps> = ({
               />
             </div>
             {/* Label: Text */}
-            <div className="text-sm text-slate-600   leading-none">{label ? label : "Label"}</div>
+            <div className="text-sm text-slate-600 leading-none dark:text-slate-200">{label ? label : "Label"}</div>
           </div>
 
           {/* Last Updated Information */}
           <div className="flex items-center gap-1">
             {/* Last Updated: Number */}
-            <div className="text-sm text-slate-600   leading-none">{numChanged ? numChanged : 0}</div>
+            <div className="text-sm text-slate-600 leading-none dark:text-slate-200">{numChanged ? numChanged : 0}</div>
             {/* Last Updated: Icon */}
             <Image
               width={14}
@@ -117,12 +117,12 @@ const HighlightCard: React.FC<HighlightCardProps> = ({
             {/* Main Number */}
             <div className="flex flex-col items-center">
               {/* Percentage */}
-              <div className="text-4xl">
+              <div className="text-4xl dark:text-slate-100">
                 {percentage !== undefined ? `${percentage}%` : <span></span>}{value !== undefined ? value : ""}
               </div>
 
               {/* Label */}
-              <div className="text-base   text-slate-600 mt-0.5">
+              <div className="text-base text-slate-600 mt-0.5 dark:text-slate-100">
                 <span>{percentageLabel ? percentageLabel : ""}{valueLabel ? valueLabel : ""}&nbsp;</span>
               </div>
             </div>

components/molecules/NivoScatterChart/nivo-scatter-chart.tsx

@@ -103,7 +103,7 @@ const NivoScatterPlot = ({
   return (
     <>
       <div className="flex flex-col md:flex-row justify-between px-7 pt-3 items-center">
-        <Title level={4} className="!text-sm  !text-light-slate-12">
+        <Title level={4} className="!text-sm !text-light-slate-12 dark:!text-dark-slate-12">
           {title}
         </Title>
         <ToggleGroup handleChange={handleTogglePrFilter} className="hidden lg:flex">
@@ -166,7 +166,20 @@ const NivoScatterPlot = ({
             format: (value) => (value === 0 ? "Today" : value > 32 ? "30+ days ago" : `${value} days ago`)
           }}
           theme={{
-            axis: {},
+            axis: {
+              ticks: {
+                text: {
+                  // this color is equal to `dark-slate-10` in tailwind config
+                  fill: "hsl(206, 5.2%, 49.5%)"
+                }
+              },
+              legend: {
+                text: {
+                  // this color is equal to `dark-slate-11` in tailwind config
+                  fill: "hsl(206, 6.0%, 63.0%)"
+                }
+              }
+            },
             grid: {
               line: {
                 strokeDasharray: "4 4",