repl icon indicating copy to clipboard operation
repl copied to clipboard

Add light theme

Open alfonsogarciacaro opened this issue 7 years ago • 0 comments

@vasily-kirichenko has requested a light theme for the editor. Given that we already offer options like setting the font, it can be a nice addition to be able to set the theme and hopefully it's not too difficult.

There are several guides to do theming with SASS, this one proposes to use a value dictionary and then a theming mixing to generate multiple rules prefixed with the theme name like:

$themes: (
  light: (
    backgroundColor: #fff,
    textColor: #408bbd,
  ),
  dark: (
    backgroundColor: #222,
    textColor: #ddd,
  ),
);

// Usage

.app-container {
  @include themify($themes) {
    color: themed('textColor');  
    background-color: themed('backgroundColor');  
  }
}

What do you think @MangelMaxime? Should we apply this approach?

alfonsogarciacaro avatar Nov 07 '18 09:11 alfonsogarciacaro