bulma-turbo-themes

Modern, accessible theme packs and a drop-in theme selector for Bulma 1.x.

• Catppuccin, Dracula, GitHub (light/dark) flavor packs
• Accessible theme selector with keyboard and screen reader support
• Inline or link-based CSS delivery; CSP-friendly
• Tested with coverage, Lighthouse CI, and stylelint

Install as a Ruby gem:

# Gemfile
gem "bulma-turbo-themes", "~> 0.4"

# _config.yml
theme: bulma-turbo-themes

Then run:

bundle install
bundle exec jekyll serve

Assets are automatically available - no copying needed!

Install via npm:

npm install @turbocoder13/bulma-turbo-themes

1. Install the gem (see above)
2. Include CSS links in your layout:

<link
  id="theme-global-css"
  rel="stylesheet"
  href="{{ '/assets/css/themes/global.css' | relative_url }}"
/>
<link id="theme-flavor-css" rel="stylesheet" href="#" />

1. Add selector markup and initialize:

<div class="dropdown is-right is-theme" id="theme-flavor-dd">
  <div class="dropdown-trigger">
    <button id="theme-flavor-trigger" aria-haspopup="true">
      <span id="theme-flavor-trigger-icon"></span>
      <span id="theme-flavor-trigger-label"></span>
    </button>
  </div>
  <div class="dropdown-menu" id="theme-flavor-menu" role="menu">
    <div class="dropdown-content" id="theme-flavor-items"></div>
  </div>
  <div class="select is-hidden"><select id="theme-flavor-select"></select></div>
  <span id="theme-flavor-icon"></span>
</div>

<script src="{{ '/assets/js/theme-selector.js' | relative_url }}"></script>

1. Copy CSS files from node_modules/@turbocoder13/bulma-turbo-themes/assets/css/themes/ to your project:
   • global.css (required)
   • Flavor CSS files (e.g., catppuccin-mocha.css, dracula.css, github-dark.css) - copy the ones you want to use
2. Include CSS links (adjust paths to match your project structure):

<link id="theme-global-css" rel="stylesheet" href="/assets/css/themes/global.css" />
<link id="theme-flavor-css" rel="stylesheet" href="#" />

1. Add selector markup and initialize:

<div class="dropdown is-right is-theme" id="theme-flavor-dd">
  <div class="dropdown-trigger">
    <button id="theme-flavor-trigger" aria-haspopup="true">
      <span id="theme-flavor-trigger-icon"></span>
      <span id="theme-flavor-trigger-label"></span>
    </button>
  </div>
  <div class="dropdown-menu" id="theme-flavor-menu" role="menu">
    <div class="dropdown-content" id="theme-flavor-items"></div>
  </div>
  <div class="select is-hidden"><select id="theme-flavor-select"></select></div>
  <span id="theme-flavor-icon"></span>
</div>

import { initTheme, wireFlavorSelector } from '@turbocoder13/bulma-turbo-themes';

document.addEventListener('DOMContentLoaded', () => {
  initTheme(document, window);
  wireFlavorSelector(document, window);
});

This project includes comprehensive testing:

• Unit Tests: Vitest with coverage reporting
• E2E Tests: Playwright with Page Object Model pattern
• Accessibility Tests: axe-core integration for WCAG compliance
• Visual Regression: Playwright screenshots and snapshots

Run tests:

npm test              # Unit tests with coverage
npm run e2e           # All E2E tests
npm run e2e:smoke     # Smoke tests only
npm run e2e:visual    # Visual regression tests
npm run e2e:a11y      # Accessibility tests
npm run e2e:ui        # Playwright UI mode

For detailed E2E testing documentation, see docs/E2E-TESTING.md.

• Code of Conduct: see CODE_OF_CONDUCT.md
• Contributing Guide: see CONTRIBUTING.md
• Security Policy: see SECURITY.md
• Release process: see docs/RELEASE-TRAIN.md
• E2E Testing: see docs/E2E-TESTING.md
• Workflows & Actions: see .github/workflows/README.md and .github/actions/README.md
• Scripts: see scripts/README.md

See GOVERNANCE.md and MAINTAINERS.md.

MIT © Turbo Coder