Night Mode for forums.spongepowered.org

I’ve been attempting to create a night mode variant of our theme (note that I am the farthest thing from a web developer so I am really out of my element here) and I wanted to share what I had so far to get some feedback.

Enabling Night Mode

  1. Click on your name and select the Preferences cog
    http://i.imgur.com/zEoBRWF
  2. Select Interface and click on the Theme dropdown and select ‘Night Mode’
  3. Save changes and you’re good to go!

Overall Look

Color Scheme

This is what I’m using currently but you’ll see by the CSS in use that I’ve had to… work around some interesting things.

http://imgur.com/mygFAUB

Oddities

I’m sure the theme has some oddities lying about. If you find any please report them to me and provide a screenshot of it so I can see about getting it addressed!

CSS

CSS in use can be found here: nightmode.css · GitHub (includes changes by ryantheleach from the comments below)

Let me know your thoughts!

5 Likes

Give this a go.

Looks a lot better, thanks! Feel free to provide any feedback or tweaks you feel would improve the look and feel of the theme. :slight_smile:

When you say “click on your name” on what page is that possible? For eons, I only see the search and three-bars on the upper corner of the forum pages…

Not sure if reporting issue or showing TheBoomer where it is…

Likely due to your broken avatar. You could try going here: https://forums.spongepowered.org/u/TheBoomer/preferences/interface

Change it here, https://auth.spongepowered.org/accounts/settings/ That controls single sign on, and propogates changes to avatars, usernames, and details across ore & the forums.

3 Likes

Thanks, ryantheleach - never noticed the icon was broken all this time, but it must go back a while.
Interestingly reuploading the image didn’t work, it stayed broken, I had to change it to gravitar, then uploaded to change that.

Time to test-drive this dark mode now :slight_smile:

Okay, so… now its broken again. I noticed a few other notable people’s account had no icon, then quickly glanced up and mine is gone again.

@ryantheleach any ideas why they are breaking?

@Grinch - enjoying the dark theme throroughly, nice job.

Was it uploaded to auth, or to the forums?

Using that auth link…
and now it has switched to the other default one on its own…

Yeah, sorry - I need to send a forum PM round to the people it affected, but some of the avatars got corrupted, so I had to reset them. Sorry!

Interesting fun fact (Completely off topic from thread) After having my avatar go corrupt the other day, getting it reset (Im assuming that was you), and reuploading using the Auth link… My avatar works fine on the forums, but is corrupted again via Ore.

I saw that as well when I reset my icon, but it worked after logging out and back in through Ore. Coupd you try that?

These are my current tweaks to the night mode, biggest change is obviously changing the main font color to be even less white. So it clashes less with the background, banner is the currently stickied info block at the top, the rest should be pretty self explanatory.

html {
    color: #d4d2d2;
}

#banner {
    background: #dac895;
    color: #423f35;
}

#banner p:first-of-type {
    margin-top: 0;
}

.badge-notification.new-posts, .badge-notification.unread-posts {
    background-color: #efce49;
}

.category-list tbody .category h3 a[href] {
    color: #d4d2d2;
}

Hey hey, creator of the theme central here. Currently on mobile, will take a look at this tomorrow, and def give feedback!

1 Like

@Grinch does the css to be loaded have to be .css or could it be .scss ? if the latter, I can clean it up by a lot.

EDIT:

Looks like you got mostly css with a handful of scss at the very end. what’s up with that? :o






@Grinch @phit @ryantheleach thoughts?

SCSS
  /*
██    ██  █████  ██████  ███████
██    ██ ██   ██ ██   ██ ██
██    ██ ███████ ██████  ███████
 ██  ██  ██   ██ ██   ██      ██
  ████   ██   ██ ██   ██ ███████
*/
$lightestgrey: #a2a2a2;
$lightergrey: #616161;
$lightgrey: #545454;
$grey: #454545;
$darkgrey: #333;
$darkergrey: #2a2a2a;

$fadedyellow: #FFDE58;
$yellow: #f7cf0d;
$oldyellow: #959500;
$greenyellow: #b29816;



/*
██   ██ ███████  █████  ██████  ███████ ██████
██   ██ ██      ██   ██ ██   ██ ██      ██   ██
███████ █████   ███████ ██   ██ █████   ██████
██   ██ ██      ██   ██ ██   ██ ██      ██   ██
██   ██ ███████ ██   ██ ██████  ███████ ██   ██
*/

.menu-panel.drop-down {
  background-color: $darkgrey;
  top: 134%;
  border-top: none;

  .notifications li {
    background-color: transparent;
    &:hover{
      background-color: $oldyellow;
    }
  }

  li:hover a {
    color: $darkgrey;
  }
}

.d-header .icons {
  .icon {
    border: none;

    &:hover {
      border: none;
      background-color: transparent;
    }

    &:active {
      background-color: transparent;
    }
  }

  .active .icon {
    border: none;
    background-color: transparent;
    border: none;
  }
}



