Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: add light and dark theme for codeblock (#3748)

Browse Source 
* feat: add separate themes for codeblock

* feat: light and dark themes in codeblock
This commit is contained in:
Mayur Mahajan 2023-10-24 11:31:34 +05:30 committed by GitHub
parent a84c47dc33
commit 70a2b7d9ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 129 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_component.dart
View File

@ -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),
};

116
frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_themes.dart Normal file
View File

@ -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),
};