Remix IDE themes plugin full support for remix plugin 0.3

GrandSchtroumpf commented 3 years ago

The goal is to implement the API from @remixproject/engine-web inside remix-ide.

The plugin should:

Manages 2 themes (light & dark) which implement the Theme interface
Implements the methods currentTheme & setTheme
Keep the selected theme in localstorage
Initial theme should be the one from localstorage or "light" if none
emit themeChanged event with the new theme inside

Themes should used the value of the current themes :

GrandSchtroumpf commented 3 years ago

Here is a snippet to help in the process (replace colors & fontFamily) :

const remixThemes = [{
  url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597918237/remix-themes/PR365/remix-light_powaqg.css',
  brightness: 'light',
  colors: {
    surface: '',
    background: '',
    foreground: '',
    primary: '',
    primaryContrast: '',
    secondary: '',
    secondaryContrast: '',
    success: '',
    successContrast: '',
    warn: '',
    warnContrast: '',
    error: '',
    errorContrast: '',
    disabled: '',
  },
  breakpoints: {
    xs: 0,
    sm: 600,
    md: 1024,
    lg: 1440,
    xl: 1920
  },
  fontFamily: '',
  space: 8,
}, {
  url: 'https://res.cloudinary.com/lianahus/raw/upload/v1597918237/remix-themes/PR365/remix-dark_tvx1s2.css',
  brightness: 'dark',
  colors: {
    surface: '',
    background: '',
    foreground: '',
    primary: '',
    primaryContrast: '',
    secondary: '',
    secondaryContrast: '',
    success: '',
    successContrast: '',
    warn: '',
    warnContrast: '',
    error: '',
    errorContrast: '',
    disabled: '',
  },
  breakpoints: {
    xs: 0,
    sm: 600,
    md: 1024,
    lg: 1440,
    xl: 1920
  },
  fontFamily: '',
  space: 8,
}];

export class ThemePlugin extends Plugin {
  protected theme: Theme = remixThemes['light']
  constructor() {
    super(themeProfile)
    const mode = localStorage.getItem('mode')
    this.theme = remixThemes[mode]
  }

  /** Internal API to set the current theme */
  setTheme(mode: 'light' | 'dark') {
    this.theme = remixThemes[mode]
    this.emit('themeChanged', this.theme)
    localStorage.setItem('mode', mode)
  }

  /** External API to get the current theme */
  async currentTheme(): Promise<Theme> {
    return this.theme
  }
}

LianaHus commented 3 years ago

the Initial in IDE is currently one from local storage or Dark if none. why you want to set Light as default?

LianaHus commented 3 years ago

same with quality vs brightness.

ethereum / remix-project

Remix IDE themes plugin full support for remix plugin 0.3 #661