Support darkmode - button icons should turn white

[ytbryan]

Describe the bug or issue here…

While following the rails 7 screencast by dhh, realized trix does not support dark mode yet

Steps to Reproduce

1. Enable dark mode at MacOS system level
2. Use simplecss.org cdn at application.html.erb
3. Trix buttons icon did not switch to white color to support dark mode. See below

Details

• Trix version: 1.3.1
• Browser name and version: Safari 15 (16612.1.29.41.4, 16612)
• Operating system: MacOS 11.6 (20G165)

[parisk]

Second that.

We are working on django-prose, a library bringing functionality similar to Action Text to Django. The admin interface of Django provides dark mode by default, which makes Trix interface almost illegible.

We can contribute a Pull Request providing this functionality to the core. Is there a style guide we can follow, in order to avoid contributing invalid work?

Thanks a lot.

Screenshot

[yesthatjwz]

Changing the Trix colors is a lot of work, because they're all over the place, and changing the foreground color of the icons is particularly hard. I did manage it, though: my WordPress plugin that integrates Trix has both "dark mode" and "green mode" (which you can see it in action on my blog).

[goulvench]

Indeed, changing icon color is difficult because they are hard-coded in CSS background images as inline SVGs, which CSS cannot easily override (except by defining a different background image).

As a first step, replacing the transparent button background with white helps preserve readability. Just add this to your site stylesheet:

trix-toolbar .trix-button {
  background: #fff !important;
}

[gcaraciolo]

Indeed, changing icon color is difficult because they are hard-coded in CSS background images as inline SVGs, which CSS cannot easily override (except by defining a different background image).

As a first step, replacing the transparent button background with white helps preserve readability. Just add this to your site stylesheet:

trix-toolbar .trix-button {
  background: #fff !important;
}

You can also change the background for active elements.

<style lang="scss">
trix-toolbar .trix-button {
    background: #fff !important;
    &.trix-active {
        background: #d1d9e9 !important;
    }
}
</style>

[kevin-coyle]

I had a slightly different solution. Instead I opted for a CSS filter. Here's my results:

@media (prefers-color-scheme: dark) {
    trix-toolbar .trix-button {
        filter: invert();
    }

    trix-editor {
        color: white;
    }

    trix-toolbar .trix-button:disabled {
        filter: invert() grayscale(1) brightness(2);
    }
    trix-toolbar .trix-button--icon::before {
        opacity: 1;
    }
    trix-toolbar .trix-button--icon:disabled::before {
        opacity: 0.5;
    }
}

[horizoncarlo]

@kevin-coyle Nice solution - simple and elegant and something I'll use in my app. Thanks!

I did notice the Link dialog also needs a color tweak, such as:

.trix-dialog .trix-button-group {
  filter: invert();
}
.trix-input--dialog,
.trix-button--dialog {
  color: black;
}

Still wish something like that would get rolled natively into Trix, especially now that it's being updated again.