@layer components {
  .trix-content {
    color: #111827; /* text-gray-900 */
  }

  @media (prefers-color-scheme: dark) {
    .trix-content {
      color: #ffffff; /* dark:text-white */
    }

    trix-editor {
      color: #ffffff !important;
      background-color: #1f2937 !important; /* dark:bg-gray-800 */
      border-color: #374151 !important; /* dark:ring-gray-700 */
    }

    trix-toolbar .trix-button {
      color: #ffffff !important;
    }

    trix-toolbar .trix-button--icon::before {
      filter: invert(1);
    }

    trix-toolbar .trix-button.trix-active {
      background: #374151 !important;
      color: #ffffff !important;
    }
  }
}