新增切换主题

yangyin

2024-12-11 4c173b743e256132e27096d38f8c9d436c13ee45

 src/theme/tailwind.scss

@@ -7,3 +7,74 @@
.container {
   max-width: unset;
}
@layer base {
   // 默认主题色黑色
   :root {
      // 背景色
      --color-bg-base: #41424a;
      --color-bg-base-exr: #2b2c30;
      --color-bg-side: #1c1e1d;
      --color-bg-border: #737373;
      // 卡片颜色
      --color-bg-card: 55, 65, 81;
      // 按钮颜色
      --color-bg-btn: 75, 85, 99;
      // 按钮hover颜色
      --color-bg-btn-hover: #0084ff;
      // 字体颜色
      --color-text-base: #fff;
      --color-text-font: #b9b9b9;
      // 按钮字体颜色
      --color-btn-base: #0084ff;
      --color-bg-avatar: #1d86ff;
   }
   .theme-pink {
      // 背景色
      --color-bg-base: #f9a8d4;
      --color-bg-base-exr: rgb(255 78 174);
      --color-bg-side: #ec4899;
      --color-bg-border: #fff;
      // 卡片颜色
      --color-bg-card: 249, 168, 212;
      // 按钮颜色
      --color-bg-btn: 236, 72, 153;
      // 按钮hover颜色
      --color-bg-btn-hover: #fff;
      // 字体颜色
      --color-text-base: #ec4899;
      --color-text-font: #fff;
      // 按钮字体颜色
      --color-btn-base: #fff;
      --color-bg-avatar: #1d86ff;
   }
   .theme-blue {
      // 背景色
      --color-bg-base: #93c5fd;
      --color-bg-base-exr: rgb(17 118 221);
      --color-bg-side: #3b82f6;
      --color-bg-border: #fff;
      // 卡片颜色
      --color-bg-card: 147, 197, 253;
      // 按钮颜色
      --color-bg-btn: 96, 165, 250;
      // 按钮hover颜色
      --color-bg-btn-hover: #fff;
      // 字体颜色
      --color-text-base: #fff;
      --color-text-font: #fff;
      // 按钮字体颜色
      --color-btn-base: #fff;
      --color-bg-avatar: #2b2c30;
   }
}

@layer components {
   .s-btn {
      // 按钮的基础样式
      @apply bg-skin-btn hover:bg-skin-btn-hover rounded;
   }
   .s-card {
      // 卡片的基础样式
      @apply bg-skin-card rounded-2xl p-8 min-w-max min-h-max flex flex-col items-center;
   }
}