Dark Mode Setting

[Matthew Booe]

Thanks for working on this! It would be nice to have a dark mode option in the setting. The people I play with tend to change the CSS while playing, but it'd be nice to have it built in.

[Brian Ouellette]

Do you have an alternate stylesheet one of them is using?

[Matthew Booe]

We typically just change the

#game-background {
  fill: #121212;
}

Since that's the main element. But I can try to work on a more complete stylesheet over the weekend.

[Matthew Booe]

@btouellette This is what I have now:

The two issues I see are the GitHub logo (which could be swapped out for the font-awesome one and treated like the other font icons) and the two white lines on the menu. I wasn't able to figure out what is causing them. They sort of look like a border, but I can't find a border around either of those elements.

Of course feel free to update this as you see fit. I am by no means a designer 😁.

:root {
  --dark-background-color: #121212;
  --dark-surface-one-color: #1E1E1E;
  --dark-surface-two-color: #2F2F2F;
  --dark-surface-three-color: #9a9a9a;
  --dark-primary-color: #2496d6;
  --dark-secondary-color: #31a0db;
  --dark-text-primary-color: #DEDEDE;
  --dark-text-secondary-color: #FFFFFF;
}

body {
  color: var(--dark-text-primary-color);
}

a {
  color: var(--dark-primary-color);
}

/* Game */

#game-background {
  fill: var(--dark-surface-one-color);
}

/* Menu */

.fa-edit {
  fill: var(--dark-text-primary-color);
}

.fa-plus-square-o {
  fill: var(--dark-text-primary-color);
}

.iconmelon {
  fill: var(--dark-text-primary-color);
}

#menu-selection > div:nth-of-type(1) {
  fill: var(--dark-text-primary-color);
}

#menus {
  background-color: var(--dark-background-color);
}

#menu-selection {
  background-color: var(--dark-background-color);
}

#author-info {
  background-color: var(--dark-background-color);
}

#game-menu {
  background-color: var(--dark-background-color);
}

#list-games {
  background-color: var(--dark-background-color);
}

.menu-header {
  background-color: var(--dark-background-color);
}

.menu-game-listing {
  background-color: var(--dark-surface-two-color);
}

/* Scores */

#score-bg {
  fill: var(--dark-surface-three-color);
}

.point-total {
  fill: var(--dark-text-secondary-color);
}

/* Chat */

.chat-user-name
{
  color: var(--dark-text-primary-color);
}

.chat-system-message
{
  color: var(--dark-primary-color);
}

#chat-message-input::placeholder {
  color: var(--dark-text-primary-color);
}

.chat-system-message {
  color: var(--dark-text-secondary-color);
}

.chat-message {
  color: var(--dark-secondary-color);
}

.fa-comments {
  fill: var(--dark-text-primary-color);
}

.panel-primary {
  border-color: var(--dark-primary-color);
}

.panel-primary > .panel-heading {
  color: var(--dark-text-primary-color);
  background-color: var(--dark-primary-color);
  border-color: var(--dark-primary-color);
}

#chat-body {
  background-color: var(--dark-surface-three-color);
}

#chat-message-input {
  background-color: var(--dark-surface-three-color);
  border-color: var(--dark-surface-two-color);
  color: var(--dark-text-secondary-color);
}

.btn-info {
  background-color: var(--dark-secondary-color);
  border-color: var(--dark-secondary-color);
  color: var(--dark-text-primary-color);
}

[Brian Ouellette]

I've got the backend and frontend updates to support this prepped. I'll play around with the styling here and when I'm happy with it I can push to the site. Thanks.

[Brian Ouellette]

Done in ebc1d60 and live on the site

[Matthew Booe]

Awesome thanks!