Skip to content

feat(theme): redesign default theme — clean minimal, light/dark mode, Pomeranian orange accent#69

Merged
x3ek merged 9 commits intomainfrom
feat/67-redesign-default-theme
Mar 12, 2026
Merged

feat(theme): redesign default theme — clean minimal, light/dark mode, Pomeranian orange accent#69
x3ek merged 9 commits intomainfrom
feat/67-redesign-default-theme

Conversation

@x3ek
Copy link
Contributor

@x3ek x3ek commented Mar 7, 2026

Summary

  • Complete CSS rewrite with CSS custom properties for light/dark theming
  • Dark mode toggle (sun/moon) in nav, persists to localStorage; anti-flash script prevents white flash on reload
  • Theme-aware header: neutral dark bg in both modes, lighter in light mode, accent orange bottom border
  • Site title renders as Name · tagline on one line with bullet separator; logo image override supported
  • Post list: title + date on same flex row; no subtitle under the Posts heading
  • Code blocks match header color; Pygments wrapper override eliminates the light frame artifact
  • Responsive: clean wrapping on iPad and phone
  • SiteConfig model extended with tagline and logo fields

Closes #67

Test plan

  • Light mode: header, body, post list, post page, 404 page
  • Dark mode: toggle button switches mode, preference persists on reload without flash
  • OS dark mode auto-detection when no manual preference set
  • Tagline shows in nav when site.tagline is set in config.yml
  • Logo image replaces text title when site.logo is set
  • Responsive: 375px, 768px, 1280px viewports

🤖 Generated with Claude Code

… Pomeranian orange accent

- Complete CSS rewrite with CSS custom properties for light/dark theming
- Dark mode toggle (sun/moon) in nav with localStorage persistence
- Anti-flash inline script prevents white flash on dark mode reload
- Theme-aware header using neutral dark bg in both modes
- Site title supports stacked name + tagline on one line with bullet separator
- Logo image override via site.logo config field
- Post list: title + date on same flex row (space-between)
- Footer two-column layout (copyright left, Powered by right)
- Code blocks match header color, Pygments wrapper override to eliminate frame
- Google Fonts (Roboto) loaded via preconnect
- Responsive: clean wrapping on iPad and phone
- Add tagline and logo fields to SiteConfig model

Closes #67

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@x3ek x3ek added this to the SquishMark 1.0 milestone Mar 7, 2026
x3ek and others added 3 commits March 12, 2026 09:33
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Copy link

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 refreshes the bundled default theme to a cleaner, minimal look with dark-mode support + a manual toggle, and aligns the default Pygments highlighting to a GitHub Dark palette so the default theme can serve a matching static pygments.css.

Changes:

  • Redesign themes/default/static/style.css with new color tokens, layout tweaks, and dark-mode variables (system + manual override).
  • Add a theme toggle UI + persisted theme selection in themes/default/base.html, plus support for optional site.tagline and site.logo.
  • Switch the default theme’s Pygments style from monokai to github-dark across config defaults and theme CSS resolution.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 6 comments.

Show a summary per file
File Description
themes/default/static/style.css New “clean minimal” styling, updated variables, dark-mode tokens, and new nav/footer/post-list styling.
themes/default/static/pygments.css Replace Monokai CSS with a GitHub Dark-style Pygments stylesheet.
themes/default/index.html Adjust post list markup to support a title/date header row layout.
themes/default/base.html Add Google Font, optional logo/tagline, and a JS-based dark-mode toggle + persistence.
tests/test_pygments_css.py Update expectation for default theme static Pygments CSS style.
src/squishmark/services/theme/engine.py Change default theme’s declared Pygments default to github-dark.
src/squishmark/services/markdown.py Change fallback/default Pygments style to github-dark.
src/squishmark/models/content.py Add site.tagline / site.logo; change default theme.pygments_style to github-dark.

You can also share your feedback on Copilot code review. Take the survey.

x3ek and others added 5 commits March 12, 2026 10:18
…value

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…utton

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…/catch

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
… theme toggle

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ring

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@x3ek x3ek merged commit cca7ac5 into main Mar 12, 2026
5 checks passed
@x3ek x3ek deleted the feat/67-redesign-default-theme branch March 12, 2026 15:26
@x3ek x3ek mentioned this pull request Mar 21, 2026
20 tasks
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.

Redesign default theme — clean minimal, light/dark, Pomeranian orange accent

2 participants