Skip to content

Switch to Nordic Midnight as default theme for clean dark mode - #11

Merged
hosein-ul merged 1 commit into
mainfrom
feat/nordic-midnight-default-theme
Jul 8, 2026
Merged

Switch to Nordic Midnight as default theme for clean dark mode#11
hosein-ul merged 1 commit into
mainfrom
feat/nordic-midnight-default-theme

Conversation

@hosein-ul

Copy link
Copy Markdown
Owner

Summary

This PR changes the default design theme from 'charcoal' (blue accent) to 'midnight' (clean black & white Nordic design) to provide a cleaner, more professional dark mode experience in the app dashboard.

Problem

The current default theme uses blue accents (#38bdf8) which may not align with a clean, minimalist Nordic aesthetic. Users reported that dark mode appeared too colorful/blue instead of the expected clean monochrome design.

Solution

  • Change default theme: charcoal → midnight
  • Update :root CSS variables to use Nordic Midnight color scheme (clean black/white palette)
  • Update ClientLayout.tsx to set midnight as the default design theme
  • Preserve all 4 themes: charcoal, midnight, frost, aurora remain available

Visual Changes

Before (Charcoal - Blue Accent)

  • Accent color: #38bdf8 (cyan blue)
  • Text accent: #38bdf8
  • Border accent: rgba(56, 189, 248, 0.6)
  • Overall feel: Tech-focused with blue highlights

After (Midnight - Clean Nordic)

  • Accent color: #f4f4f5 (off-white)
  • Text accent: #ffffff (pure white)
  • Border accent: rgba(255, 255, 255, 0.8)
  • Overall feel: Clean, professional, minimalist

Color Scheme Comparison

Property Charcoal (Old) Midnight (New)
Background #0b0b0f #000000 (pure black)
Accent #38bdf8 (blue) #f4f4f5 (white)
Text Primary #f8f9fa #ffffff (pure white)
Text Secondary #a0a5b5 #e4e4e7
Border rgba(255,255,255,0.3) rgba(255,255,255,0.35)

Benefits

Cleaner aesthetic - Pure monochrome Nordic design
Better contrast - White on pure black provides sharper definition
Professional appearance - Minimalist design suitable for financial/crypto apps
Reduced visual noise - No colored accents competing for attention
Maintains flexibility - All 4 design themes remain available

Testing

  • ✅ Build completed successfully
  • ✅ No TypeScript errors
  • ✅ Theme switching still works correctly
  • ✅ All existing themes (charcoal, frost, aurora) remain functional

Backward Compatibility

  • No breaking changes - Users who previously selected 'charcoal' will keep it
  • Default only - Only affects new users or cleared localStorage
  • Fully reversible - Users can manually select charcoal from theme settings

Type

  • Bug fix
  • New feature (non-breaking change)
  • Breaking change
  • UX improvement

- Change default design theme from 'charcoal' (blue accent) to 'midnight' (clean black & white)
- Update :root CSS variables to use Nordic Midnight color scheme
- Set midnight theme in ClientLayout as default
- Charcoal theme still available but requires explicit selection
- Dark mode now uses clean monochrome palette instead of blue accents
- Maintains all 4 theme options: charcoal, midnight, frost, aurora

Result: App dashboard now displays clean Nordic black/white design in dark mode
@netlify

netlify Bot commented Jul 8, 2026

Copy link
Copy Markdown

Deploy Preview for shadow-line ready!

Name Link
🔨 Latest commit 0b76ddb
🔍 Latest deploy log https://app.netlify.com/projects/shadow-line/deploys/6a4df8babac9fd0008504343
😎 Deploy Preview https://deploy-preview-11--shadow-line.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@vercel

vercel Bot commented Jul 8, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
shadow-line Ready Ready Preview, Comment Jul 8, 2026 7:14am

@hosein-ul
hosein-ul merged commit 93ecbc4 into main Jul 8, 2026
8 checks passed
@hosein-ul
hosein-ul deleted the feat/nordic-midnight-default-theme branch July 8, 2026 07:15
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.

1 participant