Merge pull request #286 from ethereum/vscode/theme

update theme plugin

Author: GrandSchtroumpf

packages/api/src/lib/theme/types.ts

@@ -1,5 +1,4 @@
 export interface Theme {
-  /** @deprecated Use colors directly instead */
   url?: string
   /** @deprecated Use brightness instead */
   quality?: 'dark' | 'light'
@@ -30,4 +29,9 @@ export interface Theme {
   fontFamily: string
   /** A unit to multiply for margin & padding */
   space: number
-}
+}
+
+export interface ThemeUrls {
+  light: string;
+  dark: string;
+}

packages/engine/vscode/src/lib/theme.ts

@@ -1,10 +1,14 @@
-import { Plugin } from '@remixproject/engine'
+import { Plugin, PluginOptions } from '@remixproject/engine'
 import { API } from '@remixproject/plugin-utils'
-import { ITheme, Theme, themeProfile } from '@remixproject/plugin-api'
+import { ITheme, Theme, ThemeUrls, themeProfile } from '@remixproject/plugin-api'
 import { window, ColorThemeKind, Disposable, ColorTheme } from 'vscode'
 
+interface ThemeOptions extends PluginOptions {
+  urls?: Partial<ThemeUrls>
+}
+
 // There is no way to get the value from the theme so the best solution is to reference the css varibles in webview
-function getTheme(color: ColorTheme): Theme {
+export function getVscodeTheme(color: ColorTheme, urls: Partial<ThemeUrls> = {}): Theme {
   const brightness = color.kind === ColorThemeKind.Dark ? 'dark' : 'light';
   return {
     brightness,
@@ -33,25 +37,35 @@ function getTheme(color: ColorTheme): Theme {
     },
     fontFamily: 'Segoe WPC,Segoe UI,sans-serif',
     space: 5,
+    url: urls[brightness]
   }
 }
 
 export class ThemePlugin extends Plugin implements API<ITheme> {
+  protected getTheme = getVscodeTheme;
+  protected options: ThemeOptions
   listener: Disposable
-  constructor() {
+  constructor(options: Partial<ThemeOptions> = {}) {
     super(themeProfile)
+    super.setOptions(options)
+  }
+
+  setOptions(options: Partial<ThemeOptions>) {
+    super.setOptions(options)
   }
 
   onActivation() {
-    this.listener = window.onDidChangeActiveColorTheme(color => this.emit('themeChanged', getTheme(color)))
+    this.listener = window.onDidChangeActiveColorTheme(color => {
+      this.emit('themeChanged', this.getTheme(color, this.options.urls))
+    })
   }
 
   onDeactivation() {
     this.listener.dispose()
   }
 
   currentTheme(): Theme {
-    return getTheme(window.activeColorTheme)
+    return this.getTheme(window.activeColorTheme, this.options.urls)
   }
 
 }

packages/engine/web/src/lib/theme.ts

@@ -49,14 +49,16 @@ export function createTheme(params: DeepPartial<Theme> = {}): Theme {
 }
 
 export class ThemePlugin extends Plugin implements MethodApi<ITheme> {
-  protected theme: Theme = createTheme()
+  protected getTheme = createTheme
+  protected theme: Theme
   constructor() {
     super(themeProfile)
+    this.theme = this.getTheme()
   }
 
   /** Internal API to set the current theme */
   setTheme(theme: DeepPartial<Theme>) {
-    this.theme = createTheme(theme)
+    this.theme = this.getTheme(theme)
     this.emit('themeChanged', this.theme)
   }