Change Background Color

[dannycarbonero]

Thanks for sharing this. This is awesome. Using it as a landing page for an NFC business card. Was poking around and I'm not sure how I'd change the background color. Is it possible?

[sethcottle]

@dannycarbonero of course! By default index.html uses <link rel="stylesheet" href="css/skeleton-auto.css"> which will swap the theme between light and dark depending on the users system settings. Those values are inherited from the browser being used. Every browser has a slightly different dark color they use, Chrome for example is #121212.

You can force a background color by swapping the skeleton-auto.css to either skeleton-light.css (which will use black color text) or skeleton-dark.css (which will use white color text, so use the one that makes the most sense for the background color you're implementing to stay accessible). You can then go into the .css file and add a background color manually since they are just inheriting browser defaults.

Scroll down to Base Styles section in either skeleton-light.css to either skeleton-dark.css and find body {. Within that you can add a background-color:. Here's an example you could do in skeleton-dark.css to force a specific color background at all times:

body {
  background-color: #121212;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
}

Hopefully this helps! Let me know if you have any questions or need any help!

[dannycarbonero]

I got there! Thank you so much for the help though. It was a lot simpler than I expected it to be