Commit 09c6312

@@ -5,7 +5,7 @@ import Button from '@components/widgets/Button.astro';
 import { Icon } from 'astro-icon/components';
 ---
 
-<div id="profile-card" class="card border-base-300 bg-base-200 border-2">
+<div id="profile-card" class="card border-base-300 bg-base-200/50 border-2">
   <figure class="px-4 pt-4">
     <a href="/about/">
       <ImageWrapper class="rounded-xl" src={profileConfig.avatar} alt={profileConfig.name} />

@@ -4,7 +4,7 @@ import Stats from './siteinfo/Stats.astro';
 import Tags from './siteinfo/Tags.astro';
 ---
 
-<div class="card border-base-300 bg-base-200 border-2">
+<div class="card border-base-300 bg-base-200/50 border-2">
   <div class="card-body px-4 py-2">
     <ul>
       {

@@ -38,7 +38,10 @@ function buildTocTree(headings: MarkdownHeading[]) {
 const tocTree = buildTocTree(headings);
 ---
 
-<div id="toc" class:list={['card border-base-300 bg-base-200 bg-base-100 border-2', className]}>
+<div
+  id="toc"
+  class:list={['card border-base-300 bg-base-200/50 bg-base-100 border-2', className]}
+>
   <div class="card-body max-h-96 overflow-y-auto p-2">
     <ul>
       {

@@ -13,7 +13,7 @@ const { categories, currentCategory } = Astro.props;
 
 <div
   id="category-bar"
-  class="card border-base-300 bg-base-200 swup-transition-slide mb-4 w-full border-2"
+  class="card border-base-300 bg-base-200/50 swup-transition-slide mb-4 w-full border-2"
 >
   <div class="card-body flex flex-row items-center gap-2 overflow-auto px-2 py-3">
     <a

@@ -51,7 +51,7 @@ const metas: ({ icon: string; text: string; link?: string; time?: Date } | undef
 
 <div
   class:list={[
-    'card border-base-300 bg-base-200 flex w-full flex-col-reverse overflow-hidden border-2 md:flex-row md:justify-between',
+    'card border-base-300 bg-base-200/50 flex w-full flex-col-reverse overflow-hidden border-2 md:flex-row md:justify-between',
     className,
   ]}
 >

@@ -26,7 +26,7 @@ const { title, description, lang, headings, comment, banner } = Astro.props;
 >
   <slot slot="head" name="head" />
   <slot slot="header-content" name="header-content" />
-  <div class="card border-base-300 bg-base-200 swup-transition-fade border-2 px-6 py-4">
+  <div class="card border-base-300 bg-base-200/50 swup-transition-fade border-2 px-6 py-4">
     <slot />
     {comment && commentConfig.enable && <Comment />}
   </div>

@@ -75,7 +75,7 @@ const postCount = await getPostsCount();
 <MainLayout>
   <div
     id="time-archive-nav"
-    class="card border-base-300 bg-base-200 swup-transition-fade mb-4 border-2"
+    class="card border-base-300 bg-base-200/50 swup-transition-fade mb-4 border-2"
   >
     <div class="breadcrumbs card-body text-md py-3">
       <ul>
@@ -103,7 +103,7 @@ const postCount = await getPostsCount();
       </ul>
     </div>
   </div>
-  <div class="card border-base-300 bg-base-200 swup-transition-fade border-2 px-6 py-4">
+  <div class="card border-base-300 bg-base-200/50 swup-transition-fade border-2 px-6 py-4">
     <div class="tooltip md:tooltip-right tooltip-bottom mx-auto w-fit">
       <h1 class="text-center text-3xl font-bold">{i18n(I18nKey.archive)}</h1>
       <div class="tooltip-content">