feat(mui76): retro MUI themes (System 7.6 + Lo-Fi Wireframe) with a live theme switcher#15
Open
sjungling wants to merge 9 commits into
Open
feat(mui76): retro MUI themes (System 7.6 + Lo-Fi Wireframe) with a live theme switcher#15sjungling wants to merge 9 commits into
sjungling wants to merge 9 commits into
Conversation
Add a standalone MUI theme (src/theme/system76.ts) that recreates the classic Macintosh System 7.6 / HyperCard aesthetic: monochrome palette, beveled platinum controls that invert when pressed, hard 1px borders, dithered desktop, and self-hosted Chicago/Geneva webfonts. Includes a Vite + React + TS showcase page (src/App.tsx) exercising the major MUI components laid out as classic Mac windows, plus a reusable pinstriped Window frame component.
Add a second standalone MUI theme (src/theme/wireframe.ts) modeled after Moderne's Neo lo-fi wireframe kit: hand-drawn Handlee type, wobbly asymmetric corners, light grayscale on dotted "prototype paper", and muted sketch-marker semantic colors. Add a runtime theme switcher that morphs the entire showcase between themes with no reload and persists the choice to localStorage: - theme/registry.ts registry of available themes - theme/ThemeController.tsx owns selection + ThemeProvider + persistence - components/ThemeSwitcher the dropdown control The bespoke chrome is now theme-aware: Window renders a pinstriped Mac window or a wobbly sketch card, and the top bar swaps between a Mac menu bar and a wireframe navbar.
Two more standalone MUI themes, both wired into the runtime switcher and
the theme-aware window chrome:
- theme/beos.ts BeOS / Haiku: yellow window tabs, gray beveled panels
on a steel-blue desktop, Noto Sans, blue selection highlights.
- theme/aqua.ts Mac OS X Aqua: glossy gel buttons, red/yellow/green
traffic-light window controls, pinstriped title bars, blue focus
glow, Lucida Grande.
Window gains BeOS yellow-tab and Aqua traffic-light chrome; the top bar
gains a BeOS menu bar and an Aqua (Apple) menu bar.
A fifth standalone MUI theme: austere mid-gray panels on a dark tiled workspace, thick 2px chiseled bevels with black keylines, Helvetica type, recessed white text wells, and dark recessed selection highlights. Window gains the chiseled NeXT title bar (miniaturize/close widgets); the top bar gains a NeXT "Workspace" menu bar.
A sixth standalone MUI theme styled like an Excalidraw drawing: the self-hosted Virgil marker font on a dot-grid canvas, the Excalidraw-violet accent plus the marker color palette, and genuinely rough, hand-drawn borders. The roughness comes from a shared SVG turbulence/displacement filter (components/RoughFilterDefs.tsx, id "excalidraw-rough") referenced by the theme as `filter: url(#excalidraw-rough)`. Inputs rough only their notched outline (so typed text stays crisp); the Excalidraw window draws its rough border on a border-only overlay for the same reason. Also refreshes the README to document all six themes.
Replace the shared horizontal top bar (NeXTSTEP only) with the iconic vertical NeXT main menu: a floating chiseled column anchored at the workspace's top-left, with submenu arrows (Info ▷, File ▷ …) and the theme switcher tucked in as its final cell. The page content shifts into a left gutter so the windows sit beside the menu, the way NeXT apps did. Fixes the content padding so the responsive px media query no longer overrides the NeXTSTEP left gutter.
A seventh standalone MUI theme in Plan 9's flat pastel palette: pale-yellow acme bodies, pale-cyan tag bars, soft-yellow selection, thin blue borders, no bevels or gradients, Lucida type, on a muted blue rio desktop. Window gains the acme tag bar (drag box + left scroll column); the top bar becomes the acme command tag (Newcol Kill Putall Dump Exit).
An eighth standalone MUI theme in the Frutiger Aero / Windows Aero Glass look: frosted-glass surfaces with a real backdrop-filter blur over a lush blue-to-green sky desktop, glossy gel buttons with an Aero blue hover glow, rounded corners, the glossy-green Windows 7 progress bar, Segoe/Open Sans. Window gains a translucent glass title bar with Aero window controls; the top bar gains a glossy start-orb glass bar.
A ninth standalone MUI theme styled like a green-phosphor CRT terminal: glowing VT323 monospace on near-black, a full-screen scanline + vignette overlay, a blinking block cursor, flat TUI chrome with bracketed [ OK ] controls that invert on hover, blocky green progress bars, and amber/red phosphors reserved for warnings and errors. Window becomes a TUI pane (> title … [X]); the top bar becomes a shell prompt with a blinking cursor. README updated to cover all nine themes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds mui76, a new experiment: custom Material UI themes that restyle the same modern MUI components into different retro aesthetics, with a showcase page and a dropdown that morphs the entire interface between them at runtime.
Themes
src/theme/system76.ts)src/theme/wireframe.ts)Each theme is a single standalone file that exports
createTheme(...), droppable into any MUI app.Theme switcher
theme/registry.ts— registry of available themestheme/ThemeController.tsx— owns the selection, liftsThemeProvider, persists tolocalStoragecomponents/ThemeSwitcher.tsx— the dropdown (restyles itself per theme)Switching is live (no reload) and the bespoke chrome is theme-aware:
Windowrenders a pinstriped Mac window or a wobbly sketch card, and the top bar swaps between a Mac menu bar and a wireframe navbar.Showcase
src/App.tsxexercises the major MUI components (buttons, inputs, selects, checkboxes/radios/switches, sliders, alerts, progress, chips, badges, tooltips, tabs, accordions, tables, lists, dialogs, menus) under whichever theme is active.Stack / verification
Vite + React + TS + MUI v6.
npm run buildtype-checks and builds clean. Both themes and live switching were verified in-browser.