Skip to content

docs: customize VitePress theme with unique branding#6324

Merged
jdx merged 18 commits intomainfrom
feat/custom-docs-theme
Sep 18, 2025
Merged

docs: customize VitePress theme with unique branding#6324
jdx merged 18 commits intomainfrom
feat/custom-docs-theme

Conversation

@jdx
Copy link
Owner

@jdx jdx commented Sep 18, 2025

Summary

  • Added custom theme styling to make the mise documentation more visually distinctive
  • Created a modern, developer-focused design with unique branding elements
  • Improved user experience with better readability and navigation

Changes

  • Custom Color Palette: Cyan/green/orange gradient theme inspired by modern developer tools
  • Logo Design: Created a simplified terminal-based SVG logo representing mise as a CLI tool
  • Typography: Implemented Inter and JetBrains Mono fonts for better readability
  • Animations: Added subtle hover animations for logo and navigation (only on hover to avoid distraction)
  • Code Blocks: Enhanced syntax highlighting with improved styling
  • Sidebar: Reduced padding for more compact navigation
  • Glass-morphism: Applied modern blur effects to navigation and sidebars
  • Home Page: Created custom hero component with animated gradient orbs
  • Dark/Light Modes: Carefully tuned colors for both themes with better contrast

Visual Features

  • Terminal-themed logo with window controls and command prompt
  • Gradient text animation on hover for the site title
  • Smooth transitions and hover effects throughout
  • Custom scrollbar styling
  • Enhanced feature cards with hover effects

Test Plan

  • Built documentation locally with mise run docs:build
  • Tested in both light and dark modes
  • Verified responsive design on mobile viewports
  • Ensured all animations are performant and non-distracting
  • Test cross-browser compatibility
  • Verify accessibility standards

🤖 Generated with Claude Code

Add custom theme styling to make the mise documentation more visually distinctive:
- Create custom color palette with cyan/green/orange gradient branding
- Add simplified terminal-based logo representing mise as a CLI tool
- Implement hover animations for logo and navigation title
- Enhance typography with Inter and JetBrains Mono fonts
- Style code blocks with improved syntax highlighting
- Reduce sidebar padding for more compact navigation
- Add glass-morphism effects to navigation and sidebars
- Create custom home page hero component with animated gradients
- Improve dark/light mode contrast and readability

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings September 18, 2025 21:06
@jdx jdx changed the title feat(docs): customize VitePress theme with unique branding docs: customize VitePress theme with unique branding Sep 18, 2025
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR adds custom theme styling to the VitePress documentation site to create a unique, modern branding identity for mise. The changes transform the documentation from the default VitePress appearance to a distinctive developer-focused design.

  • Custom color palette with cyan/green/orange gradients inspired by modern developer tools
  • Created terminal-themed SVG logo and custom hero component with animated elements
  • Enhanced typography using Inter and JetBrains Mono fonts with improved visual hierarchy

Reviewed Changes

Copilot reviewed 31 out of 40 changed files in this pull request and generated 3 comments.

Show a summary per file
File Description
docs/.vitepress/theme/custom.css Main stylesheet with brand colors, typography, animations and component styling
docs/.vitepress/theme/MiseLogo.vue Terminal-themed SVG logo component with hover animations
docs/.vitepress/theme/HomeHero.vue Custom hero section with gradient orbs and modern call-to-action buttons
docs/.vitepress/theme/index.ts Theme configuration to import custom CSS
docs/.vitepress/config.ts VitePress config updates for logo, fonts and favicon
Various markdown files Minor formatting improvements adding blank lines for better readability

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

- Git: .gitignore at project root and child directories, .git/info/exclude, and the file pointed to by `core.excludesFile` in .git/config.
- Mercurial: .hgignore at project root and child directories.
- Bazaar: .bzrignore at project root.
- Darcs: \_darcs/prefs/boring
Copy link

