Dark skin for bootstrap Pub Share

I'm very fond of dark skins, so I customized the bootstrap CSS, to have a dark version as well.

Right now my wiki site has the two options and you can switch between them at will - it is a profile settings. Not a new idea, obviously, but here's what it entails:

• the CSS, obviously
• the code to switch between them
• the ads... to match

The CSS

The CSS is now available here: bootstrap dark skin. You'll find both the light and dark versions there.

To use it, get the full bootstrap distribution for 3.3.4 and add these two files in the CSS folder. Then, in your app, just switch the CSS.

Using it

In my case, the setting "dark" vs "light" can come from a default website wide static configuration setting, the user profile OR a per session override.

The per-session override is provided to allow a demo/preview of the website's functionality. I think too many websites miss this preview (they ask one to register, create accounts, verify emails and god knows what else). Mine is simple: just click to take the site for a ride: www.racerkidz.com/doe/spin.

So, the code to figure out the setting is not the simplest. It will depend on your authentication mechanism and the way you store user profiles, plus the session override if you care to implement something similar.... which I think you should!

Once you have the setting, then it's strait forward: put this in your html header (i have an htmlHeader.scala.html that I reuse everyhere):

<link href="@routes.Assets.at("bootstrap/css/bootstrap-"+_root_.admin.Config.theme+".css")" rel="stylesheet">

Ads and others

Don't forget other bits and pieces used by your website, most notably ads. I have two sets of ads: light and dark as well and they also get displayed per page depending on the theme setting. You don't want a dark page with a bright white ad on pampers or something...

Play framework CSS setting

Right now I support the per-session override like so:

    def doeDemo(css: String) = Action { implicit request =>
      if (css != null && css.length > 0)
        Redirect("/").withSession("connected" -> Constants.DEMO_USER_ID, "css" -> css)
      else
        Redirect("/").withSession("connected" -> Constants.DEMO_USER_ID)
    }

Then, when authenticating each request, I pick up the setting from the user profile OR the session and set it in a thread local for use in the views - I know, not nice, but I don't know how to do this better in play right now... if you do, please comment below.

---

See more in: Cool Scala Subscribe You need to log in to post a comment!

---