Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-07-09 08:15:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adapt to theme's background (fixes #18905)

Browse Source
This commit is contained in:
Christof Marti
2017-05-15 16:50:35 -07:00
parent 39a2da8f9a
commit 62eaa644cb
4 changed files with 40 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.css
+2 -2
View File
@@ -233,11 +233,11 @@
background: rgba(200, 235, 255, .072);
}
.vs-dark .monaco-workbench > .part.editor > .content .welcomePage.extra-dark .commands li button {
.vs-dark .monaco-workbench > .part.editor > .content .welcomePageContainer.extra-dark .commands li button {
background: rgba(200, 235, 255, .042);
}
.vs-dark .monaco-workbench > .part.editor > .content .welcomePage.extra-dark .commands li button:hover {
.vs-dark .monaco-workbench > .part.editor > .content .welcomePageContainer.extra-dark .commands li button:hover {
background: rgba(200, 235, 255, .072);
}
src/vs/workbench/parts/welcome/page/electron-browser/welcomePage.ts
+1 -27
View File
@@ -33,9 +33,7 @@ import { used } from 'vs/workbench/parts/welcome/page/electron-browser/vs_code_w
import { ILifecycleService } from 'vs/platform/lifecycle/common/lifecycle';
import { IDisposable, dispose } from 'vs/base/common/lifecycle';
import { tildify } from 'vs/base/common/labels';
import { editorBackground } from 'vs/platform/theme/common/colorRegistry';
import { Themable } from 'vs/workbench/common/theme';
import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { isLinux } from 'vs/base/common/platform';
used();
@@ -101,28 +99,6 @@ const reorderedQuickLinks = [
'showInteractivePlayground',
];
class WelcomeTheming extends Themable {
constructor(
themeService: IThemeService,
private container: HTMLElement
) {
super(themeService);
this.update(themeService.getTheme());
}
protected onThemeChange(theme: ITheme): void {
super.onThemeChange(theme);
this.update(theme);
}
private update(theme: ITheme): void {
const background = theme.getColor(editorBackground);
const page = this.container.querySelector('.welcomePage') as HTMLElement;
page.classList.toggle('extra-dark', background.getLuminosity() < 0.004);
}
}
class WelcomePage {
private disposables: IDisposable[] = [];
@@ -250,8 +226,6 @@ class WelcomePage {
}
};
}));
this.disposables.push(new WelcomeTheming(this.themeService, container));
}
private pathEquals(path1: string, path2: string): boolean {
src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.css
+7 -2
View File
@@ -173,12 +173,17 @@
.vs .monaco-workbench > .part.editor > .content .walkThroughContent .monaco-editor-background,
.vs .monaco-workbench > .part.editor > .content .walkThroughContent .glyph-margin {
background-color: #eee;
background:rgba(0,0,0,.08);
}
.vs-dark .monaco-workbench > .part.editor > .content .walkThroughContent .monaco-editor-background,
.vs-dark .monaco-workbench > .part.editor > .content .walkThroughContent .glyph-margin {
background-color: #111;
background: rgba(0, 0, 0, .4);
}
.vs-dark .monaco-workbench > .part.editor > .content .walkThroughContent.extra-dark .monaco-editor-background,
.vs-dark .monaco-workbench > .part.editor > .content .walkThroughContent.extra-dark .glyph-margin {
background: rgba(200, 235, 255, .064);
}
.hc-black .monaco-workbench > .part.editor > .content .walkThroughContent .monaco-editor {
src/vs/workbench/parts/welcome/walkThrough/electron-browser/walkThroughPart.ts
+30
View File
@@ -38,6 +38,8 @@ import { Parts, IPartService } from 'vs/workbench/services/part/common/partServi
import { IEditorOptions } from 'vs/editor/common/config/editorOptions';
import { IMessageService, Severity } from 'vs/platform/message/common/message';
import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
import { editorBackground } from 'vs/platform/theme/common/colorRegistry';
import { Themable } from 'vs/workbench/common/theme';
export const WALK_THROUGH_FOCUS = new RawContextKey<boolean>('interactivePlaygroundFocus', false);
@@ -79,6 +81,27 @@ class WalkThroughCodeEditor extends CodeEditor {
}
}
class WalkThroughTheming extends Themable {
constructor(
themeService: IThemeService,
private container: HTMLElement
) {
super(themeService);
this.update(themeService.getTheme());
}
protected onThemeChange(theme: ITheme): void {
super.onThemeChange(theme);
this.update(theme);
}
private update(theme: ITheme): void {
const background = theme.getColor(editorBackground);
this.container.classList.toggle('extra-dark', background.getLuminosity() < 0.004);
}
}
export class WalkThroughPart extends BaseEditor {
static ID: string = 'workbench.editor.walkThroughPart';
@@ -307,6 +330,7 @@ export class WalkThroughPart extends BaseEditor {
this.content.innerHTML = content;
this.updateSizeClasses();
this.updateMarkerClasses();
this.addThemeListener();
this.decorateContent();
if (input.onReady) {
input.onReady(this.content.firstElementChild as HTMLElement);
@@ -407,6 +431,7 @@ export class WalkThroughPart extends BaseEditor {
});
this.updateSizeClasses();
this.updateMarkerClasses();
this.addThemeListener();
if (input.onReady) {
input.onReady(innerContent);
}
@@ -444,6 +469,11 @@ export class WalkThroughPart extends BaseEditor {
}
}
private addThemeListener() {
const innerContent = this.content.firstElementChild as HTMLElement;
this.contentDisposables.push(new WalkThroughTheming(this.themeService, innerContent));
}
private style(theme: ITheme, div: HTMLElement) {
const styleElement = this.partService.getContainer(Parts.EDITOR_PART); // TODO@theme styles should come in via theme registry
const { color, backgroundColor, fontFamily, fontWeight, fontSize } = window.getComputedStyle(styleElement);