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
Click on your name and select the Preferences cog
Select Interface and click on the Theme dropdown and select ‘Night Mode’
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.
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
Looks a lot better, thanks! Feel free to provide any feedback or tweaks you feel would improve the look and feel of the theme.
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…
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
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…
lukegb
July 14, 2017, 1:49pm
14
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?
phit
July 19, 2017, 1:03am
17
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