.glyphs a {
  display: inline-flex;

  &:hover i {
    color: $darkgrey;
  }
}

.sp-logo-container:hover {
  .sp-logo-bg {
    background-color: transparent;
  }
}

.sp-logo-menu {
  left: -5px;
}

.sp-logo-dropdown {
  border: 1px solid $lightgrey;
  border-top: none;
  background-color: $darkgrey;
  padding: 0;

  li {
    background-color: transparent;
    color: $lightestgrey;

    &:hover {
      background-color: $grey;
      color: $yellow;
    }
    &.active {
      background-color: $yellow;
      color: $darkgrey;
    }

  }
}
/*
████████ ██ ███    ███ ███████     ███████  ██████ ██████   ██████  ██      ██
   ██    ██ ████  ████ ██          ██      ██      ██   ██ ██    ██ ██      ██
   ██    ██ ██ ████ ██ █████ █████ ███████ ██      ██████  ██    ██ ██      ██
   ██    ██ ██  ██  ██ ██               ██ ██      ██   ██ ██    ██ ██      ██
   ██    ██ ██      ██ ███████     ███████  ██████ ██   ██  ██████  ███████ ███████
*/


.timeline-container .topic-timeline{
  .timeline-scrollarea{
    border-color: $greenyellow;
  }
  .timeline-handle{
    background-color: $greenyellow;
  }
}





/*
███    ███ ███████ ███████ ███████  █████   ██████  ███████ ███████
████  ████ ██      ██      ██      ██   ██ ██       ██      ██
██ ████ ██ █████   ███████ ███████ ███████ ██   ███ █████   ███████
██  ██  ██ ██           ██      ██ ██   ██ ██    ██ ██           ██
██      ██ ███████ ███████ ███████ ██   ██  ██████  ███████ ███████
*/

.moderator .topic-body{
  background-color: transparent;
  border-right: $yellow;
}

.names .staff a{
  color: $yellow;
}

//

CSS
/*
██   ██ ███████  █████  ██████  ███████ ██████
██   ██ ██      ██   ██ ██   ██ ██      ██   ██
███████ █████   ███████ ██   ██ █████   ██████
██   ██ ██      ██   ██ ██   ██ ██      ██   ██
██   ██ ███████ ██   ██ ██████  ███████ ██   ██
*/
.menu-panel.drop-down {
  background-color: #333;
  top: 134%;
  border-top: none;
}
.menu-panel.drop-down .notifications li {
  background-color: transparent;
}
.menu-panel.drop-down .notifications li:hover {
  background-color: #959500;
}
.menu-panel.drop-down li:hover a {
  color: #333;
}

.d-header .icons .icon {
  border: none;
}
.d-header .icons .icon:hover {
  border: none;
  background-color: transparent;
}
.d-header .icons .icon:active {
  background-color: transparent;
}
.d-header .icons .active .icon {
  border: none;
  background-color: transparent;
  border: none;
}

.glyphs a {
  display: inline-flex;
}
.glyphs a:hover i {
  color: #333;
}

.sp-logo-container:hover .sp-logo-bg {
  background-color: transparent;
}

.sp-logo-menu {
  left: -5px;
}

.sp-logo-dropdown {
  border: 1px solid #545454;
  border-top: none;
  background-color: #333;
  padding: 0;
}
.sp-logo-dropdown li {
  background-color: transparent;
  color: #a2a2a2;
}
.sp-logo-dropdown li:hover {
  background-color: #454545;
  color: #f7cf0d;
}
.sp-logo-dropdown li.active {
  background-color: #f7cf0d;
  color: #333;
}

/*
████████ ██ ███    ███ ███████     ███████  ██████ ██████   ██████  ██      ██
   ██    ██ ████  ████ ██          ██      ██      ██   ██ ██    ██ ██      ██
   ██    ██ ██ ████ ██ █████ █████ ███████ ██      ██████  ██    ██ ██      ██
   ██    ██ ██  ██  ██ ██               ██ ██      ██   ██ ██    ██ ██      ██
   ██    ██ ██      ██ ███████     ███████  ██████ ██   ██  ██████  ███████ ███████
*/
.timeline-container .topic-timeline .timeline-scrollarea {
  border-color: #b29816;
}
.timeline-container .topic-timeline .timeline-handle {
  background-color: #b29816;
}

/*
███    ███ ███████ ███████ ███████  █████   ██████  ███████ ███████
████  ████ ██      ██      ██      ██   ██ ██       ██      ██
██ ████ ██ █████   ███████ ███████ ███████ ██   ███ █████   ███████
██  ██  ██ ██           ██      ██ ██   ██ ██    ██ ██           ██
██      ██ ███████ ███████ ███████ ██   ██  ██████  ███████ ███████
*/
.moderator .topic-body {
  background-color: transparent;
  border-right: #f7cf0d;
}

.names .staff a {
  color: #f7cf0d;
}

EDIT:
@Inscrutable might wanna know about this too

1 Like