Copilot AI Sep 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect escaping of underscore character. The backslash should not be used - it should be _darcs/prefs/boring without the backslash escape.

Suggested change
- Darcs: \_darcs/prefs/boring
- Darcs: _darcs/prefs/boring

Copilot uses AI. Check for mistakes.

So if you have global tasks in `~/.config/mise/tasks/*` and project-specific tasks in
~/myproject/.mise/tasks/*, then they'll both be available but the project-specific
~/myproject/.mise/tasks/\*, then they'll both be available but the project-specific
Copy link

Copilot AI Sep 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect escaping of asterisk character. The backslash should not be used - it should be ~/myproject/.mise/tasks/* without the backslash escape.

Suggested change
~/myproject/.mise/tasks/\*, then they'll both be available but the project-specific
~/myproject/.mise/tasks/*, then they'll both be available but the project-specific

Copilot uses AI. Check for mistakes.
### `--only-names`

Only show the name of each plugin by default it will show a "*" next to installed plugins
Only show the name of each plugin by default it will show a "\*" next to installed plugins
Copy link

Copilot AI Sep 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Incorrect escaping of asterisk character in quoted text. The backslash should not be used - it should be \"*\" without the backslash escape.

Suggested change
Only show the name of each plugin by default it will show a "\*" next to installed plugins
Only show the name of each plugin by default it will show a "*" next to installed plugins

Copilot uses AI. Check for mistakes.
jdx added 17 commits September 18, 2025 21:09
- Use more muted colors in light mode for better readability
- Adjust brand colors to be less saturated in light mode
- Improve contrast for text and backgrounds
- Fix gradient text to use darker colors in light mode
- Update logo terminal background for better visibility
- Add separate hover effects for light/dark modes
- Ensure sidebar has proper background in light mode
- Remove gradients from terminal header to prevent rendering problems
- Use solid colors for terminal header bar
- Simplify gradient usage to only the border
- Fix command prompt positioning
- Use simpler rectangle fills instead of complex gradients
- Ensure logo displays correctly in both light and dark modes
… state

- Title text now uses normal text color by default
- Gradient effect only applied on hover
- This fixes the issue where text was invisible due to gradient rendering problems
- Text is now readable in both light and dark modes
- Maintains the animated gradient effect on hover for visual interest
- Import Bebas Neue from Google Fonts
- Apply to all headers (h1-h6) for a bold, distinctive look
- Use for navigation title, hero sections, and feature headings
- Apply to sidebar section headers with uppercase styling
- Adjust font sizes to accommodate Bebas Neue's tall character design
- Increase letter spacing for better readability with the condensed font
… only

- Apply Bebas Neue only to h1 elements and 'mise-en-place' title
- Revert h2-h6 headers back to default Inter font
- Revert sidebar section headers to Inter font
- Keep hero page name using Bebas Neue for impact
- This creates better visual hierarchy with distinctive h1s while maintaining readability for smaller headers
- Apply Bebas Neue to top navigation items (Dev Tools, Environments, Tasks)
- Use for 'On this page' outline header with uppercase styling
- Apply to search button placeholder text
- Adjust font sizes and letter spacing for each element
- Creates cohesive design with consistent use of display font for navigation
- Add introductory paragraph explaining the configuration page content
- Provides better context for users landing on the configuration page
- Improves documentation structure and readability
- Replace old logo with new terminal-themed SVG logo
- Update badge colors to match theme (cyan, green, orange)
- Add quick navigation links to key documentation sections
- Improve visual hierarchy with better spacing
- Bold tagline for emphasis
- Add horizontal rule to separate header from content
- Remove Bebas Neue from search button placeholder text
- Search button now uses default Inter font for better readability
- Keep Bebas Neue for navigation items and other UI elements
- Remove 'Search' placeholder text from search button
- Keep magnifying glass icon for cleaner navigation bar
- Reduces visual clutter in the header
- Add minimum width of 64px to search button
- Prevents button from being too narrow when text is hidden
- Maintains clickable area for better UX
- Set minimum width to 200px for better visibility and usability
- Add horizontal padding for better spacing
- Makes search button more prominent in navigation
- Change from display:none to visibility:hidden for search placeholder
- Preserves original button size and layout
- Keeps Command+K shortcut indicator in correct position
- Maintains all original spacing without custom width overrides
- Fix incorrect 4-backtick code blocks in plugin-publishing.md
- Change all instances to proper 3-backtick syntax
- Ensures markdown renders correctly
- Increase logo size from 120px to 256px for better visibility
- Combine logo and title in single h1 element for tighter spacing
- Remove extra spacing between logo and mise-en-place text
- Creates more impactful visual header for the README
- Change viewBox from '0 0 120 120' to '15 25 90 70'
- Crops out empty space around the terminal window
- Makes logo appear larger and reduces visual padding
- Better alignment with text in README
- Adjust header bar to fit within window stroke boundaries (77px width)
- Move prompt up from y=68 to y=64 for better spacing
- Increase gap between underscore and command lines below
- Move command lines down by 2px for better visual separation
- Header bar now properly aligned with terminal window
@github-actions
Copy link

Hyperfine Performance

mise x -- echo

Command Mean [ms] Min [ms] Max [ms] Relative
mise-2025.9.12 x -- echo 18.9 ± 0.2 18.5 21.4 1.00
mise x -- echo 19.0 ± 0.2 18.6 21.6 1.01 ± 0.02

mise env

Command Mean [ms] Min [ms] Max [ms] Relative
mise-2025.9.12 env 18.4 ± 0.3 17.9 23.3 1.00
mise env 18.4 ± 0.4 17.9 22.1 1.00 ± 0.03

mise hook-env

Command Mean [ms] Min [ms] Max [ms] Relative
mise-2025.9.12 hook-env 17.9 ± 0.1 17.6 18.5 1.00
mise hook-env 18.1 ± 0.7 17.6 29.1 1.01 ± 0.04

mise ls

Command Mean [ms] Min [ms] Max [ms] Relative
mise-2025.9.12 ls 15.9 ± 0.2 15.5 17.0 1.00
mise ls 15.9 ± 0.1 15.6 17.1 1.00 ± 0.01

xtasks/test/perf

Command mise-2025.9.12 mise Variance
install (cached) 163ms ✅ 100ms +63%
ls (cached) 61ms 61ms +0%
bin-paths (cached) 67ms 67ms +0%
task-ls (cached) 463ms 460ms +0%

✅ Performance improvement: install cached is 63%

@jdx jdx merged commit 7278a72 into main Sep 18, 2025
19 checks passed
@jdx jdx deleted the feat/custom-docs-theme branch September 18, 2025 21:42
@jdx jdx mentioned this pull request Sep 18, 2025
jdx added a commit that referenced this pull request Sep 19, 2025
### 📦 Registry

- remove deprecated virtualos by @jdx in
[166379f](166379f)
- add trufflehog
([aqua:trufflesecurity/trufflehog](https://github.com/trufflesecurity/trufflehog))
by @risu729 in [#6316](#6316)

### 🚀 Features

- **(aqua)** integrate native sigstore-verification for security
verification by @jdx in [#6332](#6332)
- **(docs)** improve search result readability with lighter teal
background by @jdx in [#6328](#6328)
- **(ui)** update logo as favicon and fix hover transitions by @jdx in
[#6325](#6325)
- **(vfox)** add file.read lua function by @malept in
[#6333](#6333)
- add documentation for "Environment in tasks" #5134 #5638 by
@Its-Just-Nans in [#6329](#6329)

### 🐛 Bug Fixes

- **(github)** correctly paginate releases/tags for private repos by
@malept in [#6318](#6318)
- **(hk)** exclude aqua-registry from prettier linting by @jdx in
[#6327](#6327)
- **(ui)** improve GitHub star badge layout and alignment by @jdx in
[#6326](#6326)

### 📚 Documentation

- change 'hello.py' to 'main.py' in python.md by @my1e5 in
[#6319](#6319)
- customize VitePress theme with unique branding by @jdx in
[#6324](#6324)

### 📦️ Dependency Updates

- update taiki-e/install-action digest to 0aa4f22 by @renovate[bot] in
[#6334](#6334)
- update rust crate comfy-table to v7.2.1 by @renovate[bot] in
[#6335](#6335)
- update rust crate console to v0.16.1 by @renovate[bot] in
[#6336](#6336)
- update rust crate indexmap to v2.11.4 by @renovate[bot] in
[#6337](#6337)

### Chore

- fixing typos by @Its-Just-Nans in
[#6331](#6331)

### New Contributors

- @Its-Just-Nans made their first contribution in
[#6331](#6331)
- @my1e5 made their first contribution in
[#6319](#6319)

---------

Co-authored-by: mise-en-dev <release@mise.jdx.dev>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
netbsd-srcmastr pushed a commit to NetBSD/pkgsrc that referenced this pull request Sep 24, 2025
## [2025.9.16](https://github.com/jdx/mise/compare/v2025.9.15..v2025.9.16) - 2025-09-22

### 📦 Registry

- use npm backend for zbctl by @risu729 in [#6379](jdx/mise#6379)

### 🐛 Bug Fixes

- **(aqua)** remove blake3 support from aqua checksum algorithms by @risu729 in [#6370](jdx/mise#6370)
- **(aqua)** remove cosign and slsa-verifier dependencies by @risu729 in [#6371](jdx/mise#6371)
- **(aqua)** remove cosign.experimental by @risu729 in [#6376](jdx/mise#6376)

### 📚 Documentation

- minisign doesn't require cli by @risu729 in [#6369](jdx/mise#6369)

### Chore

- ignore renovate new bot name by @risu729 in [#6364](jdx/mise#6364)

## [2025.9.15](https://github.com/jdx/mise/compare/v2025.9.14..v2025.9.15) - 2025-09-21

### 📦 Registry

- add missing cargo backends by @jayvdb in [#6307](jdx/mise#6307)

### 🚀 Features

- add env propagation by @Its-Just-Nans in [#6342](jdx/mise#6342)

### 🐛 Bug Fixes

- **(aqua)** improve GitHub token handling for sigstore verification by @jdx in [#6351](jdx/mise#6351)
- **(backend)** change dependency checks to warnings instead of errors by @jdx in [#6363](jdx/mise#6363)
- **(npm)** improve error message when npm/bun is not installed by @jdx in [#6359](jdx/mise#6359)
- **(vfox)** enable TLS support for reqwest to fix CI tests by @jdx in [#6356](jdx/mise#6356)

### 🚜 Refactor

- **(registry)** convert to nested TOML sections format by @jdx in [#6361](jdx/mise#6361)

### 🧪 Testing

- **(e2e)** resolve mise via PATH in backend missing deps test by @jdx in [#6362](jdx/mise#6362)
- **(vfox)** replace flaky external HTTP tests with local mock server by @jdx in [#6354](jdx/mise#6354)

### 📦️ Dependency Updates

- pin dependencies by @renovate[bot] in [#6243](jdx/mise#6243)

### Chore

- **(install.sh)** add `MISE_INSTALL_MUSL` to force installing musl variants on Linux by @malept in [#6355](jdx/mise#6355)

## [2025.9.14](https://github.com/jdx/mise/compare/v2025.9.13..v2025.9.14) - 2025-09-20

### 🐛 Bug Fixes

- fix an issue where Swift could not be installed on arm64 Ubuntu by @lish82 in [#6348](jdx/mise#6348)

### Chore

- use cross to build on linux by @jdx in [#6346](jdx/mise#6346)

### New Contributors

- @lish82 made their first contribution in [#6348](jdx/mise#6348)

## [2025.9.13](https://github.com/jdx/mise/compare/v2025.9.12..v2025.9.13) - 2025-09-19

### 📦 Registry

- remove deprecated virtualos by @jdx in [166379f](jdx/mise@166379f)
- add trufflehog ([aqua:trufflesecurity/trufflehog](https://github.com/trufflesecurity/trufflehog)) by @risu729 in [#6316](jdx/mise#6316)

### 🚀 Features

- **(aqua)** integrate native sigstore-verification for security verification by @jdx in [#6332](jdx/mise#6332)
- **(docs)** improve search result readability with lighter teal background by @jdx in [#6328](jdx/mise#6328)
- **(ui)** update logo as favicon and fix hover transitions by @jdx in [#6325](jdx/mise#6325)
- **(vfox)** add file.read lua function by @malept in [#6333](jdx/mise#6333)
- add documentation for "Environment in tasks" #5134 #5638 by @Its-Just-Nans in [#6329](jdx/mise#6329)

### 🐛 Bug Fixes

- **(github)** correctly paginate releases/tags for private repos by @malept in [#6318](jdx/mise#6318)
- **(hk)** exclude aqua-registry from prettier linting by @jdx in [#6327](jdx/mise#6327)
- **(ui)** improve GitHub star badge layout and alignment by @jdx in [#6326](jdx/mise#6326)

### 📚 Documentation

- change 'hello.py' to 'main.py' in python.md by @my1e5 in [#6319](jdx/mise#6319)
- customize VitePress theme with unique branding by @jdx in [#6324](jdx/mise#6324)

### 📦️ Dependency Updates

- update taiki-e/install-action digest to 0aa4f22 by @renovate[bot] in [#6334](jdx/mise#6334)
- update rust crate comfy-table to v7.2.1 by @renovate[bot] in [#6335](jdx/mise#6335)
- update rust crate console to v0.16.1 by @renovate[bot] in [#6336](jdx/mise#6336)
- update rust crate indexmap to v2.11.4 by @renovate[bot] in [#6337](jdx/mise#6337)

### Chore

- fixing typos by @Its-Just-Nans in [#6331](jdx/mise#6331)

### New Contributors

- @Its-Just-Nans made their first contribution in [#6331](jdx/mise#6331)
- @my1e5 made their first contribution in [#6319](jdx/mise#6319)
riastradh pushed a commit to riastradh/pkgsrc-test20250901 that referenced this pull request Feb 8, 2026
## [2025.9.16](https://github.com/jdx/mise/compare/v2025.9.15..v2025.9.16) - 2025-09-22

### 📦 Registry

- use npm backend for zbctl by @risu729 in [#6379](jdx/mise#6379)

### 🐛 Bug Fixes

- **(aqua)** remove blake3 support from aqua checksum algorithms by @risu729 in [#6370](jdx/mise#6370)
- **(aqua)** remove cosign and slsa-verifier dependencies by @risu729 in [#6371](jdx/mise#6371)
- **(aqua)** remove cosign.experimental by @risu729 in [#6376](jdx/mise#6376)

### 📚 Documentation

- minisign doesn't require cli by @risu729 in [#6369](jdx/mise#6369)

### Chore

- ignore renovate new bot name by @risu729 in [#6364](jdx/mise#6364)

## [2025.9.15](https://github.com/jdx/mise/compare/v2025.9.14..v2025.9.15) - 2025-09-21

### 📦 Registry

- add missing cargo backends by @jayvdb in [#6307](jdx/mise#6307)

### 🚀 Features

- add env propagation by @Its-Just-Nans in [#6342](jdx/mise#6342)

### 🐛 Bug Fixes

- **(aqua)** improve GitHub token handling for sigstore verification by @jdx in [#6351](jdx/mise#6351)
- **(backend)** change dependency checks to warnings instead of errors by @jdx in [#6363](jdx/mise#6363)
- **(npm)** improve error message when npm/bun is not installed by @jdx in [#6359](jdx/mise#6359)
- **(vfox)** enable TLS support for reqwest to fix CI tests by @jdx in [#6356](jdx/mise#6356)

### 🚜 Refactor

- **(registry)** convert to nested TOML sections format by @jdx in [#6361](jdx/mise#6361)

### 🧪 Testing

- **(e2e)** resolve mise via PATH in backend missing deps test by @jdx in [#6362](jdx/mise#6362)
- **(vfox)** replace flaky external HTTP tests with local mock server by @jdx in [#6354](jdx/mise#6354)

### 📦️ Dependency Updates

- pin dependencies by @renovate[bot] in [#6243](jdx/mise#6243)

### Chore

- **(install.sh)** add `MISE_INSTALL_MUSL` to force installing musl variants on Linux by @malept in [#6355](jdx/mise#6355)

## [2025.9.14](https://github.com/jdx/mise/compare/v2025.9.13..v2025.9.14) - 2025-09-20

### 🐛 Bug Fixes

- fix an issue where Swift could not be installed on arm64 Ubuntu by @lish82 in [#6348](jdx/mise#6348)

### Chore

- use cross to build on linux by @jdx in [#6346](jdx/mise#6346)

### New Contributors

- @lish82 made their first contribution in [#6348](jdx/mise#6348)

## [2025.9.13](https://github.com/jdx/mise/compare/v2025.9.12..v2025.9.13) - 2025-09-19

### 📦 Registry

- remove deprecated virtualos by @jdx in [166379f](jdx/mise@166379f)
- add trufflehog ([aqua:trufflesecurity/trufflehog](https://github.com/trufflesecurity/trufflehog)) by @risu729 in [#6316](jdx/mise#6316)

### 🚀 Features

- **(aqua)** integrate native sigstore-verification for security verification by @jdx in [#6332](jdx/mise#6332)
- **(docs)** improve search result readability with lighter teal background by @jdx in [#6328](jdx/mise#6328)
- **(ui)** update logo as favicon and fix hover transitions by @jdx in [#6325](jdx/mise#6325)
- **(vfox)** add file.read lua function by @malept in [#6333](jdx/mise#6333)
- add documentation for "Environment in tasks" #5134 #5638 by @Its-Just-Nans in [#6329](jdx/mise#6329)

### 🐛 Bug Fixes

- **(github)** correctly paginate releases/tags for private repos by @malept in [#6318](jdx/mise#6318)
- **(hk)** exclude aqua-registry from prettier linting by @jdx in [#6327](jdx/mise#6327)
- **(ui)** improve GitHub star badge layout and alignment by @jdx in [#6326](jdx/mise#6326)

### 📚 Documentation

- change 'hello.py' to 'main.py' in python.md by @my1e5 in [#6319](jdx/mise#6319)
- customize VitePress theme with unique branding by @jdx in [#6324](jdx/mise#6324)

### 📦️ Dependency Updates

- update taiki-e/install-action digest to 0aa4f22 by @renovate[bot] in [#6334](jdx/mise#6334)
- update rust crate comfy-table to v7.2.1 by @renovate[bot] in [#6335](jdx/mise#6335)
- update rust crate console to v0.16.1 by @renovate[bot] in [#6336](jdx/mise#6336)
- update rust crate indexmap to v2.11.4 by @renovate[bot] in [#6337](jdx/mise#6337)

### Chore

- fixing typos by @Its-Just-Nans in [#6331](jdx/mise#6331)

### New Contributors

- @Its-Just-Nans made their first contribution in [#6331](jdx/mise#6331)
- @my1e5 made their first contribution in [#6319](jdx/mise#6319)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants