jetzt Dark Theme

[ianzapolsky]

Implemented a dark theme for the jetzt speedreader

Changes:
 - added a new case to handleKeydown to listen for a button press on `0`. This
   is arbitrary and subject to change.
 - added a control method toggleTheme, which does nothing other than call
   the new toggleTheme method in Reader (see next bullet).
 - added a method toggleTheme in Reader, which uses two added CSS classes,
   dark-theme and sr-pivot-dark, to change the appearance of the jetzt reader
   from black/red on white/gray to white/green on black/gray.
 - exposed wordBox as its own element in Reader, to allow for the easier
   maniuplation of its CSS classes.
 - added a variable called theme to reader, which keeps track of the current
   theme of the reader (true = light, false = dark)
 - added various comments in places where I made changes.

I saw this on the todo list and thought it was low hanging fruit that I could
tackle. This is my first contribution to an open source project. Please be
kind, and if I did royally screw something up, I would love to hear about how
I can avoid that in the future in a constructive way.

ianzapolsky

[ds300]

A good attempt! Alas, there are some issues with the way you've done things:

• the class name dark-theme is, IMO, too prone to collisions with site styles. I'd prefer sr-dark or something.
• Rather than making one dark theme and applying it programmatically to everything, it would be better to be able to simply add the sr-dark class to the sr-reader element. This lets us write dark styles for individual elements and to easily see the difference between light and dark. e.g.

.sr-reader .sr-word-box {
  flex: 0 0 auto;
  width: 400px;
  background: white;
  position: relative;
}

.sr-reader.sr-dark .sr-word-box {
  background-color: black;
}

• Rather than a variable in the Reader class, you should use a config variable "dark" with a default value of false, then the toggleTheme function wouldn't be coupled to the reader, and the user's choice would be saved for future use. e.g.

function toggleTheme () {
  config("dark", !config("dark"));
  reader && reader.applyTheme();
}

where applyTheme does something like:

if (config("dark")) addClass(box, "sr-dark");
else removeClass(box. "sr-dark");

and should be called at Reader construction time.

• I think the green used for the pivot character might be too dark, but I didn't spend much time reading so whatever you think is best will do for now.

I hope none of this sounds too critical, and greatly appreciate your will to contribute :)

[ianzapolsky]

thanks for the detailed notes! I'll rework things and see if I can't hit it better the second time.