Do you want to make some adjustments or build your own theme completely different from the official dark or light themes? Since Bigiron.css is built with CSS variables this is super easy to do! Here's a list list of all the variables you can change to your liking:

--background-body
--background
--background-alt
--selection
--text-main
--text-bright
--text-muted
--links
--focus
--border
--code
--animation-duration
--button-hover
--scrollbar-thumb
--scrollbar-thumb-hover
--form-placeholder
--form-text
--variable
--highlight
--select-arrow

Runtime theming

⚠ If you use a version with support for legacy browsers like Internet Explorer, skip to Compiling your own theme!

Bigiron.css uses Custom Properties ("CSS variables") to define its base styles such as colors. These can be changed and overwritten right in the browser.

Because of this, you can simply add your own stylesheet to the page and set your own CSS variables there. As long as your stylesheet comes after Bigiron.css in the HTML, your values will override the default ones and your theme is applied!

This short example will use Bigiron.css, but color all links red:

<style>
  :root {
    --links: red;
  }
</style>

If you want to change a value for dark or light mode only, use a media query like this:

<style>
  :root {
    --links: blue; /* Always applied */
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --links: yellow; /* Only applied in dark mode (overrides blue) */
    }
  }
</style>

Compiling your own theme

If you are targeting browsers without support for CSS Custom Properties such as Internet Explorer, runtime theming is not an option. To apply your own theming, you'll need to make your changes in the source files themselves, then re-compile the CSS files. This works like the following:

Clone the repository to your machine
Run npm i to install dependencies
Make the theming changes you want in src/variables-*.css
Run npm build to compile the CSS files
Use the compiled files in the out/ directory on your site

Contributing

Bigiron.css becomes better for everyone when people like you help make it better!

Publishing

To publish, commit a conventional commit message with your changes, e.g. fix: fixed some-ting, and github should build your package for you.

Keywords

FAQs

What is bigiron.css?

Is bigiron.css well maintained?

Package last updated on 14 Oct 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install