Closed mirdaki closed 3 years ago
Do you have an alternate stylesheet one of them is using?
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.
@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);
}
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.
Done in ebc1d60 and live on the site
Awesome thanks!
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.