diff --git a/lib/bean/card/palette_card.dart b/lib/bean/card/palette_card.dart
new file mode 100644
index 00000000..3c0c567b
--- /dev/null
+++ b/lib/bean/card/palette_card.dart
@@ -0,0 +1,86 @@
+import 'package:flutter/material.dart';
+import 'package:material_color_utilities/material_color_utilities.dart';
+
+class PaletteCard extends StatefulWidget {
+  final Color color;
+  final bool selected;
+
+  const PaletteCard({
+    super.key,
+    required this.color,
+    required this.selected,
+  });
+
+  @override
+  State<StatefulWidget> createState() => _PaletteCardState();
+}
+
+class _PaletteCardState extends State<PaletteCard> {
+  @override
+  Widget build(BuildContext context) {
+    final Hct hct = Hct.fromInt(widget.color.value);
+    final primary = Color(Hct.from(hct.hue, 20.0, 90.0).toInt());
+    final tertiary = Color(Hct.from(hct.hue + 50, 20.0, 85.0).toInt());
+    final primaryContainer = Color(Hct.from(hct.hue, 30.0, 50.0).toInt());
+    final checkbox = Color(Hct.from(hct.hue, 30.0, 40.0).toInt());
+    return SizedBox(
+      width: 70,
+      height: 70,
+      child: Stack(
+        children: [
+          Card(
+            elevation: 0,
+            child: Container(
+              padding: const EdgeInsets.all(10),
+              child: ClipOval(
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Expanded(
+                      child: Container(
+                        color: primary,
+                      ),
+                    ),
+                    Expanded(
+                      child: Row(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Expanded(
+                            child: Container(
+                              color: tertiary,
+                            ),
+                          ),
+                          Expanded(
+                            child: Container(
+                              color: primaryContainer,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          if (widget.selected)
+            Center(
+              child: Container(
+                width: 25,
+                height: 25,
+                decoration: BoxDecoration(
+                  color: checkbox,
+                  shape: BoxShape.circle,
+                ),
+                child: Icon(
+                  Icons.check_rounded,
+                  color: Theme.of(context).colorScheme.surfaceContainerLow,
+                  size: 12,
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}
diff --git a/lib/bean/settings/color_type.dart b/lib/bean/settings/color_type.dart
index 2e5d8a44..373eca1c 100644
--- a/lib/bean/settings/color_type.dart
+++ b/lib/bean/settings/color_type.dart
@@ -2,22 +2,12 @@ import 'package:flutter/material.dart';
 
 final List<Map<String, dynamic>> colorThemeTypes = [
   {'color': Colors.green, 'label': '默认'},
-  {'color': Colors.lightGreen, 'label': '浅绿色'},
   {'color': Colors.teal, 'label': '青色'},
-  {'color': Colors.cyan, 'label': '蓝绿色'},
-  {'color': Colors.lightBlue, 'label': '浅蓝色'},
   {'color': Colors.blue, 'label': '蓝色'},
   {'color': Colors.indigo, 'label': '靛蓝色'},
-  {'color': Colors.purple, 'label': '紫色'},
   {'color': const Color(0xff6750a4), 'label': '紫罗兰色'},
-  {'color': Colors.deepPurple, 'label': '深紫色'},
   {'color': Colors.pink, 'label': '粉红色'},
-  {'color': Colors.red, 'label': '红色'},
-  {'color': Colors.orange, 'label': '橙色'},
-  {'color': Colors.amber, 'label': '琥珀色'},
   {'color': Colors.yellow, 'label': '黄色'},
-  {'color': Colors.lime, 'label': '酸橙色'},
-  {'color': Colors.blueGrey, 'label': '蓝灰色'},
-  {'color': Colors.brown, 'label': '棕色'},
-  {'color': Colors.grey, 'label': '灰色'},
+  {'color': Colors.orange, 'label': '橙色'},
+  {'color': Colors.deepOrange, 'label': '深橙色'},
 ];
diff --git a/lib/pages/settings/theme_settings_page.dart b/lib/pages/settings/theme_settings_page.dart
index fd521fb9..aa1ab36a 100644
--- a/lib/pages/settings/theme_settings_page.dart
+++ b/lib/pages/settings/theme_settings_page.dart
@@ -1,6 +1,7 @@
 import 'dart:io';
 import 'package:flutter/material.dart';
 import 'package:flutter_modular/flutter_modular.dart';
+import 'package:kazumi/bean/card/palette_card.dart';
 import 'package:kazumi/utils/storage.dart';
 import 'package:hive/hive.dart';
 import 'package:kazumi/bean/dialog/dialog_helper.dart';
@@ -204,8 +205,8 @@ class _ThemeSettingsPageState extends State<ThemeSettingsPage> {
                                   colorThemeTypes;
                               return Wrap(
                                 alignment: WrapAlignment.center,
-                                spacing: 22,
-                                runSpacing: 18,
+                                spacing: 8,
+                                runSpacing: Utils.isDesktop() ? 8 : 0,
                                 children: [
                                   ...colorThemes.map(
                                     (e) {
@@ -219,50 +220,17 @@ class _ThemeSettingsPageState extends State<ThemeSettingsPage> {
                                         },
                                         child: Column(
                                           children: [
-                                            Container(
-                                              width: 46,
-                                              height: 46,
-                                              decoration: BoxDecoration(
-                                                color:
-                                                    e['color'].withOpacity(0.8),
-                                                borderRadius:
-                                                    BorderRadius.circular(50),
-                                                border: Border.all(
-                                                  width: 2,
-                                                  color: e['color']
-                                                      .withOpacity(0.8),
-                                                ),
-                                              ),
-                                              child: AnimatedOpacity(
-                                                opacity: (e['color']
-                                                                .value
-                                                                .toRadixString(
-                                                                    16) ==
-                                                            defaultThemeColor ||
-                                                        (defaultThemeColor ==
-                                                                'default' &&
-                                                            index == 0))
-                                                    ? 1
-                                                    : 0,
-                                                duration: const Duration(
-                                                    milliseconds: 200),
-                                                child: const Icon(
-                                                  Icons.done,
-                                                  color: Colors.black,
-                                                  size: 20,
-                                                ),
-                                              ),
-                                            ),
-                                            const SizedBox(height: 3),
-                                            Text(
-                                              e['label'],
-                                              style: TextStyle(
-                                                fontSize: 12,
-                                                color: Theme.of(context)
-                                                    .colorScheme
-                                                    .outline,
-                                              ),
+                                            PaletteCard(
+                                              color: e['color'],
+                                              selected: (e['color']
+                                                          .value
+                                                          .toRadixString(16) ==
+                                                      defaultThemeColor ||
+                                                  (defaultThemeColor ==
+                                                          'default' &&
+                                                      index == 0)),
                                             ),
+                                            Text(e['label']),
                                           ],
                                         ),
                                       );