Canvas Instructure textboxes illegible with Dark Reader #16126

Activity

1. FaultyJuggler

   added

   Broken Website

   on Oct 22, 2026
2. Myshor commented on Oct 23, 2026

   

   Myshor

   on Oct 23, 2026

   Collaborator

   More actions

   Hello @FaultyJuggler

   The provided URL (ncat.instructure.com) requires institutional Microsoft SSO credentials, which prevents maintainers from directly accessing and verifying the environment.

   Regarding the proposed CSS:

   • Hardcoded hex values (#1e2022, #e8e6e3, #a8a095) cannot be accepted into the codebase as they break dynamic theme adjustments (brightness, contrast, sepia).
   • Custom placeholder color definitions are redundant because Dark Reader already handles placeholder styling globally via opacity: 0.5 !important; in the * section when dynamic variables are used.

   Here is a revised version utilizing Dark Reader dynamic variables:

   instructure.com
   *.instructure.com
   
   CSS
   input,
   textarea,
   select,
   [contenteditable="true"],
   [class*="-textArea"],
   [class*="-textInput"],
   body#tinymce {
       background-color: var(--darkreader-neutral-background) !important;
       color: var(--darkreader-neutral-text) !important;
       caret-color: var(--darkreader-neutral-text) !important;
       -webkit-text-fill-color: var(--darkreader-neutral-text) !important;
   }
   
   span[class*="__outline"],
   span[class*="-outline"] {
       background-color: transparent !important;
   }

   Applying this snippet locally in the Dark Reader Developer Tools and verifying whether the textboxes and placeholders render legibly without contrast issues is the recommended next step. Providing before/after screenshots confirming proper behavior will enable proceeding with merging this fix into the repository.