A utility-first dark theme CSS framework with bold accent colors.
- Utility-first design — compose layouts and styles with low-level utility classes
- Dark / Light theme — switch themes via
data-themeattribute or auto-follow OS preference - Responsive breakpoints —
sm/md/lgutility variants (mobile-first;xsis the default base) - Modular architecture — load only the modules you need
- No JavaScript required — pure CSS components; interactive patterns (modal, dropdown) need minimal JS
- Lightweight (~66KB unminified, ~51KB minified) — full framework
prefers-reduced-motionsupport — respects user accessibility settings
| Noir | Tailwind CSS | Bootstrap | |
|---|---|---|---|
| Philosophy | Utility-first | Utility-first | Component-first |
| Default theme | Dark | Light | Light |
| JavaScript | Optional (modal/dropdown) | None (core) | Required |
| File size | ~77KB | ~300KB+* | ~200KB+ |
| Build step | Optional (minified build) | Required (PostCSS) | Optional |
| Dark mode | Built-in (data-theme) |
Class-based (dark:) |
data-bs-theme (v5.3+) |
| Learning curve | Low | Medium | Medium |
| Customization | CSS variables | tailwind.config.js | Sass variables |
* Tailwind's ~300KB+ is the full development build; post-purge production builds are typically 5–15KB.
Noir is ideal when you want:
- A dark-first design without extra configuration
- A lightweight framework with no build tools or JS dependencies
- Quick prototyping with utility classes and ready-made components
git clone https://github.com/kakuteki/Noir.git<!-- Load the full framework -->
<link rel="stylesheet" href="css/noir.css">
<!-- Or load individual modules -->
<link rel="stylesheet" href="css/modules/base.css">
<link rel="stylesheet" href="css/modules/layout.css"><!-- Dark theme (default) -->
<html data-theme="dark">
<!-- Light theme -->
<html data-theme="light">
<!-- Auto-follow OS preference -->
<html><!-- Container -->
<div class="container">...</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!-- Flexbox -->
<div class="flex justify-between items-center gap-4">
<span>Left</span>
<span>Right</span>
</div><button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-warm">Warm</button>
<button class="btn btn-danger">Danger</button>
<!-- Sizes -->
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-lg">Large</button><div class="card card-hover">
<div class="card-header">Header</div>
<div class="card-body">
<p class="text-secondary">Content goes here.</p>
</div>
<div class="card-footer">Footer</div>
</div><div class="form-group">
<label class="form-label">Email</label>
<input type="email" class="input" placeholder="you@example.com">
<span class="form-hint">Hint text</span>
</div>
<label class="checkbox"><input type="checkbox"> Option</label>
<label class="toggle"><input type="checkbox"> Toggle</label>- Demo — Live preview of all components
- Class Reference — Complete list of all utility classes
| File | Description |
|---|---|
base.css |
CSS variables, reset, dark/light theme system |
typography.css |
Font sizes, weights, alignment, text utilities |
layout.css |
Grid, flexbox, spacing, responsive breakpoints (sm/md/lg) |
forms.css |
Input, select, checkbox, radio, toggle, range |
components.css |
Buttons, cards, badges, alerts, modal, tooltip, table, spinner, toast, accordion, skeleton |
navigation.css |
Navbar, sidebar, tabs, breadcrumb, pagination, dropdown |
utilities.css |
Transform utilities |
states.css |
State variant utilities: hover:, focus:, active:, group-hover:, disabled: |
animations.css |
Fade, slide, pulse, spin, bounce, ping animations |
| Browser | Version |
|---|---|
| Chrome | 90+ |
| Firefox | 90+ |
| Safari | 14+ |
| Edge | 90+ |
Noir はユーティリティファーストのダークテーマ CSS フレームワークです。 ダーク／ライトテーマの切り替え、5段階のレスポンシブ対応、モジュール分割構成を備えており、JavaScript 不要で動作します。 詳しい使い方は上記の英語セクションをご覧ください。デモは GitHub Pages で確認できます。