Skip to content

THEMES.md

Latest commit

 

History

History
128 lines (104 loc) · 3.88 KB

THEMES.md

File metadata and controls

128 lines (104 loc) · 3.88 KB
Raw

Blogr Themes

Blogr comes with multiple built-in themes, each designed for different purposes.

Blog Themes

Minimal Retro (default for blogs)

  • Clean, artistic design
  • Retro color scheme
  • Expandable post previews
  • Mobile responsive
  • Syntax highlighting

Obsidian (community themes support)

  • Uses authentic Obsidian workspace structure
  • Compatible with any Obsidian community theme CSS
  • Familiar note-taking interface
  • Callouts, backlinks, and embedded content
  • Dark/light mode with system detection

Terminal Candy (quirky personal sites)

  • Terminal-inspired design with pastel colors
  • Glitch effects and playful animations
  • ASCII art decorations
  • Typewriter animations
  • Perfect for creative personal websites

Personal Website Themes

Dark Minimal (default for personal sites)

  • Dark minimalist-maximalist aesthetic
  • Cyberpunk/brutalist design
  • Neon accent colors (green, magenta, cyan)
  • Animated grid background
  • Auto-glitching gradient text
  • Geometric shapes and clip-paths
  • Dramatic shadows and hover effects
  • Customizable status bar
  • Perfect for portfolios and personal brands

Musashi (dynamic personal sites)

  • Modern dynamic content loading
  • Smooth animations and transitions
  • Clean typography
  • Responsive design
  • Perfect for personal websites and project showcases

Slate Portfolio (professional portfolios)

  • Modern glassmorphic design
  • Frosted glass effects
  • Elegant transitions
  • Professional layout
  • Perfect for freelancers and professionals

Typewriter (NEW in v0.4.0 - vintage personal sites)

  • Vintage typewriter-inspired aesthetics
  • Cream paper background with subtle texture
  • Monospace Courier font family
  • Typewriter typing animation for title
  • Blinking cursor effect
  • Vintage date stamp
  • Typewriter-style line separators
  • Perfect for writers, bloggers, and literary portfolios

Obsidian Theme Setup

The Obsidian theme allows you to use any Obsidian community theme CSS with your blog:

1. Switch to Obsidian theme:

blogr theme set obsidian

2. Add an Obsidian community theme:

# Download a popular theme (example: Minimal by @kepano)
curl -o static/obsidian.css https://raw.githubusercontent.com/kepano/obsidian-minimal/HEAD/obsidian.css

# Or use any other Obsidian theme CSS file
# Save it as static/obsidian.css in your blog directory

3. Configure theme options (optional):

blogr config edit
[theme.config]
obsidian_css = "static/obsidian.css"  # Path to your Obsidian CSS
color_mode = "auto"                   # auto | dark | light

4. Build and deploy:

blogr build
blogr deploy

Popular Obsidian Themes:

  • Minimal by @kepano: https://raw.githubusercontent.com/kepano/obsidian-minimal/HEAD/obsidian.css
  • California Coast: Available in Obsidian community themes
  • Atom: Available in Obsidian community themes
  • Shimmering Focus: Available in Obsidian community themes

Obsidian Theme Features:

  • ✅ Full Obsidian workspace HTML structure
  • ✅ Supports any Obsidian community theme CSS
  • ✅ Automatic dark/light mode detection
  • ✅ Fallback styles when CSS fails to load
  • ✅ Obsidian-style callouts, tags, and embeds
  • ✅ Compatible with existing Blogr functionality

Custom Themes

Themes are Rust modules in blogr-themes/src/. Each theme provides templates, CSS, and configuration options.

Available Themes Summary

Blog Themes:

  • Minimal Retro - Clean, artistic design with retro aesthetics
  • Obsidian - Adopts Obsidian community themes for familiar note-taking styling
  • Terminal Candy - Quirky terminal-inspired theme with pastel colors

Personal Website Themes:

  • Dark Minimal - Dark minimalist-maximalist with cyberpunk aesthetics
  • Musashi - Dynamic modern theme with smooth animations
  • Slate Portfolio - Glassmorphic professional portfolio theme
  • Typewriter - Vintage typewriter aesthetics with nostalgic charm