Theme the Trix / ActionText editor in light and dark

Trix ships with ActionText (a Rails built-in), so every ActiveAdmin app can
have a rich-text field. Theme its chrome — toolbar, editor surface, link
dialog, content pre/blockquote — off the --aa-* tokens so it follows the
palette in both modes. Trix bakes its toolbar icons into the base CSS as
black SVGs, so invert them in dark mode to keep them legible.

The app still imports Trix's own base CSS; these rules only restyle it and
are inert when no editor is present. Adds a Rich-text demo page to the dummy
app plus a screenshot task producing img/trix-{light,dark}.png.

Author: Fivell

app/assets/stylesheets/wigu/active_admin_theme.scss

@@ -1959,3 +1959,50 @@ input[type='radio'] {
   html:not([data-theme="light"]) { @include aa-dark-content; }
 }
 html[data-theme="dark"] { @include aa-dark-content; }
+
+// Trix / ActionText editor. Trix ships with ActionText (a Rails built-in), so
+// its chrome is themed here for every consumer; the app still imports Trix's
+// own base CSS (trix/dist/trix). All rules key off the --aa-* tokens, so they
+// follow the active palette in both light and dark, and are inert when no
+// editor is on the page.
+trix-toolbar {
+  .trix-button-group { border-color: var(--aa-border); }
+  .trix-button {
+    background: var(--aa-surface);
+    color: var(--aa-text);
+    border-bottom-color: var(--aa-border);
+    &:not(:first-child) { border-left-color: var(--aa-border); }
+    &:not(:disabled):hover { background: var(--aa-surface-hover); }
+    &.trix-active { background: var(--aa-selected); }
+  }
+}
+
+trix-editor {
+  background: var(--aa-input-bg);
+  border-color: var(--aa-input-border);
+  color: var(--aa-text);
+  &:empty:not(:focus)::before { color: var(--aa-text-muted); } // placeholder
+}
+
+.trix-content {
+  pre { background: var(--aa-surface-2); }
+  blockquote { border-left: 0.3em solid var(--aa-border); }
+}
+
+.trix-dialog {
+  background: var(--aa-surface);
+  color: var(--aa-text);
+  box-shadow: 0 2px 8px var(--aa-shadow);
+  input[type="text"], input[type="url"] {
+    background: var(--aa-input-bg);
+    border-color: var(--aa-input-border);
+    color: var(--aa-text);
+  }
+  .trix-button { background: var(--aa-accent); color: #fff; }
+}
+
+// Trix bakes its toolbar icons into the base CSS as black SVG background images
+// on ::before; invert them in dark mode so they read on the dark toolbar.
+@include aa-dark {
+  trix-toolbar .trix-button--icon::before { filter: invert(1); }
+}

img/trix-dark.png

@@ -0,0 +1,24 @@
+# Demo page with a real Trix (ActionText) editor so the theme's Trix chrome can
+# be seen and screenshotted. The hidden input carries sample formatted HTML that
+# Trix loads on init, exercising the toolbar states and .trix-content styles.
+ActiveAdmin.register_page "Rich text" do
+  menu priority: 2
+
+  SAMPLE_HTML = <<~HTML
+    <h1>Release notes</h1>
+    <div>A <strong>themed</strong> Trix editor with <em>italics</em>, a
+    <a href="https://example.com">link</a> and inline <code>code</code>.</div>
+    <ul><li>First bullet</li><li>Second bullet</li></ul>
+    <blockquote>Quoted text follows the theme border.</blockquote>
+    <pre>$ bundle exec rake</pre>
+  HTML
+
+  content do
+    panel "Trix / ActionText" do
+      value = ERB::Util.html_escape(SAMPLE_HTML)
+      html = %(<input id="trix_demo" type="hidden" value="#{value}">) +
+             %(<trix-editor input="trix_demo" class="trix-content"></trix-editor>)
+      text_node(html.html_safe)
+    end
+  end
+end

img/trix-light.png

@@ -1,3 +1,4 @@
 //= require active_admin/base
+//= require trix
 //= require wigu/server_clock
 //= require wigu/theme_toggle

test/dummy/app/admin/editor.rb

@@ -1,3 +1,4 @@
 @import "active_admin/mixins";
 @import "active_admin/base";
+@import "trix";
 @import "wigu/active_admin_theme";

test/dummy/app/assets/javascripts/active_admin.js

@@ -28,6 +28,14 @@ class Application < Rails::Application
     config.logger = Logger.new($stdout)
     config.log_level = :warn
 
+    # action_text-trix ships trix.js / trix.css but doesn't add them to the
+    # Sprockets load path on its own, so `//= require trix` / `@import "trix"`
+    # (in active_admin.js / active_admin.scss) can't find them. Add its asset
+    # dirs so the demo editor page gets Trix's base JS + CSS.
+    trix_root = Gem::Specification.find_by_name("action_text-trix").gem_dir
+    config.assets.paths << File.join(trix_root, "app/assets/javascripts")
+    config.assets.paths << File.join(trix_root, "app/assets/stylesheets")
+
     # Sprockets: compile on the fly, no digests — simplest thing that serves
     # active_admin.css / active_admin.js in dev/test.
     config.assets.compile = true

test/dummy/app/assets/stylesheets/active_admin.scss

@@ -0,0 +1,24 @@
+# Regenerates img/trix-light.png / img/trix-dark.png — the themed Trix editor
+# (toolbar + sample content) in both palettes, for the PR/README. Same dummy app
+# and driver the clock screenshot uses; crops to the editor panel.
+require_relative "capybara_boot"
+require "capybara/dsl"
+
+include Capybara::DSL
+
+def shoot(theme, out)
+  visit "/admin/rich_text"
+  # Trix enhances <trix-editor> into a full toolbar on load; wait for it.
+  find("trix-toolbar .trix-button--icon-bold", wait: 5)
+  page.execute_script(%(document.documentElement.setAttribute('data-theme', '#{theme}')))
+  sleep 0.4
+  page.driver.save_screenshot(out, selector: ".panel")
+  puts "wrote #{out} (#{File.size(out)} bytes)"
+end
+
+page.driver.resize_window_to(page.driver.window_handles.first, 980, 720) rescue nil
+
+shoot("light", File.expand_path("../img/trix-light.png", __dir__))
+shoot("dark",  File.expand_path("../img/trix-dark.png", __dir__))
+
+Capybara.reset_sessions!