Trix field does not support dark mode in Nova 4

[amanpatel]

• Laravel Version: v8.83.7
• Nova Version: 4.0.5
• PHP Version: 8.0.9
• Database Driver & Version: postgres 11
• Operating System and Version: macOS (latest stable)
• Browser type and version: Chrome (latest stable)
• Reproduction Repository: https://github.com/###/###

Description:

Great work on the Nova 4 release! :-)

Nova 4 introduces the awesome dark mode. However we just found that the Trix editor does not display in the best way possible for darkmode. See screenshot.

Detailed steps to reproduce the issue on a fresh Nova installation:

Add any Trix field to a nova 4 installation with dark mode enabled.

Possible solution

Since Trix ships with background-image css svg icons. Its not possible to modify the color easily. However a possible "acceptable" solution could be to just let the tool bar not be in darkmode:

.trix-toolbar .trix-button {
  background: #ddd !important; /* force the background to be a light color since Trix icons do not support dark mode */
}

The text box itself looks different but definitely acceptable in my opinion. Bonus if it would look the same as the rest of nova <textarea> styling.

[davidhemphill]

Trix doesn't currently support dark mode: basecamp/trix#947

We will update the field once it does.

[mrleblanc101]

Just wondering, why is this a conversation and not an open issue ?
Trix hasn't been updated in almost 2 years. And there hasn't been any commit in almost a year.

[stanislav-cervenak]

If someone wanted at least such an adjustment so that it could be viewed

html.dark {
    .trix-button-row {
        .trix-button-group {
            border-color: #0f172a;

            .trix-button {
                background-color: #94a3b8;
                border-color: #0f172a;

                &.trix-active {
                    background-color: lighten(#94a3b8, 10%);
                }
            }
        }
    }

    .trix-content {
        background-color: #0f172a;
        border-color: #344155;
    }
}

[sydney1]

You can also use the invert filter for the icons (assuming you don't need to support IE). Here's what I did for Bootstrap 5 with light & dark mode;

.trix-button-row {
    .trix-button-group {
        border: var(--bs-border-width) solid var(--bs-border-color);

        .trix-button {
            border: 0;
        }
    }
}

[data-bs-theme=dark] {
    .trix-button-row {
        .trix-button-group {
            .trix-button {
                background-color: transparent;
                filter: invert(100%);
            }
        }
    }
}

Can put background-color on .trix-button-group if you want buttons to have one that avoids the filter

[hawk-xc]

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script> <script type='text/javascript'> $(document).ready(function() { $('span.trix-button-group').addClass('dark:bg-slate-200') }) </script>