bootswatch

<p align="center">
  <img width="200" height="200" src="https://bootswatch.com/_assets/img/logo.png">
</p>

<h3 align="center">Bootswatch</h3>

<p align="center">
  A collection of open source themes for <a href="https://getbootstrap.com/">Bootstrap</a>
  <br>
  <a href="https://bootswatch.com/"><strong>View Bootswatch themes »</strong></a>
  <br>
  <br>
  <a href="https://github.com/thomaspark/bootswatch/issues/new">Report bug</a>
  ·
  <a href="https://github.com/thomaspark/bootswatch/issues/new">Request feature</a>
  ·
  <a href="https://blog.bootswatch.com/">Blog</a>
</p>

## Usage

There are a few different ways you can integrate Bootswatch into your project.

### Via Pre-compiled Asset

Download the `bootstrap.min.css` file associated with a theme and replace
Bootstrap's default stylesheet. You must still include Bootstrap's JavaScript
file to have functional dropdowns, modals, etc.

### Via CDN

You can use the themes via CDN at [jsDelivr](https://www.jsdelivr.com/package/npm/bootswatch).

### Via Sass Imports

If you're using [Sass](https://sass-lang.com/) (SCSS) in your project, you can
import the `_variables.scss` and `_bootswatch.scss` files for a given theme.
This method allows you to override theme variables.

```scss
// Your variable overrides go here, e.g.:
// $h1-font-size: 3rem;

@import "~bootswatch/dist/[theme]/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/[theme]/bootswatch";
```

Make sure to import Bootstrap's `bootstrap.scss` in between `_variables.scss`
and `_bootswatch.scss`!

### Via npm

You can install as a package with the command `npm install bootswatch`.

#### React Users (`create-react-app`, or similar bundler)

Modern JavaScript bundlers (webpack, parcel, rollup) support `import`ing CSS from JS files. This can make it easier to deploy various 1st and 3rd party assets predictably. Note: _There are tradeoffs to the following method, research your tooling before deploying to production._

Before continuing, ensure you've run `npm install bootswatch` in your local project folder. (Use either `npm` or `yarn`.)

Add the following `import` to your top-level `index.js` (or `App.js`) file. Add it **before** any other `.css` imports.

```js
import "bootswatch/dist/[theme]/bootstrap.min.css";
// TODO: Note: Replace ^[theme]^ (examples: darkly, slate, cosmo, spacelab, and superhero. See https://bootswatch.com for current theme names.)
```

Here's an example of updated `imports` in `App.js` to use "slate" theme (using a `create-react-app` fresh project.)

```js
import React from 'react';
import logo from './logo.svg';
import 'bootswatch/dist/slate/bootstrap.min.css'; // Added this :boom:
import './App.css';

function App() {
...
```

### Via Ruby Gem

In your Ruby project, you can access the latest version of each theme by adding
the following to your Gemfile and running `bundle install`:

```ruby
gem "bootswatch", github: "thomaspark/bootswatch"
```

Each theme directory is then accessible via the