Dark theme

[ArLEquiN64]

I want dark theme like white character and black background.
and if you don't mind, could you support any syntax theme?

[hackjutsu]

@ArLEquiN64
What kind of dark theme are you referring to ?

• app
• editor
• syntax highlight

--- Update ---
To be honest, it's difficult and sometimes frustrating to pick up a dark palette that make everything looks cool.

If you have some idea, feel free to post a screenshot of your mockup, or you can try to apply a global style sheet to see how it works out.

[hackjutsu]

Does someone know how to load CSS dynamically in webpack, like loading different stylesheet based on config variable? Just tried on this issue but get stuck.

Currently, Lepton loads stylesheet like this https://github.com/hackjutsu/Lepton/blob/master/app/containers/userPanel/index.js#L10

[DNLHC]

@hackjutsu you could use dynamic import

if (darkTheme) {
    import('./dark-theme.scss')
} else {
    import('./light-theme.scss')
}

but, i think the best way for theming would probably be CSS-variables, you can easily manage it with JS.

[hackjutsu]

Thanks @DNLHC

I created a feature branch https://github.com/hackjutsu/Lepton/tree/feature/dark-theme, but run into the following error

ERROR in ./app/containers/loginPage/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: 'import' and 'export' may only appear at the top level (12:2)

  10 | const darkTheme = true
  11 | if (darkTheme) {
> 12 |   import './index.scss'
     |   ^
  13 | } else {
  14 |   import './index.dark.scss'
  15 | }

Feel free to play with the code in this branch:)

[DNLHC]

@hackjutsu Yeah, the dynamic import has slightly different syntax to the static one, it should be called with parenthesis.

[vielhuber]

Some update on this?

[vviikk]

This looks like a good project I can work on this week. I'll keep you guys posted.

[hackjutsu]

@vviikk Feel free to take a look at the feature/dark-theme branch.

[vviikk]

Hi, @hackjutsu. Could we communicate on Spectrum? I've created a room there. Currently, I'm updating outdated dependencies as I had a bit of trouble getting it to work locally (in Linux & WSL). IIRC, last month I was also having build issues on the Mac. Once I get to build with the latest toolchain (Babel / Webpack), I'll make a PR.

Would like to pick your brain about styled-components & it's theme layer and slowly moving out of Bootstrap.

[hackjutsu]

@vviikk Thanks for creating the chat room. Feel free to leave your questions there, and I'll come back to them within this week. (Sorry, a little bit busy at work for this quarter)

[Jamdx]

When this feature will be part of it? dark mode!!

[hackjutsu]

Working on an early version of dark mode in feature/dark-theme branch. It takes some time to adapt the colors here and there. Stay tuned.

[vielhuber]

Wow, awesome!