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,6 +55,7 @@ const ThemeColor = () => {
               setItem={setItem}
             />
           </div>
+          <div className="flex flex-row justify-between mt-2 gap-x-5 bg-yellow-200">
             <ColorCard
               theme={theme}
               item="background"
@@ -69,6 +70,7 @@ const ThemeColor = () => {
             />
           </div>
         </div>
+      </div>
       {item && <Picker item={item} theme={theme} setTheme={setTheme} />}
     </div>
   );

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: [