Search code examples
apexdarkmode

Oracle APEX 20.1: Theme Vita Dark CSS-Error on Textfield with autocomplete


When you apply the Vita Dark-theme to your app and have selection lists, such as in a textfield with autocomplete, the background and the text in the select list are white and thus hard to read.

Screenshot to show the wrong colors

Is there any workaround to this? All the other standard themes work correctly.


Solution

  • The issue can be addressed with a snippet of css which can be easily added in theme roller under custom css for Vita - Dark theme.

        .oj-listbox-drop { 
            background-color: #222629; 
            color: #fefefe; 
            border-width: 0; 
            border-radius: 2px; 
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1); 
            padding: 8px 0 
        } 
    
        .oj-inputsearch-choice { 
            color: inherit; 
            background-color: transparent; 
            border-color: transparent 
        } 
    
       .oj-listbox-results .oj-hover { 
            --oj-listbox-bg-color-hover: #0076df; 
            background-color: #0076df; 
            color: #fff 
       }