Dark Theme

[Irame]

I would like it, if a dark theme would be an option.

[hawkins]

Agreed. For what it's worth, there is a dark mode available when you're viewing an episode. Look to the right just below the video player for a toggle on it.

It's only for that page tho, and you have to disable it to browse again right now (may change? see #7 )

[remixz]

I think a dark theme would be a great idea, especially if it's across the whole player instead of just the episode page. The current "dark" mode I intended to be more like a theatre mode, but I agree with you @hawkins in #7 that it's really not that great since you have to turn it off to change episodes and such.

I think I'll probably work on this soon, but if anyone wants to take it in the meantime, go ahead. When I do start working on it, I'll assign myself so we aren't duplicating work 😂

[yowkah]

came across this app yesterday and used it with pleasure. However I too miss a dark theme.
Not really that familiar with vuejs yet but since i got some spare time I'd like to give a shot at this.

[remixz]

@yowkah Go for it! 👍 Here are some quick notes:

• We should keep the dark mode toggle in the Vuex store. As well, it should persist to the browser storage, so when a user comes back they'll be in dark mode. You can see how I do that in a mutation here: https://github.com/remixz/umi/blob/master/src/store/index.js#L505
• I think this will mostly be CSS changes, but what will make it a bit harder is that I've used Tachyons, which has the idea of "functional selectors", where instead of creating a selector with a bunch of rules, I instead compose a bunch of selectors with one rule each. As such, there's stuff like .bg-blue for example.
  • The easiest method I can think of will probably be that when dark mode is on, we toggle a selector on the body class. This will require a watch function on a computed property in the root App.vue, I imagine.
  • From there, we can create a new CSS file for dark mode styles, where we would have a bunch of overrides for various Tachyons selectors to make them "dark." (i.e. .dark-mode .bg-blue {})
  • Finally, for any edge cases, we can write CSS specifically for dark mode in each component. We can track if we're in dark mode easily thanks to us putting the dark mode state in the Vuex store.

Honestly, as I write it out, it sounds like this could be a little more complicated than one would imagine. 😂 If you tackle this and end up getting a bit stuck, please feel free to open a WIP pull request and I'll do my best to help out!

[yowkah]

I had the start down where i made a "darkTheme" boolean in the store to switch the theme on and off. but I'm indeed struggling with how to tackle the the color-named classes. I feel as if just overriding them using css would be uglier than replacing them based on a conditional.

Here would be an example of one of those cases:
Normally the background is just light-gray and the text is default black. But when we switch to dark theme we actually want white or gray text instead. I'd rather not obfuscate the changing of the font-color here and use a ternary inside the class definition instead

<h2 :class="darkTheme ? 'bg-light-gray': ['bg-near-black','white']" class="cf"></div>

instead of going:

.darkTheme .dashboard-section div.cf.bg-light-gray {
     background-color: #555;
     color: #fff;
}

edit: added WIP PR #14