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?

[shortwavedave]

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.

[shortwavedave]

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

[shortwavedave]

my top level frontend-module also contains this code:

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

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