diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_component.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_component.dart
index aed94fdf57..e1b12d05e2 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_component.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_component.dart
@@ -11,6 +11,8 @@ import 'package:highlight/highlight.dart' as highlight;
 import 'package:highlight/languages/all.dart';
 import 'package:provider/provider.dart';
 
+import 'code_block_themes.dart';
+
 class CodeBlockKeys {
   const CodeBlockKeys._();
 
@@ -234,6 +236,7 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
   }
 
   Widget _buildCodeBlock(BuildContext context, TextDirection textDirection) {
+    final isLightMode = Theme.of(context).brightness == Brightness.light;
     final delta = node.delta ?? Delta();
     final content = delta.toPlainText();
 
@@ -248,7 +251,7 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
     if (codeNodes == null) {
       throw Exception('Code block parse error.');
     }
-    final codeTextSpans = _convert(codeNodes);
+    final codeTextSpans = _convert(codeNodes, isLightMode: isLightMode);
     return Padding(
       padding: widget.padding,
       child: AppFlowyRichText(
@@ -319,11 +322,17 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
 
   // Copy from flutter.highlight package.
   // https://github.com/git-touch/highlight.dart/blob/master/flutter_highlight/lib/flutter_highlight.dart
-  List<TextSpan> _convert(List<highlight.Node> nodes) {
+  List<TextSpan> _convert(
+    List<highlight.Node> nodes, {
+    bool isLightMode = true,
+  }) {
     final List<TextSpan> spans = [];
     var currentSpans = spans;
     final List<List<TextSpan>> stack = [];
 
+    final codeblockTheme =
+        isLightMode ? lightThemeInCodeblock : darkThemeInCodeBlock;
+
     void traverse(highlight.Node node) {
       if (node.value != null) {
         currentSpans.add(
@@ -331,7 +340,7 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
               ? TextSpan(text: node.value)
               : TextSpan(
                   text: node.value,
-                  style: _builtInCodeBlockTheme[node.className!],
+                  style: codeblockTheme[node.className!],
                 ),
         );
       } else if (node.children != null) {
@@ -339,7 +348,7 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
         currentSpans.add(
           TextSpan(
             children: tmp,
-            style: _builtInCodeBlockTheme[node.className!],
+            style: codeblockTheme[node.className!],
           ),
         );
         stack.add(currentSpans);
@@ -361,46 +370,3 @@ class _CodeBlockComponentWidgetState extends State<CodeBlockComponentWidget>
     return spans;
   }
 }
-
-const _builtInCodeBlockTheme = {
-  'root':
-      TextStyle(backgroundColor: Color(0xffffffff), color: Color(0xff000000)),
-  'comment': TextStyle(color: Color(0xff007400)),
-  'quote': TextStyle(color: Color(0xff007400)),
-  'tag': TextStyle(color: Color(0xffaa0d91)),
-  'attribute': TextStyle(color: Color(0xffaa0d91)),
-  'keyword': TextStyle(color: Color(0xffaa0d91)),
-  'selector-tag': TextStyle(color: Color(0xffaa0d91)),
-  'literal': TextStyle(color: Color(0xffaa0d91)),
-  'name': TextStyle(color: Color(0xffaa0d91)),
-  'variable': TextStyle(color: Color(0xff3F6E74)),
-  'template-variable': TextStyle(color: Color(0xff3F6E74)),
-  'code': TextStyle(color: Color(0xffc41a16)),
-  'string': TextStyle(color: Color(0xffc41a16)),
-  'meta-string': TextStyle(color: Color(0xffc41a16)),
-  'regexp': TextStyle(color: Color(0xff0E0EFF)),
-  'link': TextStyle(color: Color(0xff0E0EFF)),
-  'title': TextStyle(color: Color(0xff1c00cf)),
-  'symbol': TextStyle(color: Color(0xff1c00cf)),
-  'bullet': TextStyle(color: Color(0xff1c00cf)),
-  'number': TextStyle(color: Color(0xff1c00cf)),
-  'section': TextStyle(color: Color(0xff643820)),
-  'meta': TextStyle(color: Color(0xff643820)),
-  'type': TextStyle(color: Color(0xff5c2699)),
-  'built_in': TextStyle(color: Color(0xff5c2699)),
-  'builtin-name': TextStyle(color: Color(0xff5c2699)),
-  'params': TextStyle(color: Color(0xff5c2699)),
-  'attr': TextStyle(color: Color(0xff836C28)),
-  'subst': TextStyle(color: Color(0xff000000)),
-  'formula': TextStyle(
-    backgroundColor: Color(0xffeeeeee),
-    fontStyle: FontStyle.italic,
-  ),
-  'addition': TextStyle(backgroundColor: Color(0xffbaeeba)),
-  'deletion': TextStyle(backgroundColor: Color(0xffffc8bd)),
-  'selector-id': TextStyle(color: Color(0xff9b703f)),
-  'selector-class': TextStyle(color: Color(0xff9b703f)),
-  'doctag': TextStyle(fontWeight: FontWeight.bold),
-  'strong': TextStyle(fontWeight: FontWeight.bold),
-  'emphasis': TextStyle(fontStyle: FontStyle.italic),
-};
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_themes.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_themes.dart
new file mode 100644
index 0000000000..86fa2f99fe
--- /dev/null
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_themes.dart
@@ -0,0 +1,116 @@
+import 'package:flutter/painting.dart';
+
+const lightThemeInCodeblock = {
+  'root': TextStyle(
+    backgroundColor: Color(0xfffbf1c7),
+    color: Color(0xff3c3836),
+  ),
+  'subst': TextStyle(color: Color(0xff3c3836)),
+  'deletion': TextStyle(color: Color(0xff9d0006)),
+  'formula': TextStyle(color: Color(0xff9d0006)),
+  'keyword': TextStyle(color: Color(0xff9d0006)),
+  'link': TextStyle(color: Color(0xff9d0006)),
+  'selector-tag': TextStyle(color: Color(0xff9d0006)),
+  'built_in': TextStyle(color: Color(0xff076678)),
+  'emphasis': TextStyle(
+    color: Color(0xff076678),
+    fontStyle: FontStyle.italic,
+  ),
+  'name': TextStyle(color: Color(0xff076678)),
+  'quote': TextStyle(color: Color(0xff076678)),
+  'strong': TextStyle(
+    color: Color(0xff076678),
+    fontWeight: FontWeight.bold,
+  ),
+  'title': TextStyle(color: Color(0xff076678)),
+  'variable': TextStyle(color: Color(0xff076678)),
+  'attr': TextStyle(color: Color(0xffb57614)),
+  'params': TextStyle(color: Color(0xffb57614)),
+  'template-tag': TextStyle(color: Color(0xffb57614)),
+  'type': TextStyle(color: Color(0xffb57614)),
+  'builtin-name': TextStyle(color: Color(0xff8f3f71)),
+  'doctag': TextStyle(color: Color(0xff8f3f71)),
+  'literal': TextStyle(color: Color(0xff8f3f71)),
+  'number': TextStyle(color: Color(0xff8f3f71)),
+  'code': TextStyle(color: Color(0xffaf3a03)),
+  'meta': TextStyle(color: Color(0xffaf3a03)),
+  'regexp': TextStyle(color: Color(0xffaf3a03)),
+  'selector-id': TextStyle(color: Color(0xffaf3a03)),
+  'template-variable': TextStyle(color: Color(0xffaf3a03)),
+  'addition': TextStyle(color: Color(0xff79740e)),
+  'meta-string': TextStyle(color: Color(0xff79740e)),
+  'section': TextStyle(
+    color: Color(0xff79740e),
+    fontWeight: FontWeight.bold,
+  ),
+  'selector-attr': TextStyle(color: Color(0xff79740e)),
+  'selector-class': TextStyle(color: Color(0xff79740e)),
+  'string': TextStyle(color: Color(0xff79740e)),
+  'symbol': TextStyle(color: Color(0xff79740e)),
+  'attribute': TextStyle(color: Color(0xff427b58)),
+  'bullet': TextStyle(color: Color(0xff427b58)),
+  'class': TextStyle(color: Color(0xff427b58)),
+  'function': TextStyle(color: Color(0xff427b58)),
+  'meta-keyword': TextStyle(color: Color(0xff427b58)),
+  'selector-pseudo': TextStyle(color: Color(0xff427b58)),
+  'tag': TextStyle(
+    color: Color(0xff427b58),
+    fontWeight: FontWeight.bold,
+  ),
+  'comment': TextStyle(
+    color: Color(0xff928374),
+    fontStyle: FontStyle.italic,
+  ),
+  'link_label': TextStyle(color: Color(0xff8f3f71)),
+};
+
+const darkThemeInCodeBlock = {
+  'root': TextStyle(
+    backgroundColor: Color(0xff000000),
+    color: Color(0xfff8f8f8),
+  ),
+  'comment': TextStyle(
+    color: Color(0xffaeaeae),
+    fontStyle: FontStyle.italic,
+  ),
+  'quote': TextStyle(
+    color: Color(0xffaeaeae),
+    fontStyle: FontStyle.italic,
+  ),
+  'keyword': TextStyle(color: Color(0xffe28964)),
+  'selector-tag': TextStyle(color: Color(0xffe28964)),
+  'type': TextStyle(color: Color(0xffe28964)),
+  'string': TextStyle(color: Color(0xff65b042)),
+  'subst': TextStyle(color: Color(0xffdaefa3)),
+  'regexp': TextStyle(color: Color(0xffe9c062)),
+  'link': TextStyle(color: Color(0xffe9c062)),
+  'title': TextStyle(color: Color(0xff89bdff)),
+  'section': TextStyle(color: Color(0xff89bdff)),
+  'tag': TextStyle(color: Color(0xff89bdff)),
+  'name': TextStyle(color: Color(0xff89bdff)),
+  'symbol': TextStyle(color: Color(0xff3387cc)),
+  'bullet': TextStyle(color: Color(0xff3387cc)),
+  'number': TextStyle(color: Color(0xff3387cc)),
+  'params': TextStyle(color: Color(0xff3e87e3)),
+  'variable': TextStyle(color: Color(0xff3e87e3)),
+  'template-variable': TextStyle(color: Color(0xff3e87e3)),
+  'attribute': TextStyle(color: Color(0xffcda869)),
+  'meta': TextStyle(color: Color(0xff8996a8)),
+  'formula': TextStyle(
+    backgroundColor: Color(0xff0e2231),
+    color: Color(0xfff8f8f8),
+    fontStyle: FontStyle.italic,
+  ),
+  'addition': TextStyle(
+    backgroundColor: Color(0xff253b22),
+    color: Color(0xfff8f8f8),
+  ),
+  'deletion': TextStyle(
+    backgroundColor: Color(0xff420e09),
+    color: Color(0xfff8f8f8),
+  ),
+  'selector-class': TextStyle(color: Color(0xff9b703f)),
+  'selector-id': TextStyle(color: Color(0xff8b98ab)),
+  'emphasis': TextStyle(fontStyle: FontStyle.italic),
+  'strong': TextStyle(fontWeight: FontWeight.bold),
+};