Is it bad that I'm using custom CSS on FCC?

1

I mean, obviously not from a function standpoint – it’s just little cosmetic tweaks.

I’m just sayin’ – am I a little too neurotic about wanting a dark mode?

Ultimately, I’m keeping it around until FCC has an official theme switch or something. It’s just something for my own sake. It’s not like I need the practice, either – the basic bull I’m doing here is pretty down pat.

I don’t know, just looking for an opinion from the sort of nerds who would have really strong opinions on this stuff, I guess.

2

As long as it’s solarized :grin:

3

Notably, it seems that <dfn>, <blockquote>, and <nav> <a> are all pains in the arse to style. <dfn> lets me tell it “hey, stop being italic and obnoxious”, but not “hey, stop being font-size: 20px or however ridiculously massive you are in comparison to your <p> wrapper’s 16px.”

Here’s what I’m rocking:

Summary 
/* FCC Dark Theme */

@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');

body {
  background-color: #222222;
  color: #DDDDDD;
}

.CodeMirror-code {
  background-color: #000000;
}

.navbar, #nav-map-btn, #nav-chat-btn, #nav-forum-btn, nav.navbar > ul > li > a {
  background-color: #8800FF;
} /* This attempts to style everything on the navbar. nav.navbar > ul... is an attempt to hit those anchors. */

code {
  background-color: #444444;
  color: #DDDDDD;
  font-family: "Source Code Pro"; /* I like Courier New but I've really taken a shine to SCP as of late */
}

dfn {
  font-style: normal; /* This is the only one visibly applied */
  font-size: 16px;
  font-family: "Source Code Pro";
  color: #DDDDDD;
  background-color: #444444;
}

blockquote { /* None of these are visibly applied */
  font-family: "Source Code Pro";
  color: #DDDDDD;
  background-color: #444444;
}

#submitButton, #trigger-reset-modal, #challenge-help-btn, #trigger-issue-modal {
  border-color: #440088;
  color: #440088
}

.btn-primary:hover {
  background-color: #8800FF;
}

If you copy-paste that into some plug-in or something (I use the Chrome extension User CSS), then green is purple and pleasant dark greys begin to flood the backgrounds. Here’s a screencap (with all its issues on full display as well):

Summary

Screenshot 2017-02-19 at 11.45.24 AM.png1280×753 104 KB

1 Like
4

the official dark mode is enough imo.

6

“Wait what? There’s a night mode? There’s no waaaOOH MY GOD THERE IS” - Me

7

Important point for all aspiring designers - some people need to use their own CSS for accessibility reasons. Sometimes this is to increase font sizes, and other times to hide images. Your site should be able to accommodate these changes without being unusable.

2 Likes
8

Now if only more of the navbar anchors had IDs than just Map and Chat – because at present, targeting them is a pain.

Ah, I finally got it to work! <dfn>s and <blockquote>s are still a pain, though.

If you’re targeting the anchors on the nav, just go with nav.navbar ul {}. You can get more specific, but this seems to work well enough.

Furthermore, it turns out the test pass/fail icons are considered text, so it’s a simple matter of color to change what they look like. Now, once those two problem tags are taken care of, I’ve made myself the perfect theme, tuned to my exact specifications!