Dark Theme Contrast

The “rename” dialogue is hard to read

What’s the easiest way to add some contrast?

[original thread by shortwavedave]

hm, i cannot reproduce it

Could it be that you changed some styles for your app?


Oh wow, and your font is different. On first look, the custom styles I have are this:

#widget-container h2 {
color: var(–theia-ui-font-color1);
font-size: 12px;
font-weight: 400;
padding: 10px;
text-transform: uppercase;

.navbar-default {
background-color: var(–theia-menu-color0);
font-family: var(–theia-ui-font-family);
font-size: var(–theia-ui-font-size3);

But let me look into this more now that I know it is just me.


I used the not-committed-yet react widget generator, which I think added that widget-container style. I’ll mess around with it


my top level frontend-module also contains this code:

const bootstrapLink = document.createElement(“link”);
bootstrapLink.rel = ‘stylesheet’;

function updateTheme(newTheme: string): void {
const theme = bootstrapLink.getAttribute(‘theme’);
if (theme === newTheme) {
bootstrapLink.setAttribute(‘theme’, newTheme);
bootstrapLink.href = newTheme === ‘dark’ ?
//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/darkly/bootstrap.min.css’ :
ThemeService.get().onThemeChange(({newTheme}) => updateTheme(newTheme.id));