Code block highlighting adapts to the system's light and dark modes

fleather-editor · Oct 6, 2024 · 35808a5 · 35808a5
1 parent dabf2a4
commit 35808a5
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 4 deletions.
diff --git a/packages/fleather/lib/src/widgets/code_color.dart b/packages/fleather/lib/src/widgets/code_color.dart
@@ -7,16 +7,16 @@ class CodeColor {
   static const _rootKey = 'root';
   static const _defaultFontColor = Color(0xff000000);
 
-  TextSpan textSpan(String source) {
-    var theme = githubTheme;
+  TextSpan textSpan(String source, bool isDark) {
+    var theme = isDark ? vs2015Theme : githubTheme;
     var textStyle = TextStyle(
       color: theme[_rootKey]?.color ?? _defaultFontColor,
     );
 
     return TextSpan(
       style: textStyle,
       children:
-          _convert(highlight.parse(source, language: 'dart').nodes!, theme),
+          _convert(highlight.parse(source, language: 'java').nodes!, theme),
     );
   }
 
@@ -54,6 +54,51 @@ class CodeColor {
   }
 }
 
+const vs2015Theme = {
+  'root':
+      TextStyle(backgroundColor: Color(0xff1E1E1E), color: Color(0xffDCDCDC)),
+  'keyword': TextStyle(color: Color(0xff569CD6)),
+  'literal': TextStyle(color: Color(0xff569CD6)),
+  'symbol': TextStyle(color: Color(0xff569CD6)),
+  'name': TextStyle(color: Color(0xff569CD6)),
+  'link': TextStyle(color: Color(0xff569CD6)),
+  'built_in': TextStyle(color: Color(0xff4EC9B0)),
+  'type': TextStyle(color: Color(0xff4EC9B0)),
+  'number': TextStyle(color: Color(0xffB8D7A3)),
+  'class': TextStyle(color: Color(0xffB8D7A3)),
+  'string': TextStyle(color: Color(0xffD69D85)),
+  'meta-string': TextStyle(color: Color(0xffD69D85)),
+  'regexp': TextStyle(color: Color(0xff9A5334)),
+  'template-tag': TextStyle(color: Color(0xff9A5334)),
+  'subst': TextStyle(color: Color(0xffDCDCDC)),
+  'function': TextStyle(color: Color(0xffDCDCDC)),
+  'title': TextStyle(color: Color(0xffDCDCDC)),
+  'params': TextStyle(color: Color(0xffDCDCDC)),
+  'formula': TextStyle(color: Color(0xffDCDCDC)),
+  'comment': TextStyle(color: Color(0xff57A64A), fontStyle: FontStyle.italic),
+  'quote': TextStyle(color: Color(0xff57A64A), fontStyle: FontStyle.italic),
+  'doctag': TextStyle(color: Color(0xff608B4E)),
+  'meta': TextStyle(color: Color(0xff9B9B9B)),
+  'meta-keyword': TextStyle(color: Color(0xff9B9B9B)),
+  'tag': TextStyle(color: Color(0xff9B9B9B)),
+  'variable': TextStyle(color: Color(0xffBD63C5)),
+  'template-variable': TextStyle(color: Color(0xffBD63C5)),
+  'attr': TextStyle(color: Color(0xff9CDCFE)),
+  'attribute': TextStyle(color: Color(0xff9CDCFE)),
+  'builtin-name': TextStyle(color: Color(0xff9CDCFE)),
+  'section': TextStyle(color: Color(0xffffd700)),
+  'emphasis': TextStyle(fontStyle: FontStyle.italic),
+  'strong': TextStyle(fontWeight: FontWeight.bold),
+  'bullet': TextStyle(color: Color(0xffD7BA7D)),
+  'selector-tag': TextStyle(color: Color(0xffD7BA7D)),
+  'selector-id': TextStyle(color: Color(0xffD7BA7D)),
+  'selector-class': TextStyle(color: Color(0xffD7BA7D)),
+  'selector-attr': TextStyle(color: Color(0xffD7BA7D)),
+  'selector-pseudo': TextStyle(color: Color(0xffD7BA7D)),
+  'addition': TextStyle(backgroundColor: Color(0xff144212)),
+  'deletion': TextStyle(backgroundColor: Color(0xff660000)),
+};
+
 const githubTheme = {
   'root':
       TextStyle(color: Color(0xff333333), backgroundColor: Color(0xfff8f8f8)),

diff --git a/packages/fleather/lib/src/widgets/text_line.dart b/packages/fleather/lib/src/widgets/text_line.dart
@@ -175,10 +175,11 @@ class _TextLineState extends State<TextLine> {
     final isLink = attrs.contains(ParchmentAttribute.link);
     bool isCodeBlock = widget.node.style.get(ParchmentAttribute.block) ==
         ParchmentAttribute.block.code;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
 
     return TextSpan(
       text: isCodeBlock ? null : text.value,
-      children: isCodeBlock ? [CodeColor().textSpan(text.value)] : [],
+      children: isCodeBlock ? [CodeColor().textSpan(text.value, isDark)] : [],
       style: _getInlineTextStyle(attrs, widget.node.style, theme),
       recognizer: isLink && canLaunchLinks ? _getRecognizer(segment) : null,
       mouseCursor: isLink && canLaunchLinks ? SystemMouseCursors.click : null,