Added theming options for toolbar icons and LinkDialog() (#418)

lib/flutter_quill.dart

@@ -5,6 +5,8 @@ export 'src/models/documents/document.dart';
 export 'src/models/documents/nodes/embed.dart';
 export 'src/models/documents/nodes/leaf.dart';
 export 'src/models/quill_delta.dart';
+export 'src/models/themes/quill_dialog_theme.dart';
+export 'src/models/themes/quill_icon_theme.dart';
 export 'src/widgets/controller.dart';
 export 'src/widgets/default_styles.dart';
 export 'src/widgets/editor.dart';

lib/src/models/themes/quill_dialog_theme.dart

@@ -0,0 +1,15 @@
+import 'package:flutter/material.dart';
+
+class QuillDialogTheme {
+  QuillDialogTheme(
+      {this.labelTextStyle, this.inputTextStyle, this.dialogBackgroundColor});
+
+  ///The text style to use for the label shown in the link-input dialog
+  final TextStyle? labelTextStyle;
+
+  ///The text style to use for the input text shown in the link-input dialog
+  final TextStyle? inputTextStyle;
+
+  ///The background color for the [LinkDialog()]
+  final Color? dialogBackgroundColor;
+}

lib/src/models/themes/quill_icon_theme.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+
+class QuillIconTheme {
+  const QuillIconTheme({
+    this.iconSelectedColor,
+    this.iconUnselectedColor,
+    this.iconSelectedFillColor,
+    this.iconUnselectedFillColor,
+    this.disabledIconColor,
+    this.disabledIconFillColor,
+  });
+
+  ///The color to use for selected icons in the toolbar
+  final Color? iconSelectedColor;
+
+  ///The color to use for unselected icons in the toolbar
+  final Color? iconUnselectedColor;
+
+  ///The fill color to use for the selected icons in the toolbar
+  final Color? iconSelectedFillColor;
+
+  ///The fill color to use for the unselected icons in the toolbar
+  final Color? iconUnselectedFillColor;
+
+  ///The color to use for disabled icons in the toolbar
+  final Color? disabledIconColor;
+
+  ///The fill color to use for disabled icons in the toolbar
+  final Color? disabledIconFillColor;
+}

lib/src/widgets/editor.dart

@@ -258,16 +258,19 @@ class QuillEditor extends StatefulWidget {
   factory QuillEditor.basic({
     required QuillController controller,
     required bool readOnly,
+    Brightness? keyboardAppearance,
   }) {
     return QuillEditor(
-        controller: controller,
+      controller: controller,
-        scrollController: ScrollController(),
+      scrollController: ScrollController(),
-        scrollable: true,
+      scrollable: true,
-        focusNode: FocusNode(),
+      focusNode: FocusNode(),
-        autoFocus: true,
+      autoFocus: true,
-        readOnly: readOnly,
+      readOnly: readOnly,
-        expands: false,
+      expands: false,
-        padding: EdgeInsets.zero);
+      padding: EdgeInsets.zero,
+      keyboardAppearance: keyboardAppearance ?? Brightness.light,
+    );
   }
 
   final QuillController controller;

lib/src/widgets/link_dialog.dart

@@ -1,7 +1,10 @@
 import 'package:flutter/material.dart';
+import '../models/themes/quill_dialog_theme.dart';
 
 class LinkDialog extends StatefulWidget {
-  const LinkDialog({Key? key}) : super(key: key);
+  const LinkDialog({this.dialogTheme, Key? key}) : super(key: key);
+
+  final QuillDialogTheme? dialogTheme;
 
   @override
   LinkDialogState createState() => LinkDialogState();
@@ -13,15 +16,23 @@ class LinkDialogState extends State<LinkDialog> {
   @override
   Widget build(BuildContext context) {
     return AlertDialog(
+      backgroundColor: widget.dialogTheme?.dialogBackgroundColor,
       content: TextField(
-        decoration: const InputDecoration(labelText: 'Paste a link'),
+        style: widget.dialogTheme?.inputTextStyle,
+        decoration: InputDecoration(
+            labelText: 'Paste a link',
+            labelStyle: widget.dialogTheme?.labelTextStyle,
+            floatingLabelStyle: widget.dialogTheme?.labelTextStyle),
         autofocus: true,
         onChanged: _linkChanged,
       ),
       actions: [
         TextButton(
           onPressed: _link.isNotEmpty ? _applyLink : null,
-          child: const Text('Ok'),
+          child: Text(
+            'Ok',
+            style: widget.dialogTheme?.labelTextStyle,
+          ),
         ),
       ],
     );

lib/src/widgets/toolbar.dart

@@ -3,6 +3,8 @@ import 'dart:io';
 import 'package:flutter/material.dart';
 
 import '../models/documents/attribute.dart';
+import '../models/themes/quill_icon_theme.dart';
+import '../models/themes/quill_dialog_theme.dart';
 import '../utils/media_pick_setting.dart';
 import 'controller.dart';
 import 'toolbar/arrow_indicated_button_list.dart';
@@ -95,6 +97,12 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
     FilePickImpl? filePickImpl,
     WebImagePickImpl? webImagePickImpl,
     WebVideoPickImpl? webVideoPickImpl,
+
+    ///The theme to use for the icons in the toolbar, uses type [QuillIconTheme]
+    QuillIconTheme? iconTheme,
+
+    ///The theme to use for the theming of the [LinkDialog()], shown when embedding an image, for example
+    QuillDialogTheme? dialogTheme,
     Key? key,
   }) {
     final isButtonGroupShown = [
@@ -128,6 +136,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             iconSize: toolbarIconSize,
             controller: controller,
             undo: true,
+            iconTheme: iconTheme,
           ),
         if (showHistory)
           HistoryButton(
@@ -135,6 +144,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             iconSize: toolbarIconSize,
             controller: controller,
             undo: false,
+            iconTheme: iconTheme,
           ),
         if (showBoldButton)
           ToggleStyleButton(
@@ -142,6 +152,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             icon: Icons.format_bold,
             iconSize: toolbarIconSize,
             controller: controller,
+            iconTheme: iconTheme,
           ),
         if (showItalicButton)
           ToggleStyleButton(
@@ -149,6 +160,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             icon: Icons.format_italic,
             iconSize: toolbarIconSize,
             controller: controller,
+            iconTheme: iconTheme,
           ),
         if (showSmallButton)
           ToggleStyleButton(
@@ -156,6 +168,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             icon: Icons.format_size,
             iconSize: toolbarIconSize,
             controller: controller,
+            iconTheme: iconTheme,
           ),
         if (showUnderLineButton)
           ToggleStyleButton(
@@ -163,6 +176,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             icon: Icons.format_underline,
             iconSize: toolbarIconSize,
             controller: controller,
+            iconTheme: iconTheme,
           ),
         if (showStrikeThrough)
           ToggleStyleButton(
@@ -170,6 +184,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             icon: Icons.format_strikethrough,
             iconSize: toolbarIconSize,
             controller: controller,
+            iconTheme: iconTheme,
           ),
         if (showInlineCode)
           ToggleStyleButton(
@@ -177,6 +192,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             icon: Icons.code,
             iconSize: toolbarIconSize,
             controller: controller,
+            iconTheme: iconTheme,
           ),
         if (showColorButton)
           ColorButton(
@@ -184,6 +200,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             iconSize: toolbarIconSize,
             controller: controller,
             background: false,
+            iconTheme: iconTheme,
           ),
         if (showBackgroundColorButton)
           ColorButton(
@@ -191,12 +208,14 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             iconSize: toolbarIconSize,
             controller: controller,
             background: true,
+            iconTheme: iconTheme,
           ),
         if (showClearFormat)
           ClearFormatButton(
             icon: Icons.format_clear,
             iconSize: toolbarIconSize,
             controller: controller,
+            iconTheme: iconTheme,
           ),
         if (showImageButton)
           ImageButton(
@@ -207,6 +226,8 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             filePickImpl: filePickImpl,
             webImagePickImpl: webImagePickImpl,
             mediaPickSettingSelector: mediaPickSettingSelector,
+            iconTheme: iconTheme,
+            dialogTheme: dialogTheme,
           ),
         if (showVideoButton)
           VideoButton(
@@ -217,18 +238,22 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             filePickImpl: filePickImpl,
             webVideoPickImpl: webImagePickImpl,
             mediaPickSettingSelector: mediaPickSettingSelector,
+            iconTheme: iconTheme,
+            dialogTheme: dialogTheme,
           ),
         if ((onImagePickCallback != null || onVideoPickCallback != null) &&
             showCameraButton)
           CameraButton(
-              icon: Icons.photo_camera,
+            icon: Icons.photo_camera,
-              iconSize: toolbarIconSize,
+            iconSize: toolbarIconSize,
-              controller: controller,
+            controller: controller,
-              onImagePickCallback: onImagePickCallback,
+            onImagePickCallback: onImagePickCallback,
-              onVideoPickCallback: onVideoPickCallback,
+            onVideoPickCallback: onVideoPickCallback,
-              filePickImpl: filePickImpl,
+            filePickImpl: filePickImpl,
-              webImagePickImpl: webImagePickImpl,
+            webImagePickImpl: webImagePickImpl,
-              webVideoPickImpl: webVideoPickImpl),
+            webVideoPickImpl: webVideoPickImpl,
+            iconTheme: iconTheme,
+          ),
         if (isButtonGroupShown[0] &&
             (isButtonGroupShown[1] ||
                 isButtonGroupShown[2] ||
@@ -259,6 +284,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
           SelectHeaderStyleButton(
             controller: controller,
             iconSize: toolbarIconSize,
+            iconTheme: iconTheme,
           ),
         if (isButtonGroupShown[2] &&
             (isButtonGroupShown[3] ||
@@ -275,6 +301,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             controller: controller,
             icon: Icons.format_list_numbered,
             iconSize: toolbarIconSize,
+            iconTheme: iconTheme,
           ),
         if (showListBullets)
           ToggleStyleButton(
@@ -282,6 +309,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             controller: controller,
             icon: Icons.format_list_bulleted,
             iconSize: toolbarIconSize,
+            iconTheme: iconTheme,
           ),
         if (showListCheck)
           ToggleCheckListButton(
@@ -289,6 +317,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             controller: controller,
             icon: Icons.check_box,
             iconSize: toolbarIconSize,
+            iconTheme: iconTheme,
           ),
         if (showCodeBlock)
           ToggleStyleButton(
@@ -296,6 +325,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             controller: controller,
             icon: Icons.code,
             iconSize: toolbarIconSize,
+            iconTheme: iconTheme,
           ),
         if (isButtonGroupShown[3] &&
             (isButtonGroupShown[4] || isButtonGroupShown[5]))
@@ -310,6 +340,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             controller: controller,
             icon: Icons.format_quote,
             iconSize: toolbarIconSize,
+            iconTheme: iconTheme,
           ),
         if (showIndent)
           IndentButton(
@@ -317,6 +348,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             iconSize: toolbarIconSize,
             controller: controller,
             isIncrease: true,
+            iconTheme: iconTheme,
           ),
         if (showIndent)
           IndentButton(
@@ -324,6 +356,7 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
             iconSize: toolbarIconSize,
             controller: controller,
             isIncrease: false,
+            iconTheme: iconTheme,
           ),
         if (isButtonGroupShown[4] && isButtonGroupShown[5])
           VerticalDivider(
@@ -335,12 +368,15 @@ class QuillToolbar extends StatelessWidget implements PreferredSizeWidget {
           LinkStyleButton(
             controller: controller,
             iconSize: toolbarIconSize,
+            iconTheme: iconTheme,
+            dialogTheme: dialogTheme,
           ),
         if (showHorizontalRule)
           InsertEmbedButton(
             controller: controller,
             icon: Icons.horizontal_rule,
             iconSize: toolbarIconSize,
+            iconTheme: iconTheme,
           ),
       ],
     );

lib/src/widgets/toolbar/camera_button.dart

@@ -4,6 +4,7 @@ import 'package:image_picker/image_picker.dart';
 
 import '../controller.dart';
 import '../toolbar.dart';
+import '../../models/themes/quill_icon_theme.dart';
 import 'image_video_utils.dart';
 import 'quill_icon_button.dart';
 
@@ -18,6 +19,7 @@ class CameraButton extends StatelessWidget {
     this.filePickImpl,
     this.webImagePickImpl,
     this.webVideoPickImpl,
+    this.iconTheme,
     Key? key,
   }) : super(key: key);
 
@@ -38,16 +40,22 @@ class CameraButton extends StatelessWidget {
 
   final FilePickImpl? filePickImpl;
 
+  final QuillIconTheme? iconTheme;
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
 
+    final iconColor = iconTheme?.iconUnselectedColor ?? theme.iconTheme.color;
+    final iconFillColor =
+        iconTheme?.iconUnselectedFillColor ?? (fillColor ?? theme.canvasColor);
+
     return QuillIconButton(
-      icon: Icon(icon, size: iconSize, color: theme.iconTheme.color),
+      icon: Icon(icon, size: iconSize, color: iconColor),
       highlightElevation: 0,
       hoverElevation: 0,
       size: iconSize * 1.77,
-      fillColor: fillColor ?? theme.canvasColor,
+      fillColor: iconFillColor,
       onPressed: () => _handleCameraButtonTap(context, controller,
           onImagePickCallback: onImagePickCallback,
           onVideoPickCallback: onVideoPickCallback,

lib/src/widgets/toolbar/clear_format_button.dart

@@ -8,6 +8,7 @@ class ClearFormatButton extends StatefulWidget {
     required this.icon,
     required this.controller,
     this.iconSize = kDefaultIconSize,
+    this.iconTheme,
     Key? key,
   }) : super(key: key);
 
@@ -16,6 +17,8 @@ class ClearFormatButton extends StatefulWidget {
 
   final QuillController controller;
 
+  final QuillIconTheme? iconTheme;
+
   @override
   _ClearFormatButtonState createState() => _ClearFormatButtonState();
 }
@@ -24,8 +27,10 @@ class _ClearFormatButtonState extends State<ClearFormatButton> {
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
-    final iconColor = theme.iconTheme.color;
+    final iconColor =
-    final fillColor = theme.canvasColor;
+        widget.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color;
+    final fillColor =
+        widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor;
     return QuillIconButton(
         highlightElevation: 0,
         hoverElevation: 0,

lib/src/widgets/toolbar/color_button.dart

@@ -3,6 +3,7 @@ import 'package:flutter_colorpicker/flutter_colorpicker.dart';
 
 import '../../models/documents/attribute.dart';
 import '../../models/documents/style.dart';
+import '../../models/themes/quill_icon_theme.dart';
 import '../../utils/color.dart';
 import '../controller.dart';
 import '../toolbar.dart';
@@ -18,6 +19,7 @@ class ColorButton extends StatefulWidget {
     required this.controller,
     required this.background,
     this.iconSize = kDefaultIconSize,
+    this.iconTheme,
     Key? key,
   }) : super(key: key);
 
@@ -25,6 +27,7 @@ class ColorButton extends StatefulWidget {
   final double iconSize;
   final bool background;
   final QuillController controller;
+  final QuillIconTheme? iconTheme;
 
   @override
   _ColorButtonState createState() => _ColorButtonState();
@@ -98,20 +101,20 @@ class _ColorButtonState extends State<ColorButton> {
     final theme = Theme.of(context);
     final iconColor = _isToggledColor && !widget.background && !_isWhite
         ? stringToColor(_selectionStyle.attributes['color']!.value)
-        : theme.iconTheme.color;
+        : (widget.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color);
 
     final iconColorBackground =
         _isToggledBackground && widget.background && !_isWhitebackground
             ? stringToColor(_selectionStyle.attributes['background']!.value)
-            : theme.iconTheme.color;
+            : (widget.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color);
 
     final fillColor = _isToggledColor && !widget.background && _isWhite
         ? stringToColor('#ffffff')
-        : theme.canvasColor;
+        : (widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor);
     final fillColorBackground =
         _isToggledBackground && widget.background && _isWhitebackground
             ? stringToColor('#ffffff')
-            : theme.canvasColor;
+            : (widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor);
 
     return QuillIconButton(
       highlightElevation: 0,

lib/src/widgets/toolbar/history_button.dart

@@ -9,6 +9,7 @@ class HistoryButton extends StatefulWidget {
     required this.controller,
     required this.undo,
     this.iconSize = kDefaultIconSize,
+    this.iconTheme,
     Key? key,
   }) : super(key: key);
 
@@ -16,6 +17,7 @@ class HistoryButton extends StatefulWidget {
   final double iconSize;
   final bool undo;
   final QuillController controller;
+  final QuillIconTheme? iconTheme;
 
   @override
   _HistoryButtonState createState() => _HistoryButtonState();
@@ -30,7 +32,8 @@ class _HistoryButtonState extends State<HistoryButton> {
     theme = Theme.of(context);
     _setIconColor();
 
-    final fillColor = theme.canvasColor;
+    final fillColor =
+        widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor;
     widget.controller.changes.listen((event) async {
       _setIconColor();
     });
@@ -50,14 +53,14 @@ class _HistoryButtonState extends State<HistoryButton> {
     if (widget.undo) {
       setState(() {
         _iconColor = widget.controller.hasUndo
-            ? theme.iconTheme.color
+            ? widget.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color
-            : theme.disabledColor;
+            : widget.iconTheme?.disabledIconColor ?? theme.disabledColor;
       });
     } else {
       setState(() {
         _iconColor = widget.controller.hasRedo
-            ? theme.iconTheme.color
+            ? widget.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color
-            : theme.disabledColor;
+            : widget.iconTheme?.disabledIconColor ?? theme.disabledColor;
       });
     }
   }

lib/src/widgets/toolbar/image_button.dart

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:image_picker/image_picker.dart';
 
 import '../../models/documents/nodes/embed.dart';
+import '../../models/themes/quill_dialog_theme.dart';
+import '../../models/themes/quill_icon_theme.dart';
 import '../../utils/media_pick_setting.dart';
 import '../controller.dart';
 import '../link_dialog.dart';
@@ -19,6 +21,8 @@ class ImageButton extends StatelessWidget {
     this.filePickImpl,
     this.webImagePickImpl,
     this.mediaPickSettingSelector,
+    this.iconTheme,
+    this.dialogTheme,
     Key? key,
   }) : super(key: key);
 
@@ -37,16 +41,24 @@ class ImageButton extends StatelessWidget {
 
   final MediaPickSettingSelector? mediaPickSettingSelector;
 
+  final QuillIconTheme? iconTheme;
+
+  final QuillDialogTheme? dialogTheme;
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
 
+    final iconColor = iconTheme?.iconUnselectedColor ?? theme.iconTheme.color;
+    final iconFillColor =
+        iconTheme?.iconUnselectedFillColor ?? (fillColor ?? theme.canvasColor);
+
     return QuillIconButton(
-      icon: Icon(icon, size: iconSize, color: theme.iconTheme.color),
+      icon: Icon(icon, size: iconSize, color: iconColor),
       highlightElevation: 0,
       hoverElevation: 0,
       size: iconSize * 1.77,
-      fillColor: fillColor ?? theme.canvasColor,
+      fillColor: iconFillColor,
       onPressed: () => _onPressedHandler(context),
     );
   }
@@ -80,7 +92,7 @@ class ImageButton extends StatelessWidget {
   void _typeLink(BuildContext context) {
     showDialog<String>(
       context: context,
-      builder: (_) => const LinkDialog(),
+      builder: (_) => LinkDialog(dialogTheme: dialogTheme),
     ).then(_linkSubmitted);
   }
 

lib/src/widgets/toolbar/indent_button.dart

@@ -9,6 +9,7 @@ class IndentButton extends StatefulWidget {
     required this.controller,
     required this.isIncrease,
     this.iconSize = kDefaultIconSize,
+    this.iconTheme,
     Key? key,
   }) : super(key: key);
 
@@ -17,6 +18,8 @@ class IndentButton extends StatefulWidget {
   final QuillController controller;
   final bool isIncrease;
 
+  final QuillIconTheme? iconTheme;
+
   @override
   _IndentButtonState createState() => _IndentButtonState();
 }
@@ -25,14 +28,17 @@ class _IndentButtonState extends State<IndentButton> {
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
-    final iconColor = theme.iconTheme.color;
+
-    final fillColor = theme.canvasColor;
+    final iconColor =
+        widget.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color;
+    final iconFillColor =
+        widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor;
     return QuillIconButton(
       highlightElevation: 0,
       hoverElevation: 0,
       size: widget.iconSize * 1.77,
       icon: Icon(widget.icon, size: widget.iconSize, color: iconColor),
-      fillColor: fillColor,
+      fillColor: iconFillColor,
       onPressed: () {
         final indent = widget.controller
             .getSelectionStyle()

lib/src/widgets/toolbar/insert_embed_button.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import '../../models/documents/nodes/embed.dart';
+import '../../models/themes/quill_icon_theme.dart';
 import '../controller.dart';
 import '../toolbar.dart';
 import 'quill_icon_button.dart';
@@ -11,6 +12,7 @@ class InsertEmbedButton extends StatelessWidget {
     required this.icon,
     this.iconSize = kDefaultIconSize,
     this.fillColor,
+    this.iconTheme,
     Key? key,
   }) : super(key: key);
 
@@ -18,9 +20,16 @@ class InsertEmbedButton extends StatelessWidget {
   final IconData icon;
   final double iconSize;
   final Color? fillColor;
+  final QuillIconTheme? iconTheme;
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    final iconColor = iconTheme?.iconUnselectedColor ?? theme.iconTheme.color;
+    final iconFillColor =
+        iconTheme?.iconUnselectedFillColor ?? (fillColor ?? theme.canvasColor);
+
     return QuillIconButton(
       highlightElevation: 0,
       hoverElevation: 0,
@@ -28,9 +37,9 @@ class InsertEmbedButton extends StatelessWidget {
       icon: Icon(
         icon,
         size: iconSize,
-        color: Theme.of(context).iconTheme.color,
+        color: iconColor,
       ),
-      fillColor: fillColor ?? Theme.of(context).canvasColor,
+      fillColor: iconFillColor,
       onPressed: () {
         final index = controller.selection.baseOffset;
         final length = controller.selection.extentOffset - index;

lib/src/widgets/toolbar/link_style_button.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 
 import '../../models/documents/attribute.dart';
+import '../../models/themes/quill_dialog_theme.dart';
+import '../../models/themes/quill_icon_theme.dart';
 import '../controller.dart';
 import '../link_dialog.dart';
 import '../toolbar.dart';
@@ -11,12 +13,16 @@ class LinkStyleButton extends StatefulWidget {
     required this.controller,
     this.iconSize = kDefaultIconSize,
     this.icon,
+    this.iconTheme,
+    this.dialogTheme,
     Key? key,
   }) : super(key: key);
 
   final QuillController controller;
   final IconData? icon;
   final double iconSize;
+  final QuillIconTheme? iconTheme;
+  final QuillDialogTheme? dialogTheme;
 
   @override
   _LinkStyleButtonState createState() => _LinkStyleButtonState();
@@ -60,9 +66,11 @@ class _LinkStyleButtonState extends State<LinkStyleButton> {
       icon: Icon(
         widget.icon ?? Icons.link,
         size: widget.iconSize,
-        color: isEnabled ? theme.iconTheme.color : theme.disabledColor,
+        color: isEnabled
+            ? (widget.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color)
+            : (widget.iconTheme?.disabledIconColor ?? theme.disabledColor),
       ),
-      fillColor: Theme.of(context).canvasColor,
+      fillColor: widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor,
       onPressed: pressedHandler,
     );
   }
@@ -71,7 +79,7 @@ class _LinkStyleButtonState extends State<LinkStyleButton> {
     showDialog<String>(
       context: context,
       builder: (ctx) {
-        return const LinkDialog();
+        return LinkDialog(dialogTheme: widget.dialogTheme);
       },
     ).then(_linkSubmitted);
   }

lib/src/widgets/toolbar/select_alignment_button.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 
 import '../../models/documents/attribute.dart';
 import '../../models/documents/style.dart';
+import '../../models/themes/quill_icon_theme.dart';
 import '../controller.dart';
 import '../toolbar.dart';
 
@@ -10,12 +11,15 @@ class SelectAlignmentButton extends StatefulWidget {
   const SelectAlignmentButton({
     required this.controller,
     this.iconSize = kDefaultIconSize,
+    this.iconTheme,
     Key? key,
   }) : super(key: key);
 
   final QuillController controller;
   final double iconSize;
 
+  final QuillIconTheme? iconTheme;
+
   @override
   _SelectAlignmentButtonState createState() => _SelectAlignmentButtonState();
 }
@@ -77,8 +81,10 @@ class _SelectAlignmentButtonState extends State<SelectAlignmentButton> {
               shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(2)),
               fillColor: _valueToText[_value] == _valueString[index]
-                  ? theme.toggleableActiveColor
+                  ? (widget.iconTheme?.iconSelectedFillColor ??
-                  : theme.canvasColor,
+                      theme.toggleableActiveColor)
+                  : (widget.iconTheme?.iconUnselectedFillColor ??
+                      theme.canvasColor),
               onPressed: () => _valueAttribute[index] == Attribute.leftAlignment
                   ? widget.controller
                       .formatSelection(Attribute.clone(Attribute.align, null))
@@ -93,8 +99,10 @@ class _SelectAlignmentButtonState extends State<SelectAlignmentButton> {
                             : Icons.format_align_justify,
                 size: widget.iconSize,
                 color: _valueToText[_value] == _valueString[index]
-                    ? theme.primaryIconTheme.color
+                    ? (widget.iconTheme?.iconSelectedColor ??
-                    : theme.iconTheme.color,
+                        theme.primaryIconTheme.color)
+                    : (widget.iconTheme?.iconUnselectedColor ??
+                        theme.iconTheme.color),
               ),
             ),
           ),

lib/src/widgets/toolbar/select_header_style_button.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 
 import '../../models/documents/attribute.dart';
 import '../../models/documents/style.dart';
+import '../../models/themes/quill_icon_theme.dart';
 import '../controller.dart';
 import '../toolbar.dart';
 
@@ -10,12 +11,15 @@ class SelectHeaderStyleButton extends StatefulWidget {
   const SelectHeaderStyleButton({
     required this.controller,
     this.iconSize = kDefaultIconSize,
+    this.iconTheme,
     Key? key,
   }) : super(key: key);
 
   final QuillController controller;
   final double iconSize;
 
+  final QuillIconTheme? iconTheme;
+
   @override
   _SelectHeaderStyleButtonState createState() =>
       _SelectHeaderStyleButtonState();
@@ -77,16 +81,20 @@ class _SelectHeaderStyleButtonState extends State<SelectHeaderStyleButton> {
               shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(2)),
               fillColor: _valueToText[_value] == _valueString[index]
-                  ? theme.toggleableActiveColor
+                  ? (widget.iconTheme?.iconSelectedFillColor ??
-                  : theme.canvasColor,
+                      theme.toggleableActiveColor)
+                  : (widget.iconTheme?.iconUnselectedFillColor ??
+                      theme.canvasColor),
               onPressed: () =>
                   widget.controller.formatSelection(_valueAttribute[index]),
               child: Text(
                 _valueString[index],
                 style: style.copyWith(
                   color: _valueToText[_value] == _valueString[index]
-                      ? theme.primaryIconTheme.color
+                      ? (widget.iconTheme?.iconSelectedColor ??
-                      : theme.iconTheme.color,
+                          theme.primaryIconTheme.color)
+                      : (widget.iconTheme?.iconUnselectedColor ??
+                          theme.iconTheme.color),
                 ),
               ),
             ),

lib/src/widgets/toolbar/toggle_check_list_button.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 
 import '../../models/documents/attribute.dart';
 import '../../models/documents/style.dart';
+import '../../models/themes/quill_icon_theme.dart';
 import '../controller.dart';
 import '../toolbar.dart';
 import 'toggle_style_button.dart';
@@ -14,6 +15,7 @@ class ToggleCheckListButton extends StatefulWidget {
     this.iconSize = kDefaultIconSize,
     this.fillColor,
     this.childBuilder = defaultToggleStyleButtonBuilder,
+    this.iconTheme,
     Key? key,
   }) : super(key: key);
 
@@ -28,6 +30,8 @@ class ToggleCheckListButton extends StatefulWidget {
 
   final Attribute attribute;
 
+  final QuillIconTheme? iconTheme;
+
   @override
   _ToggleCheckListButtonState createState() => _ToggleCheckListButtonState();
 }
@@ -89,6 +93,7 @@ class _ToggleCheckListButtonState extends State<ToggleCheckListButton> {
       _isToggled,
       _toggleAttribute,
       widget.iconSize,
+      widget.iconTheme,
     );
   }
 

lib/src/widgets/toolbar/toggle_style_button.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 
 import '../../models/documents/attribute.dart';
 import '../../models/documents/style.dart';
+import '../../models/themes/quill_icon_theme.dart';
 import '../controller.dart';
 import '../toolbar.dart';
 import 'quill_icon_button.dart';
@@ -14,6 +15,7 @@ typedef ToggleStyleButtonBuilder = Widget Function(
   bool? isToggled,
   VoidCallback? onPressed, [
   double iconSize,
+  QuillIconTheme? iconTheme,
 ]);
 
 class ToggleStyleButton extends StatefulWidget {
@@ -24,6 +26,7 @@ class ToggleStyleButton extends StatefulWidget {
     this.iconSize = kDefaultIconSize,
     this.fillColor,
     this.childBuilder = defaultToggleStyleButtonBuilder,
+    this.iconTheme,
     Key? key,
   }) : super(key: key);
 
@@ -38,6 +41,9 @@ class ToggleStyleButton extends StatefulWidget {
 
   final ToggleStyleButtonBuilder childBuilder;
 
+  ///Specify an icon theme for the icons in the toolbar
+  final QuillIconTheme? iconTheme;
+
   @override
   _ToggleStyleButtonState createState() => _ToggleStyleButtonState();
 }
@@ -64,6 +70,7 @@ class _ToggleStyleButtonState extends State<ToggleStyleButton> {
       _isToggled,
       _toggleAttribute,
       widget.iconSize,
+      widget.iconTheme,
     );
   }
 
@@ -113,17 +120,25 @@ Widget defaultToggleStyleButtonBuilder(
   bool? isToggled,
   VoidCallback? onPressed, [
   double iconSize = kDefaultIconSize,
+  QuillIconTheme? iconTheme,
 ]) {
   final theme = Theme.of(context);
   final isEnabled = onPressed != null;
   final iconColor = isEnabled
       ? isToggled == true
-          ? theme.primaryIconTheme.color
+          ? (iconTheme?.iconSelectedColor ??
-          : theme.iconTheme.color
+              theme
-      : theme.disabledColor;
+                  .primaryIconTheme.color) //You can specify your own icon color
-  final fill = isToggled == true
+          : (iconTheme?.iconUnselectedColor ?? theme.iconTheme.color)
-      ? theme.toggleableActiveColor
+      : (iconTheme?.disabledIconColor ?? theme.disabledColor);
-      : fillColor ?? theme.canvasColor;
+  final fill = isEnabled
+      ? isToggled == true
+          ? (iconTheme?.iconSelectedFillColor ??
+              theme.toggleableActiveColor) //Selected icon fill color
+          : (iconTheme?.iconUnselectedFillColor ??
+              theme.canvasColor) //Unselected icon fill color :
+      : (iconTheme?.disabledIconFillColor ??
+          (fillColor ?? theme.canvasColor)); //Disabled icon fill color
   return QuillIconButton(
     highlightElevation: 0,
     hoverElevation: 0,

lib/src/widgets/toolbar/video_button.dart

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:image_picker/image_picker.dart';
 
 import '../../models/documents/nodes/embed.dart';
+import '../../models/themes/quill_dialog_theme.dart';
+import '../../models/themes/quill_icon_theme.dart';
 import '../../utils/media_pick_setting.dart';
 import '../controller.dart';
 import '../link_dialog.dart';
@@ -19,6 +21,8 @@ class VideoButton extends StatelessWidget {
     this.filePickImpl,
     this.webVideoPickImpl,
     this.mediaPickSettingSelector,
+    this.iconTheme,
+    this.dialogTheme,
     Key? key,
   }) : super(key: key);
 
@@ -37,16 +41,24 @@ class VideoButton extends StatelessWidget {
 
   final MediaPickSettingSelector? mediaPickSettingSelector;
 
+  final QuillIconTheme? iconTheme;
+
+  final QuillDialogTheme? dialogTheme;
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
 
+    final iconColor = iconTheme?.iconUnselectedColor ?? theme.iconTheme.color;
+    final iconFillColor =
+        iconTheme?.iconUnselectedFillColor ?? (fillColor ?? theme.canvasColor);
+
     return QuillIconButton(
-      icon: Icon(icon, size: iconSize, color: theme.iconTheme.color),
+      icon: Icon(icon, size: iconSize, color: iconColor),
       highlightElevation: 0,
       hoverElevation: 0,
       size: iconSize * 1.77,
-      fillColor: fillColor ?? theme.canvasColor,
+      fillColor: iconFillColor,
       onPressed: () => _onPressedHandler(context),
     );
   }
@@ -80,7 +92,7 @@ class VideoButton extends StatelessWidget {
   void _typeLink(BuildContext context) {
     showDialog<String>(
       context: context,
-      builder: (_) => const LinkDialog(),
+      builder: (_) => LinkDialog(dialogTheme: dialogTheme),
     ).then(_linkSubmitted);
   }