Contrib.social

Icon color in ckeditor

Open on Drupal.org →
Created on 29 May 2024, 6 months ago
Updated 2 June 2024, 6 months ago

Problem/Motivation

The icon is not visible when added via the ckeditor plugin. The icon is white on white.
My OS is in dark mode, my admin theme is not.

Proposed resolution

It would be nice if the icon uses the color of the text, aka currentcolor.

Currently the icon contains the fill="currentColor" in de svg code itself. This does not work when the svg is used via background-image is css.

Converting to mask-image makes it possible the use the currentcolor in combination with setting a background-color.

JS

In: iconify_field/modules/iconify_field_ckeditor/js/build/IconifyFieldPlugin.js

Change background-image to mask-image on line 208

CSS

In the css file: iconify_field/modules/iconify_field_ckeditor/css/iconify_field_ckeditor.css

Replace:

.ck-editor__main .iconify-field {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  ....

With:

.ck-editor__main .iconify-field {
  background-color: currentcolor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  ....

Extra

If feel setting the vertical-align value to `-0.125em` gives a nicer alignment then the current `middle' value.

🐛 Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

strnbrg

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024