p:textEditor and dark/dim mode?

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
User avatar
bjorntj
Posts: 277
Joined: 30 Jul 2010, 10:46

08 Sep 2020, 14:16

The TextEditor needs support for dark/dim mode in the new Prime One themes..


Regards,

BTJ
PrimeFaces 11.x | PrimeVue 3.x | Spring Boot 2.7.x | Undertow | Mojarra 2.3.x
Mac OS, Firefox and Chromium

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

12 Sep 2020, 15:27

Hi,

As you know, TextEditor component uses Quill API. This API has some theme options. It would not be right for us to interfere with its Theme styles;
https://primefaces.github.io/primefaces ... texteditor
https://quilljs.com/guides/how-to-customize-quill/

But, Maybe you can use the following scss with its default options;

Code: Select all

/* Add your customizations of the theme styles here */
.ui-texteditor {
    .ui-editor-toolbar {
        &.ql-toolbar {
            border: $panelHeaderBorder;
            background: $panelHeaderBg;
            color: $panelHeaderTextColor;
            padding: $panelHeaderPadding;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            @include border-radius-top($borderRadius);

            .ql-picker.ql-font .ql-picker-label::before,
            .ql-picker.ql-font .ql-picker-item::before,
            .ql-picker.ql-size .ql-picker-label::before,
            .ql-picker.ql-size .ql-picker-item::before {
                color: $panelHeaderTextColor;
            }

            .ql-stroke,
            .ql-fill,
            .ql-stroke.ql-fill {
                stroke: $panelHeaderTextColor;
            }

            & + .ql-container {
                border-top: 0 none !important;
            }
        }
    }

    .ql-container {
        border: $panelContentBorder !important;
        background: $panelContentBg;
        color: $panelContentTextColor;
        padding: $panelContentPadding;
        border-top: 0 none;
        @include border-radius-bottom($borderRadius);
    }
}
Note: You can add the above code into src/main/webapp/resources/sass/overrides/_theme_styles.scss. Then, please provide new theme css files using Sass command.

Best Regards,

Post Reply

Return to “Diamond - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests