update ColorCard.js, src/components/ThemeColor/index.js and tailwind.config.js

src/components/ThemeColor/ColorCard.js

@@ -27,7 +27,7 @@ const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
         {" "}
         {dark ? (
           <div
-            className={`flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px] bg-${item}Dark ${
+            className={`flex flex-col cursor-pointer rounded-sm relative p-4 w-[165px] h-[75px] bg-${item}Dark ${
               text ? `text-${item}Text` : ""
             }`}
             onClick={() => setItem(item + "Dark")}
@@ -57,3 +57,5 @@ const ColorCard = ({ theme, text, dark, light, item, setItem }) => {
     </div>
   );
 };
+
+export default ColorCard;

src/components/ThemeColor/index.js

@@ -55,18 +55,20 @@ const ThemeColor = () => {
               setItem={setItem}
             />
           </div>
-          <ColorCard
+          <div className="flex flex-row justify-between mt-2 gap-x-5 bg-yellow-200">
-            theme={theme}
+            <ColorCard
-            item="background"
+              theme={theme}
-            text={true}
+              item="background"
-            setItem={setItem}
+              text={true}
-          />
+              setItem={setItem}
-          <ColorCard
+            />
-            theme={theme}
+            <ColorCard
-            item="surface"
+              theme={theme}
-            text={true}
+              item="surface"
-            setItem={setItem}
+              text={true}
-          />
+              setItem={setItem}
+            />
+          </div>
         </div>
       </div>
       {item && <Picker item={item} theme={theme} setTheme={setTheme} />}

tailwind.config.js

@@ -20,6 +20,10 @@ module.exports = {
       primaryLight: "var(--theme-primaryLight)",
       secondaryDark: "var(--theme-secondaryDark)",
       secondaryLight: "var(--theme-secondaryLight)",
+      background: "var(--theme-background)",
+      backgroundText: "var(--theme-backgroundText)",
+      surface: "var(--theme-surface)",
+      surfaceText: "var(--theme-surfaceText)",
     },
   },
   plugins: [