Themes

A theme is a set of values for the token contract, page color, text, links, bevels, titlebars, type, and nothing more. Every theme is a documented dialect of the 1996-2003 web, not a fantasy; every body-text pair passes WCAG AA; and a theme cannot make retrostrap look modern, because the five laws sit underneath it. That is the point.

Pick one per page with data-rs-theme on <html>. The swatches below are live, each little diorama is scoped to its own theme with that same attribute, all on one page. Press a "Wear this theme" button and the whole site changes outfits (we remember your choice, in your browser and nowhere else).

Bevel

Windows 2000 rendered as a website, every dialog you ever clicked OK on.

The system desktop: teal, silver chrome, navy titlebars, Tahoma.

Sector 9 BBS

Body text, set the way this theme likes it. Here is a link you have not clicked, underlined, as the law requires.

C:\THEMES> type BEVEL.HTM

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/retrostrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/themes/bevel.css">
<html data-rs-theme="bevel">

Access for all: Every body-text pair passes WCAG AA (validated by scripts/contrast.mjs). Bevel edges carry a 1px dark outer border so controls read against the desktop.

Bubble

The glossy translucent desktop of the early 2000s, homaged in hard-edged, web-safe blue.

Candy-plastic 2001: white windows on a pinstriped aqua desktop, gel buttons, and traffic-light window controls.

Sector 9 BBS

Body text, set the way this theme likes it. Here is a link you have not clicked, underlined, as the law requires.

C:\THEMES> type BUBBLE.HTM

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/retrostrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/themes/bubble.css">
<html data-rs-theme="bubble">

Access for all: Every body-text pair passes WCAG AA (validated by scripts/contrast.mjs). Links stay underlined; the gloss is a hard-stop gradient, so nothing pulses.

Classic

The unstyled Netscape look worn with pride, a university professor's homepage.

The 1996 browser default: silver page, white sheet, Times, blue links.

Sector 9 BBS

Body text, set the way this theme likes it. Here is a link you have not clicked, underlined, as the law requires.

C:\THEMES> type CLASSIC.HTM

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/retrostrap.min.css">
<!-- classic ships inside the core stylesheet: no theme file to load -->
<html data-rs-theme="classic">

Access for all: Ships in the core tokens; no theme file needed. Every body-text pair is AAA. Links stay underlined.

Cosmic

The 'space' personal page dressed in nebula, midnight's dreamier cousin.

A starry deep-purple void: pink and cyan neon on aubergine, over a tiled starfield.

Sector 9 BBS

Body text, set the way this theme likes it. Here is a link you have not clicked, underlined, as the law requires.

C:\THEMES> type COSMIC.HTM

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/retrostrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/themes/cosmic.css">
<html data-rs-theme="cosmic">

Access for all: All body-text pairs sit above AA; scripts/contrast.mjs gates them in CI. Links stay underlined.

High contrast

The 'high visibility' accessibility pages that took legibility seriously before it was cool.

Accessibility mode, 1998 spirit: black on white, larger text, an unmissable focus ring. Every pair clears AAA.

Sector 9 BBS

Body text, set the way this theme likes it. Here is a link you have not clicked, underlined, as the law requires.

C:\THEMES> type HIGHCONTRAST.HTM

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/retrostrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/themes/highcontrast.css">
<html data-rs-theme="highcontrast">

Access for all: Built for maximum legibility: AAA on every body-text pair, body text a step larger, a 3px focus ring.

Kawaii

The glitter-and-hearts fanpage every 2001 diary kept, bows and all.

Pastel shrine: bubblegum page, tiled hearts, Comic Sans, hot-pink scalloped panels.

Sector 9 BBS

Body text, set the way this theme likes it. Here is a link you have not clicked, underlined, as the law requires.

C:\THEMES> type KAWAII.HTM

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/retrostrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/themes/kawaii.css">
<html data-rs-theme="kawaii">

Access for all: Every body-text pair passes WCAG AA (validated by scripts/contrast.mjs). Links on the tinted page darken to a tinted pair automatically, and stay underlined.

Midnight

The black-with-neon cool page every 1998 teenager aspired to build.

GeoCities after dark: black page, tiled starfield, neon text, yellow headings.

Sector 9 BBS

Body text, set the way this theme likes it. Here is a link you have not clicked, underlined, as the law requires.

C:\THEMES> type MIDNIGHT.HTM

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/retrostrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/themes/midnight.css">
<html data-rs-theme="midnight">

Access for all: The docs/08 contrast matrix clears AA for every body pair here. Links keep their underlines.

Newspaper

The web portal and online-newspaper look, all gravitas and a serif headline.

The 1997 broadsheet: ink on newsprint, serif columns, a black masthead. Grayscale but for the links.

Sector 9 BBS

Body text, set the way this theme likes it. Here is a link you have not clicked, underlined, as the law requires.

C:\THEMES> type NEWSPAPER.HTM

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/retrostrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/themes/newspaper.css">
<html data-rs-theme="newspaper">

Access for all: Ink on newsprint reads well by construction: every body pair passes WCAG AA, checked by scripts/contrast.mjs. Links stay underlined.

Phosphor

A VT220 you can browse, textfiles, zines, and hacker cool.

Green terminal on black: Courier, scanlines welcome, rs-dos blends in.

Sector 9 BBS

Body text, set the way this theme likes it. Here is a link you have not clicked, underlined, as the law requires.

C:\THEMES> type PHOSPHOR.HTM

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/retrostrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/themes/phosphor.css">
<html data-rs-theme="phosphor">

Access for all: Green on black clears WCAG AA on every body pair; the contrast gate keeps it that way. Pair with rs-crt only; the flicker variant stays off.

Y2K

The turn-of-the-century tech portal, brushed metal, cyan glow, install CDs.

Millennium chrome: dark navy dither page, banded silver panels, Impact headings.

Sector 9 BBS

Body text, set the way this theme likes it. Here is a link you have not clicked, underlined, as the law requires.

C:\THEMES> type Y2K.HTM

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/retrostrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/retrostrap@0.1.0/dist/themes/y2k.css">
<html data-rs-theme="y2k">

Access for all: Every body-text pair passes WCAG AA (validated by scripts/contrast.mjs). The blue accent is chrome only; body links take a silver-safe blue on the sheet and a bright cyan on the dark page, always underlined.

Switching at runtime goes through Retrostrap.theme.set("midnight"), which persists the choice (in your browser, nowhere else); the recipe is in Get started. Every theme here traces to a documented era genre, the Museum's field guide shows the source material.