PHPackages thomaspark/bootswatch - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. thomaspark/bootswatch ActiveComponent[Utility & Helpers](/categories/utility) thomaspark/bootswatch ===================== Themes for Bootstrap v5.3.8(9mo ago)14.8k268.8k↑17.3%3.6k[69 issues](https://github.com/thomaspark/bootswatch/issues)[3 PRs](https://github.com/thomaspark/bootswatch/pulls)10MITJavaScriptCI passing Since May 15Pushed 4w ago469 watchersCompare [ Source](https://github.com/thomaspark/bootswatch)[ Packagist](https://packagist.org/packages/thomaspark/bootswatch)[ RSS](/packages/thomaspark-bootswatch/feed)WikiDiscussions v5 Synced 3d ago READMEChangelogDependenciesVersions (63)Used By (10) [![](https://camo.githubusercontent.com/0a95d1a4bdf792f08d6bbac15e1fd3d05f45e69884b49c75aa602e22e78bb499/68747470733a2f2f626f6f747377617463682e636f6d2f5f6173736574732f696d672f6c6f676f2e706e67)](https://camo.githubusercontent.com/0a95d1a4bdf792f08d6bbac15e1fd3d05f45e69884b49c75aa602e22e78bb499/68747470733a2f2f626f6f747377617463682e636f6d2f5f6173736574732f696d672f6c6f676f2e706e67) ### Bootswatch [](#bootswatch) A collection of open source themes for [Bootstrap](https://getbootstrap.com/) [**View Bootswatch themes »**](https://bootswatch.com/) [Report bug](https://github.com/thomaspark/bootswatch/issues/new) · [Request feature](https://github.com/thomaspark/bootswatch/issues/new) · [Blog](https://blog.bootswatch.com/) Usage ----- [](#usage) There are a few different ways you can integrate Bootswatch into your project. ### Via Pre-compiled Asset [](#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 [](#via-cdn) You can use the themes via CDN at [jsDelivr](https://www.jsdelivr.com/package/npm/bootswatch). ### Via Sass Imports [](#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. ``` // 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 [](#via-npm) You can install as a package with the command `npm install bootswatch`. #### React Users (`create-react-app`, or similar bundler) [](#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. ``` 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.) ``` 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 [](#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`: ``` gem "bootswatch", github: "thomaspark/bootswatch" ``` Each theme directory is then accessible via the path `"#{Gem.loaded_specs["bootswatch"].load_paths.first}/[theme]"`. Ruby on Rails users can add the following to an initializer (e.g. `config/initializers/bootswatch.rb`): ``` Rails.application.config.assets.paths += Gem.loaded_specs["bootswatch"].load_paths ``` And thus be able to import themes via Sass like so: ``` @import "[theme]/variables"; @import "~bootstrap/scss/bootstrap"; @import "[theme]/bootswatch"; ``` ### Via API [](#via-api) A simple JSON API is available for integrating your platform with Bootswatch. More info can be found on the [Help page](https://bootswatch.com/help/#api). Customization ------------- [](#customization) Bootswatch is open source and you’re welcome to modify the themes. Each theme consists of two SASS files. `_variables.scss`, which is included by default in Bootstrap, allows you to customize the settings. `_bootswatch.scss` introduces more extensive structural changes. Check out the [Help page](https://bootswatch.com/help/#customization) for more details on building your own theme. Contributing ------------ [](#contributing) It's through your contributions that Bootswatch will continue to improve. You can contribute in several ways: - **Issues:** Provide a detailed report of any bugs you encounter and open an issue on [GitHub](https://github.com/thomaspark/bootswatch/issues). - **Documentation:** If you'd like to fix a typo or beef up the docs, you can fork the project, make your changes, and submit a pull request. - **Code:** Make a fix and submit it as a pull request. When making changes, it's important to keep the CSS and SASS versions in sync. To do this, be sure to edit the SASS source files for the particular theme first, then run the tasks `grunt swatch` to build the CSS. - **Donation:** Donations are gratefully accepted via [GitHub](https://github.com/sponsors/thomaspark) and [PayPal](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=PU2DH4BMF9MWS&source=url). Author ------ [](#author) Thomas Park - - Thanks ------ [](#thanks) - [Mark Otto](https://github.com/mdo) and [Jacob Thornton](https://github.com/fat) for [Bootstrap](https://github.com/twbs/bootstrap). - [XhmikosR](https://github.com/xhmikosr) for ongoing maintenance support. - [Jenil Gogari](https://jgog.in/) for his contributions to the Flatly theme. - [James Taylor](https://github.com/jostylr) for [cors-lite](https://github.com/jostylr/cors-lite). - [Corey Sewell](https://github.com/cjsewell) for SASS conversion. Copyright and License --------------------- [](#copyright-and-license) Copyright 2014-2023 Thomas Park Code released under the [MIT License](LICENSE). ### Health Score 72 — ExcellentBetter than 100% of packages Maintenance77 Regular maintenance activity Popularity71 Solid adoption and visibility Community54 Growing community involvement Maturity77 Established project with proven stability Bus Factor1 Top contributor holds 86.2% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~78 days Recently: every ~94 days Total 61 Last Release 80d ago Major Versions v3.4.0 → v4.2.12018-12-27 v3.4.1+1 → v4.4.02019-11-26 v3.x-dev → v5.0.02021-05-06 v4.6.2 → v5.2.02022-07-25 v4.x-dev → v5.3.12023-07-28 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/22871?v=4)[Blake E](/maintainers/electblake)[@electblake](https://github.com/electblake) ![](https://www.gravatar.com/avatar/0e7a2f1d5e6d21a69a89443cdb444f0712fc95bd040e371465f1fb754137ab3f?d=identicon)[thomaspark](/maintainers/thomaspark) --- Top Contributors [![thomaspark](https://avatars.githubusercontent.com/u/900407?v=4)](https://github.com/thomaspark "thomaspark (1952 commits)")[![XhmikosR](https://avatars.githubusercontent.com/u/349621?v=4)](https://github.com/XhmikosR "XhmikosR (137 commits)")[![m5o](https://avatars.githubusercontent.com/u/26371?v=4)](https://github.com/m5o "m5o (49 commits)")[![frapontillo](https://avatars.githubusercontent.com/u/1140238?v=4)](https://github.com/frapontillo "frapontillo (25 commits)")[![jenil](https://avatars.githubusercontent.com/u/971411?v=4)](https://github.com/jenil "jenil (16 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (11 commits)")[![markhalliwell](https://avatars.githubusercontent.com/u/351902?v=4)](https://github.com/markhalliwell "markhalliwell (6 commits)")[![mladenplavsic](https://avatars.githubusercontent.com/u/1327535?v=4)](https://github.com/mladenplavsic "mladenplavsic (6 commits)")[![pat270](https://avatars.githubusercontent.com/u/788266?v=4)](https://github.com/pat270 "pat270 (6 commits)")[![electblake](https://avatars.githubusercontent.com/u/22871?v=4)](https://github.com/electblake "electblake (4 commits)")[![kedrap](https://avatars.githubusercontent.com/u/228109?v=4)](https://github.com/kedrap "kedrap (4 commits)")[![youngmd](https://avatars.githubusercontent.com/u/1247513?v=4)](https://github.com/youngmd "youngmd (4 commits)")[![Panman82](https://avatars.githubusercontent.com/u/3475765?v=4)](https://github.com/Panman82 "Panman82 (3 commits)")[![Flokx](https://avatars.githubusercontent.com/u/100094541?v=4)](https://github.com/Flokx "Flokx (3 commits)")[![sethb0](https://avatars.githubusercontent.com/u/687303?v=4)](https://github.com/sethb0 "sethb0 (3 commits)")[![gurudigital](https://avatars.githubusercontent.com/u/8206306?v=4)](https://github.com/gurudigital "gurudigital (3 commits)")[![hungryzi](https://avatars.githubusercontent.com/u/602216?v=4)](https://github.com/hungryzi "hungryzi (3 commits)")[![jaywilliams](https://avatars.githubusercontent.com/u/3330?v=4)](https://github.com/jaywilliams "jaywilliams (3 commits)")[![jochenberger](https://avatars.githubusercontent.com/u/370733?v=4)](https://github.com/jochenberger "jochenberger (3 commits)")[![jonathanhefner](https://avatars.githubusercontent.com/u/771968?v=4)](https://github.com/jonathanhefner "jonathanhefner (3 commits)") --- Tags bootstrapbootswatchcsscss-frameworktheme ### Embed Badge ![Health badge](/badges/thomaspark-bootswatch/health.svg) ``` [![Health](https://phpackages.com/badges/thomaspark-bootswatch/health.svg)](https://phpackages.com/packages/thomaspark-bootswatch) ``` ### Alternatives [adamhopkinson/laravel-model-hash A trait which automatically generates a unique hash per model instance 2325.7k](/packages/adamhopkinson-laravel-model-hash)[samrap/gestalt Gestalt is a simple, elegant PHP package for managing your framework's configuration values. 163.6k3](/packages/samrap-gestalt) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)