Theming

Theming Blacklight

Blacklight uses the Bootstrap framework for styling the out-of-the-box UI. While there is some Blacklight-specific customizations, most (if not all) the "styling" (colors, fonts, etc) are handled by Bootstrap.

One approach to styling Bootstrap 3 (Blacklight 6) based sites is using "bootswatches".

Developing a Customized "Local" Theme

In most cases, you will want to develop your own theme within your Blacklight app, outside of the Bootswatch gem. To do this, you can do the following in your app/assets/stylesheets directory:

1. create your own _variables.scss and _bootswatch.scss files in stylesheets/ (easiest way to do this is to copy those files from an existing theme and customize from there)
2. change application.css to application.css.scss
3. add the import statements given in the above "theming" example to application.css.scss
4. delete blacklight.css.scss

So, your application.css.scss should look like this:

@import "variables";

@import "bootstrap";

@import "bootswatch";

@import 'blacklight/blacklight'