custom theme, fontsize
This commit is contained in:
parent
78f47362cc
commit
c574f456a0
5 changed files with 219 additions and 6 deletions
|
|
@ -58,10 +58,14 @@ class _MuzzleVelocityAppState extends State<MuzzleVelocityApp> {
|
|||
title: 'Muzzle Velocity',
|
||||
theme: ThemeData(
|
||||
brightness: Brightness.light,
|
||||
scaffoldBackgroundColor: Color(0xffF6F4F1),
|
||||
appBarTheme: AppBarTheme(backgroundColor: Color(0xffF6F4F1)),
|
||||
textTheme: GoogleFonts.ibmPlexMonoTextTheme(),
|
||||
),
|
||||
darkTheme: ThemeData(
|
||||
brightness: Brightness.dark,
|
||||
scaffoldBackgroundColor: Color(0xFF121212),
|
||||
appBarTheme: AppBarTheme(backgroundColor: Color(0xFF121212)),
|
||||
textTheme: GoogleFonts.ibmPlexMonoTextTheme(),
|
||||
),
|
||||
themeMode: _themeMode,
|
||||
|
|
@ -268,7 +272,7 @@ class _NoteListScreenState extends State<NoteListScreen> {
|
|||
Color tagColor = Colors.white;
|
||||
if (tag.startsWith('#')) tagColor = Colors.pinkAccent;
|
||||
if (tag.startsWith('+')) tagColor = Colors.cyan;
|
||||
if (tag.startsWith('@')) tagColor = Colors.yellow;
|
||||
if (tag.startsWith('@')) tagColor = Colors.orange;
|
||||
|
||||
spans.add(TextSpan(text: tag + ' ', style: TextStyle(color: tagColor, fontWeight: FontWeight.bold)));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_code_editor/flutter_code_editor.dart';
|
||||
import 'package:flutter_highlight/themes/monokai-sublime.dart';
|
||||
import 'package:highlight/languages/markdown.dart';
|
||||
import 'themes/day.dart';
|
||||
import 'themes/night.dart';
|
||||
import 'themes/markdown.dart';
|
||||
import 'dart:io';
|
||||
|
||||
class NoteEditorScreen extends StatefulWidget {
|
||||
final File note;
|
||||
final bool isDarkMode;
|
||||
bool isDarkMode;
|
||||
|
||||
NoteEditorScreen({required this.note, required this.isDarkMode});
|
||||
|
||||
|
|
@ -16,6 +17,14 @@ class NoteEditorScreen extends StatefulWidget {
|
|||
|
||||
class _NoteEditorScreenState extends State<NoteEditorScreen> {
|
||||
late CodeController _controller;
|
||||
double _fontSize = 16.0; // Default font size
|
||||
|
||||
void _updateFontSize(double newSize) {
|
||||
setState(() {
|
||||
_fontSize = newSize;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
|
|
@ -51,19 +60,70 @@ class _NoteEditorScreenState extends State<NoteEditorScreen> {
|
|||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: Text(widget.note.uri.pathSegments.last.replaceAll('.md', '')),
|
||||
actions: [
|
||||
PopupMenuButton<String>(
|
||||
icon: Icon(Icons.more_vert), // Menu button (⋮)
|
||||
onSelected: (String value) {
|
||||
if (value == 'Toggle Theme') {
|
||||
setState(() {
|
||||
widget.isDarkMode = !widget.isDarkMode;
|
||||
});
|
||||
}
|
||||
},
|
||||
itemBuilder: (BuildContext context) => [
|
||||
PopupMenuItem<String>(
|
||||
value: 'Toggle Theme',
|
||||
child: ListTile(
|
||||
leading: Icon(
|
||||
widget.isDarkMode ? Icons.light_mode : Icons.dark_mode,
|
||||
),
|
||||
title: Text(
|
||||
widget.isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode',
|
||||
),
|
||||
),
|
||||
),
|
||||
PopupMenuItem<String>(
|
||||
enabled: false,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('Font Size'),
|
||||
StatefulBuilder(
|
||||
builder: (context, setState) {
|
||||
return Slider(
|
||||
value: _fontSize,
|
||||
min: 12.0,
|
||||
max: 24.0,
|
||||
divisions: 6,
|
||||
label: _fontSize.toString(),
|
||||
onChanged: (newSize) {
|
||||
setState(() {
|
||||
_fontSize = newSize;
|
||||
});
|
||||
_updateFontSize(newSize);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
body: _controller == null
|
||||
? Center(child: CircularProgressIndicator())
|
||||
: Padding(
|
||||
padding: const EdgeInsets.all(16.0),
|
||||
child: CodeTheme(
|
||||
data: CodeThemeData(styles: monokaiSublimeTheme),
|
||||
data: CodeThemeData(styles: widget.isDarkMode ? nightTheme : dayTheme),
|
||||
child: CodeField(
|
||||
gutterStyle: GutterStyle.none,
|
||||
controller: _controller,
|
||||
expands: true,
|
||||
textStyle: TextStyle(
|
||||
fontSize: 14.0,
|
||||
fontSize: _fontSize,
|
||||
),
|
||||
),
|
||||
),
|
||||
|
|
|
|||
41
lib/themes/day.dart
Normal file
41
lib/themes/day.dart
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
// GENERATED CODE - DO NOT MODIFY BY HAND
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/painting.dart';
|
||||
|
||||
const dayTheme = {
|
||||
'root':
|
||||
TextStyle(backgroundColor: Color(0xffF6F4F1), color: Color(0xff333333)),
|
||||
'comment': TextStyle(color: Color(0xff969896)),
|
||||
'meta': TextStyle(color: Color(0xff969896)),
|
||||
'variable': TextStyle(color: Color(0xffdf5000)),
|
||||
'template-variable': TextStyle(color: Color(0xffdf5000)),
|
||||
'strong': TextStyle(color: Color(0xffdf5000)),
|
||||
'emphasis': TextStyle(color: Color(0xffdf5000)),
|
||||
'quote': TextStyle(color: Color(0xffdf5000)),
|
||||
'keyword': TextStyle(color: Color(0xffd73a49)),
|
||||
'selector-tag': TextStyle(color: Color(0xffd73a49)),
|
||||
'type': TextStyle(color: Color(0xffd73a49)),
|
||||
'literal': TextStyle(color: Color(0xff0086b3)),
|
||||
'symbol': TextStyle(color: Color(0xff0086b3)),
|
||||
'bullet': TextStyle(color: Color(0xff0086b3)),
|
||||
'attribute': TextStyle(color: Color(0xff0086b3)),
|
||||
'section': TextStyle(color: Color(0xff63a35c)),
|
||||
'name': TextStyle(color: Color(0xff63a35c)),
|
||||
'tag': TextStyle(color: Color(0xff333333)),
|
||||
'title': TextStyle(color: Color(0xff6f42c1)),
|
||||
'attr': TextStyle(color: Color(0xff6f42c1)),
|
||||
'selector-id': TextStyle(color: Color(0xff6f42c1)),
|
||||
'selector-class': TextStyle(color: Color(0xff6f42c1)),
|
||||
'selector-attr': TextStyle(color: Color(0xff6f42c1)),
|
||||
'selector-pseudo': TextStyle(color: Color(0xff6f42c1)),
|
||||
'addition':
|
||||
TextStyle(color: Color(0xff55a532), backgroundColor: Color(0xffeaffea)),
|
||||
'deletion':
|
||||
TextStyle(color: Color(0xffbd2c00), backgroundColor: Color(0xffffecec)),
|
||||
'number': TextStyle(color: Color(0xff005cc5)),
|
||||
'string': TextStyle(color: Color(0xff032f62)),
|
||||
'tag-hash': TextStyle(color: Colors.pinkAccent, fontStyle: FontStyle.italic, fontWeight: FontWeight.bold),
|
||||
'tag-plus': TextStyle(color: Colors.cyan, fontStyle: FontStyle.italic, fontWeight: FontWeight.bold),
|
||||
'tag-at': TextStyle(color: Colors.orange, fontStyle: FontStyle.italic, fontWeight: FontWeight.bold),
|
||||
};
|
||||
67
lib/themes/markdown.dart
Normal file
67
lib/themes/markdown.dart
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import 'package:highlight/src/mode.dart';
|
||||
import 'package:highlight/src/common_modes.dart';
|
||||
|
||||
final markdown = Mode(refs: {}, aliases: [
|
||||
"md",
|
||||
"mkdown",
|
||||
"mkd"
|
||||
], contains: [
|
||||
Mode(className: "section", variants: [
|
||||
Mode(begin: "^#\\s{1,6}", end: "\$"),
|
||||
Mode(begin: "^.+?\\n[=-]{2,}\$")
|
||||
]),
|
||||
Mode(begin: "<", end: ">", subLanguage: ["xml"], relevance: 0),
|
||||
Mode(className: "bullet", begin: "^\\s*([*+-]|(\\d+\\.))\\s+"),
|
||||
Mode(className: "strong", begin: "[*_]{2}.+?[*_]{2}"),
|
||||
Mode(
|
||||
className: "emphasis",
|
||||
variants: [Mode(begin: "\\*.+?\\*"), Mode(begin: "_.+?_", relevance: 0)]),
|
||||
Mode(className: "quote", begin: "^>\\s+", end: "\$"),
|
||||
Mode(className: "code", variants: [
|
||||
Mode(begin: "^```\\w*\\s*\$", end: "^```[ ]*\$"),
|
||||
Mode(begin: "`.+?`"),
|
||||
Mode(begin: "^( {4}|\\t)", end: "\$", relevance: 0)
|
||||
]),
|
||||
Mode(begin: "^[-\\*]{3,}", end: "\$"),
|
||||
Mode(
|
||||
begin: "\\[.+?\\][\\(\\[].*?[\\)\\]]",
|
||||
returnBegin: true,
|
||||
contains: [
|
||||
Mode(
|
||||
className: "string",
|
||||
begin: "\\[",
|
||||
end: "\\]",
|
||||
excludeBegin: true,
|
||||
returnEnd: true,
|
||||
relevance: 0),
|
||||
Mode(
|
||||
className: "link",
|
||||
begin: "\\]\\(",
|
||||
end: "\\)",
|
||||
excludeBegin: true,
|
||||
excludeEnd: true),
|
||||
Mode(
|
||||
className: "symbol",
|
||||
begin: "\\]\\[",
|
||||
end: "\\]",
|
||||
excludeBegin: true,
|
||||
excludeEnd: true)
|
||||
],
|
||||
relevance: 10),
|
||||
Mode(begin: "^\\[[^\\n]+\\]:", returnBegin: true, contains: [
|
||||
Mode(
|
||||
className: "symbol",
|
||||
begin: "\\[",
|
||||
end: "\\]",
|
||||
excludeBegin: true,
|
||||
excludeEnd: true),
|
||||
Mode(className: "link", begin: ":\\s*", end: "\$", excludeBegin: true)
|
||||
]),
|
||||
|
||||
// Custom Tag Highlighting
|
||||
Mode(className: "tag-hash", begin: "(?<=\\s|^)#[a-zA-Z0-9_]+", relevance: 10), // Magenta
|
||||
Mode(className: "tag-plus", begin: "(?<=\\s|^)\\+[a-zA-Z0-9_]+", relevance: 10), // Cyan
|
||||
Mode(className: "tag-at", begin: "(?<=\\s|^)@[a-zA-Z0-9_]+", relevance: 10), // Yellow
|
||||
|
||||
|
||||
]);
|
||||
41
lib/themes/night.dart
Normal file
41
lib/themes/night.dart
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
// GENERATED CODE - DO NOT MODIFY BY HAND
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/painting.dart';
|
||||
|
||||
const nightTheme = {
|
||||
'comment': TextStyle(color: Color(0xff969896)),
|
||||
'quote': TextStyle(color: Color(0xff969896)),
|
||||
'variable': TextStyle(color: Color(0xffcc6666)),
|
||||
'template-variable': TextStyle(color: Color(0xffcc6666)),
|
||||
'tag': TextStyle(color: Color(0xffcc6666)),
|
||||
'name': TextStyle(color: Color(0xffcc6666)),
|
||||
'selector-id': TextStyle(color: Color(0xffcc6666)),
|
||||
'selector-class': TextStyle(color: Color(0xffcc6666)),
|
||||
'regexp': TextStyle(color: Color(0xffcc6666)),
|
||||
'deletion': TextStyle(color: Color(0xffcc6666)),
|
||||
'number': TextStyle(color: Color(0xffde935f)),
|
||||
'built_in': TextStyle(color: Color(0xffde935f)),
|
||||
'builtin-name': TextStyle(color: Color(0xffde935f)),
|
||||
'literal': TextStyle(color: Color(0xffde935f)),
|
||||
'type': TextStyle(color: Color(0xffde935f)),
|
||||
'params': TextStyle(color: Color(0xffde935f)),
|
||||
'meta': TextStyle(color: Color(0xffde935f)),
|
||||
'link': TextStyle(color: Color(0xffde935f)),
|
||||
'attribute': TextStyle(color: Color(0xfff0c674)),
|
||||
'string': TextStyle(color: Color(0xffb5bd68)),
|
||||
'symbol': TextStyle(color: Color(0xffb5bd68)),
|
||||
'bullet': TextStyle(color: Color(0xffb5bd68)),
|
||||
'addition': TextStyle(color: Color(0xffb5bd68)),
|
||||
'title': TextStyle(color: Color(0xff81a2be)),
|
||||
'section': TextStyle(color: Color(0xff81a2be)),
|
||||
'keyword': TextStyle(color: Color(0xffb294bb)),
|
||||
'selector-tag': TextStyle(color: Color(0xffb294bb)),
|
||||
'root':
|
||||
TextStyle(backgroundColor: Color(0xFF121212), color: Color(0xffc5c8c6)),
|
||||
'emphasis': TextStyle(fontStyle: FontStyle.italic),
|
||||
'strong': TextStyle(fontWeight: FontWeight.bold),
|
||||
'tag-hash': TextStyle(color: Colors.pinkAccent, fontStyle: FontStyle.italic, fontWeight: FontWeight.bold),
|
||||
'tag-plus': TextStyle(color: Colors.cyan, fontStyle: FontStyle.italic, fontWeight: FontWeight.bold),
|
||||
'tag-at': TextStyle(color: Colors.orange, fontStyle: FontStyle.italic, fontWeight: FontWeight.bold),
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue