diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart
index fd9939bacd..64d68fa1a3 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart
@@ -10,23 +10,23 @@ extension SelectOptionColorExtension on SelectOptionColorPB {
   Color make(BuildContext context) {
     switch (this) {
       case SelectOptionColorPB.Purple:
-        return AFThemeExtension.tint1;
+        return AFThemeExtension.of(context).tint1;
       case SelectOptionColorPB.Pink:
-        return AFThemeExtension.tint2;
+        return AFThemeExtension.of(context).tint2;
       case SelectOptionColorPB.LightPink:
-        return AFThemeExtension.tint3;
+        return AFThemeExtension.of(context).tint3;
       case SelectOptionColorPB.Orange:
-        return AFThemeExtension.tint4;
+        return AFThemeExtension.of(context).tint4;
       case SelectOptionColorPB.Yellow:
-        return AFThemeExtension.tint5;
+        return AFThemeExtension.of(context).tint5;
       case SelectOptionColorPB.Lime:
-        return AFThemeExtension.tint6;
+        return AFThemeExtension.of(context).tint6;
       case SelectOptionColorPB.Green:
-        return AFThemeExtension.tint7;
+        return AFThemeExtension.of(context).tint7;
       case SelectOptionColorPB.Aqua:
-        return AFThemeExtension.tint8;
+        return AFThemeExtension.of(context).tint8;
       case SelectOptionColorPB.Blue:
-        return AFThemeExtension.tint9;
+        return AFThemeExtension.of(context).tint9;
       default:
         throw ArgumentError;
     }
diff --git a/frontend/app_flowy/packages/flowy_infra/lib/color_extension.dart b/frontend/app_flowy/packages/flowy_infra/lib/color_extension.dart
index 4263cadd27..8569f987cd 100644
--- a/frontend/app_flowy/packages/flowy_infra/lib/color_extension.dart
+++ b/frontend/app_flowy/packages/flowy_infra/lib/color_extension.dart
@@ -5,15 +5,15 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
   final Color? warning;
   final Color? success;
 
-  static Color tint1 = const Color(0xffe8e0ff);
-  static Color tint2 = const Color(0xffffe7fd);
-  static Color tint3 = const Color(0xffffe7ee);
-  static Color tint4 = const Color(0xffffefe3);
-  static Color tint5 = const Color(0xfffff2cd);
-  static Color tint6 = const Color(0xfff5ffdc);
-  static Color tint7 = const Color(0xffddffd6);
-  static Color tint8 = const Color(0xffdefff1);
-  static Color tint9 = const Color(0xffe1fbff);
+  final Color tint1;
+  final Color tint2;
+  final Color tint3;
+  final Color tint4;
+  final Color tint5;
+  final Color tint6;
+  final Color tint7;
+  final Color tint8;
+  final Color tint9;
 
   final Color greyHover;
   final Color greySelect;
@@ -27,6 +27,15 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
   const AFThemeExtension({
     required this.warning,
     required this.success,
+    required this.tint1,
+    required this.tint2,
+    required this.tint3,
+    required this.tint4,
+    required this.tint5,
+    required this.tint6,
+    required this.tint7,
+    required this.tint8,
+    required this.tint9,
     required this.greyHover,
     required this.greySelect,
     required this.lightGreyHover,
@@ -44,6 +53,15 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
   AFThemeExtension copyWith({
     Color? warning,
     Color? success,
+    Color? tint1,
+    Color? tint2,
+    Color? tint3,
+    Color? tint4,
+    Color? tint5,
+    Color? tint6,
+    Color? tint7,
+    Color? tint8,
+    Color? tint9,
     Color? greyHover,
     Color? greySelect,
     Color? lightGreyHover,
@@ -55,6 +73,15 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
     return AFThemeExtension(
       warning: warning ?? this.warning,
       success: success ?? this.success,
+      tint1: tint1 ?? this.tint1,
+      tint2: tint2 ?? this.tint2,
+      tint3: tint3 ?? this.tint3,
+      tint4: tint4 ?? this.tint4,
+      tint5: tint5 ?? this.tint5,
+      tint6: tint6 ?? this.tint6,
+      tint7: tint7 ?? this.tint7,
+      tint8: tint8 ?? this.tint8,
+      tint9: tint9 ?? this.tint9,
       greyHover: greyHover ?? this.greyHover,
       greySelect: greySelect ?? this.greySelect,
       lightGreyHover: lightGreyHover ?? this.lightGreyHover,
@@ -74,6 +101,15 @@ class AFThemeExtension extends ThemeExtension<AFThemeExtension> {
     return AFThemeExtension(
       warning: Color.lerp(warning, other.warning, t),
       success: Color.lerp(success, other.success, t),
+      tint1: Color.lerp(tint1, other.tint1, t)!,
+      tint2: Color.lerp(tint2, other.tint2, t)!,
+      tint3: Color.lerp(tint3, other.tint3, t)!,
+      tint4: Color.lerp(tint4, other.tint4, t)!,
+      tint5: Color.lerp(tint5, other.tint5, t)!,
+      tint6: Color.lerp(tint6, other.tint6, t)!,
+      tint7: Color.lerp(tint7, other.tint7, t)!,
+      tint8: Color.lerp(tint8, other.tint8, t)!,
+      tint9: Color.lerp(tint9, other.tint9, t)!,
       greyHover: Color.lerp(greyHover, other.greyHover, t)!,
       greySelect: Color.lerp(greySelect, other.greySelect, t)!,
       lightGreyHover: Color.lerp(lightGreyHover, other.lightGreyHover, t)!,
diff --git a/frontend/app_flowy/packages/flowy_infra/lib/theme.dart b/frontend/app_flowy/packages/flowy_infra/lib/theme.dart
index 8e845ea324..fcd7ef95e5 100644
--- a/frontend/app_flowy/packages/flowy_infra/lib/theme.dart
+++ b/frontend/app_flowy/packages/flowy_infra/lib/theme.dart
@@ -199,6 +199,15 @@ class AppTheme {
         AFThemeExtension(
           warning: yellow,
           success: green,
+          tint1: tint1,
+          tint2: tint2,
+          tint3: tint3,
+          tint4: tint4,
+          tint5: tint5,
+          tint6: tint6,
+          tint7: tint7,
+          tint8: tint8,
+          tint9: tint9,
           greyHover: bg2,
           greySelect: bg3,
           lightGreyHover: shader6,