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

4 years ago · 85df4033d8
parent 0d83169c07
commit 85df4033d8
19 changed files with 259 additions and 60 deletions
--- a/lib/flutter_quill.dart
+++ b/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';
--- a/lib/src/models/themes/quill_dialog_theme.dart
+++ b/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;
+}
--- a/lib/src/models/themes/quill_icon_theme.dart
+++ b/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;
+}
--- a/lib/src/widgets/editor.dart
+++ b/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,
-        scrollController: ScrollController(),
-        scrollable: true,
-        focusNode: FocusNode(),
-        autoFocus: true,
-        readOnly: readOnly,
-        expands: false,
-        padding: EdgeInsets.zero);
+      controller: controller,
+      scrollController: ScrollController(),
+      scrollable: true,
+      focusNode: FocusNode(),
+      autoFocus: true,
+      readOnly: readOnly,
+      expands: false,
+      padding: EdgeInsets.zero,
+      keyboardAppearance: keyboardAppearance ?? Brightness.light,
+    );
  }

  final QuillController controller;
--- a/lib/src/widgets/link_dialog.dart
+++ b/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,
+          ),
        ),
      ],
    );
--- a/lib/src/widgets/toolbar.dart
+++ b/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,
-              iconSize: toolbarIconSize,
-              controller: controller,
-              onImagePickCallback: onImagePickCallback,
-              onVideoPickCallback: onVideoPickCallback,
-              filePickImpl: filePickImpl,
-              webImagePickImpl: webImagePickImpl,
-              webVideoPickImpl: webVideoPickImpl),
+            icon: Icons.photo_camera,
+            iconSize: toolbarIconSize,
+            controller: controller,
+            onImagePickCallback: onImagePickCallback,
+            onVideoPickCallback: onVideoPickCallback,
+            filePickImpl: filePickImpl,
+            webImagePickImpl: webImagePickImpl,
+            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,
          ),
      ],
    );
--- a/lib/src/widgets/toolbar/camera_button.dart
+++ b/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,
--- a/lib/src/widgets/toolbar/clear_format_button.dart
+++ b/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 fillColor = theme.canvasColor;
+    final iconColor =
+        widget.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color;
+    final fillColor =
+        widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor;
    return QuillIconButton(
        highlightElevation: 0,
        hoverElevation: 0,
--- a/lib/src/widgets/toolbar/color_button.dart
+++ b/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,
--- a/lib/src/widgets/toolbar/history_button.dart
+++ b/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
-            : theme.disabledColor;
+            ? widget.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color
+            : widget.iconTheme?.disabledIconColor ?? theme.disabledColor;
      });
    } else {
      setState(() {
        _iconColor = widget.controller.hasRedo
-            ? theme.iconTheme.color
-            : theme.disabledColor;
+            ? widget.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color
+            : widget.iconTheme?.disabledIconColor ?? theme.disabledColor;
      });
    }
  }
--- a/lib/src/widgets/toolbar/image_button.dart
+++ b/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);
  }

--- a/lib/src/widgets/toolbar/indent_button.dart
+++ b/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()
--- a/lib/src/widgets/toolbar/insert_embed_button.dart
+++ b/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;
--- a/lib/src/widgets/toolbar/link_style_button.dart
+++ b/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);
  }
--- a/lib/src/widgets/toolbar/select_alignment_button.dart
+++ b/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
-                  : theme.canvasColor,
+                  ? (widget.iconTheme?.iconSelectedFillColor ??
+                      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
-                    : theme.iconTheme.color,
+                    ? (widget.iconTheme?.iconSelectedColor ??
+                        theme.primaryIconTheme.color)
+                    : (widget.iconTheme?.iconUnselectedColor ??
+                        theme.iconTheme.color),
              ),
            ),
          ),
--- a/lib/src/widgets/toolbar/select_header_style_button.dart
+++ b/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
-                  : theme.canvasColor,
+                  ? (widget.iconTheme?.iconSelectedFillColor ??
+                      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
-                      : theme.iconTheme.color,
+                      ? (widget.iconTheme?.iconSelectedColor ??
+                          theme.primaryIconTheme.color)
+                      : (widget.iconTheme?.iconUnselectedColor ??
+                          theme.iconTheme.color),
                ),
              ),
            ),
--- a/lib/src/widgets/toolbar/toggle_check_list_button.dart
+++ b/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,
    );
  }

--- a/lib/src/widgets/toolbar/toggle_style_button.dart
+++ b/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
-          : theme.iconTheme.color
-      : theme.disabledColor;
-  final fill = isToggled == true
-      ? theme.toggleableActiveColor
-      : fillColor ?? theme.canvasColor;
+          ? (iconTheme?.iconSelectedColor ??
+              theme
+                  .primaryIconTheme.color) //You can specify your own icon color
+          : (iconTheme?.iconUnselectedColor ?? theme.iconTheme.color)
+      : (iconTheme?.disabledIconColor ?? theme.disabledColor);
+  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,
--- a/lib/src/widgets/toolbar/video_button.dart
+++ b/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);
  }