A pure CSS + JavaScript theme that enforces a character-aligned grid, monospace typography, and responsive design.
<head>
<!-- …other tags… -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/monospace-web-theme@1.0.0/dist/monospace.min.css"
/>
</head>
<body>
<!-- your content… -->
<script src="https://cdn.jsdelivr.net/npm/monospace-web-theme@1.0.0/dist/monospace.min.js"></script>
</body>npm install monospace-web-themeIn your JavaScript entrypoint (e.g. index.js):
import "monospace-web-theme/dist/monospace.min.css";
import "monospace-web-theme/dist/monospace.min.js";The default style is high-contrast black-on-white (and inverted in dark mode). To try some different colour styles, set a data-theme attribute on <html>:
<html data-theme="twilight"></html>- rose: Romantic pinks
- ocean: Cool aquas
- forest: Soft greens
- desert: Warm sands
- sepia: Editorial browns
- twilight: Dusky purples
- glacier: Icy blues
- clay: Muted earth
- midnight: Dark-mode primary
- sandstone: Soft red earth
- coral: Vibrant corals
- mint: Fresh mints
- mauve: Soft purples
- slate: Cool grays
- honey: Golden yellows
- rust: Burnt oranges
- dracula: Classic dark theme
- solarized: Solarized light/dark
- monokai: Monokai code theme
- gruvbox: Warm coder palette
- nord: Arctic Nord theme
- one-dark: Atom One Dark
- palenight: Palenight pastel
- terminal: Retro green on black
All themes support prefers-color-scheme: dark automatically.
A standalone demo page is included under demo/demo.html. To preview locally:
- Clone this repo and install dependencies:
git clone https://github.com/CameronBrooks11/monospace-web-theme.git
cd monospace-web-theme
npm install
npm run build- Serve from the project root so that ../dist/… paths resolve:
live-server --open=demo/demo.html- Open http://127.0.0.1:8080/demo/demo.html in your browser.
If you’re looking for a more turnkey Markdown → HTML workflow (Pandoc + GitHub Actions), check out the-monospace-web. It uses this theme as an npm dependency and publishes a fully responsive, character-aligned site from your .md files.
- Install dependencies
npm install- Build the CSS/JS
npm run builddist/monospace.css– concatenated (unminified) CSSdist/monospace.min.css– minified CSS (cssnano, calc disabled)dist/monospace.js– compiled ES5 JSdist/monospace.min.js– minified JS (terser)
- Verify package contents
npm pack --dry-runEnsure only dist/*, README.md, LICENSE, and package.json appear.
- Publish to npm
Bump the version in package.json, create a Git tag (e.g. git tag v0.0.1), then:
git push --tags
npm publish- Fork this repository and clone your fork.
- Create a new branch for your change.
- Modify
src/reset.css,src/theme.css, orsrc/script.jsas needed. - Rebuild locally and confirm the demo.
- Commit your changes, push to your branch, and open a pull request.
This project is released under the MIT License.