How to change style inside a component, for example Card component?

[ferrarafer]

Hi @satnaing , how are you? I tried to change the style of the Card component using a different background color for each mode, light and dark, but I could not get it work.

Only the light color is shown, no matter in which mode I am.

Card

import Datetime from "./Datetime";
import type { BlogFrontmatter } from "@content/_schemas";

export interface Props {
  href?: string;
  frontmatter: BlogFrontmatter;
  secHeading?: boolean;
}

export default function Card({ href, frontmatter, secHeading = true }: Props) {
  const { title, published, description } = frontmatter;
  return (
    <li className="my-6 bg-[#2c6bd8] dark:bg-[#bb151a]">
      <a
        href={href}
        className="inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
      >
        {secHeading ? (
          <h2 className="text-lg font-medium decoration-dashed hover:underline">
            {title}
          </h2>
        ) : (
          <h3 className="text-lg font-medium decoration-dashed hover:underline">
            {title}
          </h3>
        )}
      </a>
      <Datetime datetime={published} />
      <p>{description}</p>
    </li>
  );
}

Preview
Light

Dark

By the way, which is the difference of using a TypeScript for Card component instead of an Astro.

Thanks in advance !!

[satnaing]

I've used CSS variables for the entire theming 😬.

This approach has some benefits. First of all, we can use more than two themes if we want. Second, we don't have to define styles for dark themes and light themes for each element.
On the other hand, it has some trade-offs. We can no longer use Tailwind's dark variant. To solve this issue, we can do the following approaches.

Method 1: Define custom class in the global style base.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  ...
  html[data-theme="dark"] .my-custom-card {
    background-color: #bb151a;
  }
  html[data-theme="light"] .my-custom-card {
    background-color: #2c6bd8;
  }
  ...
}
...

Then add my-custom-card in the card element.
file: Card.tsx

<li className="my-6 my-custom-card">

Method 2: Define new CSS variables for that card (must be rbg values)

file: base.css

@layer base {
  :root,
  html[data-theme="light"] {
    --color-fill: 251, 254, 251;
    --color-text-base: 40, 39, 40;
    --color-accent: 0, 108, 172;
    --color-card: 230, 230, 230;
    --color-card-muted: 205, 205, 205;
    --color-border: 236, 233, 233;
    --color-card-new: 187, 21, 26;   /* new variable */
  }
  html[data-theme="dark"] {
    --color-fill: 33, 39, 55;
    --color-text-base: 234, 237, 243;
    --color-accent: 255, 107, 1;
    --color-card: 52, 63, 96;
    --color-card-muted: 138, 51, 2;
    --color-border: 171, 75, 8;
    --color-card-new: 44, 107, 216;  /* new variable */
  }

Then, add those bg color inside tailwind config
file: tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
  ...
  theme: {
    ...
     backgroundColor: {
      skin: {
        fill: withOpacity("--color-fill"),
        accent: withOpacity("--color-accent"),
        inverted: withOpacity("--color-text-base"),
        card: withOpacity("--color-card"),
        "card-muted": withOpacity("--color-card-muted"),
        "card-new": withOpacity("--color-card-new") // new bg color
      },
    },
    ...
}

And finally specify the bg color in the Card
file: Card.tsx

<li className="my-6 bg-skin-card-new">

[ferrarafer]

Thank @satnaing ! That's why was not working when I was changing through Tailwind haha, I got crazy! Now is working, I used method one ❤️