feat(web-ng): color scheme change #1090

New issue

Closed

opened 2026-03-28 04:31:35 +00:00 by mfreeman451 · 0 comments

mfreeman451 commented

2026-03-28 04:31:35 +00:00

Owner

Imported from GitHub.

Original GitHub issue: #2978
Original author: @mfreeman451
Original URL: https://github.com/carverauto/serviceradar/issues/2978
Original created: 2026-03-02T05:07:28Z

Is your feature request related to a problem?

The "Nocturne Dashboard" Palette

The Backgrounds (The Void)
You need distinct layers of dark to create depth without using heavy shadows.
Base (App Background): #09090B (Almost pitch black, very slight cool tint)
Surface (Cards, Sidebar, Panels): #131316 (Slightly lighter to lift elements off the background)
Surface Highlight (Hover states, borders): #27272A (Used for subtle borders between table rows or panel edges)
The Typography (The Data)
Contrast is key for readability in dark mode.
Text Primary (Headings, active stats): #F4F4F5 (Off-white, easier on the eyes than pure #FFF)
Text Muted (Labels, table headers, secondary info): #A1A1AA (A cool gray)
Text Dark (Disabled states): #52525B
The Accents (The Cyberpunk Neons)
These are used sparingly for data visualization (like those charts), buttons, active states, and toggles.
Primary Accent (The Cyan): #00D8FF (Electric Cyan - used for the main graphs, progress bars, and active links)
Primary Glow (Faded Cyan): #004A5C (Used for the gradient fill under the line charts)
Error/Danger (The Magenta): #FF2A7A (Neon Pink/Magenta - used for the "Errors" graph and alerts)
Warning (The Amber): #FF9A00 (Used in the table status indicators)
Success (The Green): #00E676 (Used for the percentage increase text like +87.00%)
How to use this in Phoenix LiveView (Tailwind)
Open your assets/tailwind.config.js file and extend your theme colors like this:
code
JavaScript
module.exports = {
// ... other config (content, plugins, etc.)
theme: {
extend: {
colors: {
// Backgrounds
void: {
base: '#09090B',
surface: '#131316',
border: '#27272A',
},
// Neon Accents
cyber: {
cyan: '#00D8FF',
cyanglow: 'rgba(0, 216, 255, 0.15)', // Great for chart fills or subtle backgrounds
magenta: '#FF2A7A',
amber: '#FF9A00',
green: '#00E676',
}
},
// Optional: Add custom box shadows for that "neon glow" effect
boxShadow: {
'cyan-glow': '0 0 10px rgba(0, 216, 255, 0.3)',
'magenta-glow': '0 0 10px rgba(255, 42, 122, 0.3)',
}
},
},
// ...
}
UI Execution Tips for LiveView
To make your Phoenix app look exactly like this screenshot, keep these styling rules in mind:
Borders over Shadows: Notice how the screenshot doesn't really use drop-shadows to separate the cards. Instead, it uses a 1px solid border (border-void-border).
Tailwind example:
...

Muted Data, Bright Highlights: Most of your text should be text-zinc-400 (or text-gray-400). Only the actual numbers (like the "13" or "0.02 ms") should be bright white (text-white or text-zinc-100).
The Glow Effect: For progress bars (like those blue ones in the table) or active buttons, use the custom shadow we defined above to give it a slight emissive light effect.
Tailwind example:

Fonts: To complete the look, use a sleek sans-serif font like Inter (which is what standard Phoenix/Tailwind uses) or for a slightly more tech feel, try Geist Sans or JetBrains Mono for the numbers and data points.

Describe the solution you'd like

A clear and concise description of what you want to happen.

Describe alternatives you've considered

A clear and concise description of any alternative solutions or features you've considered.

Additional context

Add any other context or screenshots about the feature request here.

Imported from GitHub. Original GitHub issue: #2978 Original author: @mfreeman451 Original URL: https://github.com/carverauto/serviceradar/issues/2978 Original created: 2026-03-02T05:07:28Z --- **Is your feature request related to a problem?** The "Nocturne Dashboard" Palette 1. The Backgrounds (The Void) You need distinct layers of dark to create depth without using heavy shadows. Base (App Background): #09090B (Almost pitch black, very slight cool tint) Surface (Cards, Sidebar, Panels): #131316 (Slightly lighter to lift elements off the background) Surface Highlight (Hover states, borders): #27272A (Used for subtle borders between table rows or panel edges) 2. The Typography (The Data) Contrast is key for readability in dark mode. Text Primary (Headings, active stats): #F4F4F5 (Off-white, easier on the eyes than pure #FFF) Text Muted (Labels, table headers, secondary info): #A1A1AA (A cool gray) Text Dark (Disabled states): #52525B 3. The Accents (The Cyberpunk Neons) These are used sparingly for data visualization (like those charts), buttons, active states, and toggles. Primary Accent (The Cyan): #00D8FF (Electric Cyan - used for the main graphs, progress bars, and active links) Primary Glow (Faded Cyan): #004A5C (Used for the gradient fill under the line charts) Error/Danger (The Magenta): #FF2A7A (Neon Pink/Magenta - used for the "Errors" graph and alerts) Warning (The Amber): #FF9A00 (Used in the table status indicators) Success (The Green): #00E676 (Used for the percentage increase text like +87.00%) How to use this in Phoenix LiveView (Tailwind) Open your assets/tailwind.config.js file and extend your theme colors like this: code JavaScript module.exports = { // ... other config (content, plugins, etc.) theme: { extend: { colors: { // Backgrounds void: { base: '#09090B', surface: '#131316', border: '#27272A', }, // Neon Accents cyber: { cyan: '#00D8FF', cyanglow: 'rgba(0, 216, 255, 0.15)', // Great for chart fills or subtle backgrounds magenta: '#FF2A7A', amber: '#FF9A00', green: '#00E676', } }, // Optional: Add custom box shadows for that "neon glow" effect boxShadow: { 'cyan-glow': '0 0 10px rgba(0, 216, 255, 0.3)', 'magenta-glow': '0 0 10px rgba(255, 42, 122, 0.3)', } }, }, // ... } UI Execution Tips for LiveView To make your Phoenix app look exactly like this screenshot, keep these styling rules in mind: Borders over Shadows: Notice how the screenshot doesn't really use drop-shadows to separate the cards. Instead, it uses a 1px solid border (border-void-border). Tailwind example: <div class="bg-void-surface border border-void-border rounded-lg p-4">...</div> Muted Data, Bright Highlights: Most of your text should be text-zinc-400 (or text-gray-400). Only the actual numbers (like the "13" or "0.02 ms") should be bright white (text-white or text-zinc-100). The Glow Effect: For progress bars (like those blue ones in the table) or active buttons, use the custom shadow we defined above to give it a slight emissive light effect. Tailwind example: <div class="bg-cyber-cyan shadow-cyan-glow h-2 rounded-full"></div> Fonts: To complete the look, use a sleek sans-serif font like Inter (which is what standard Phoenix/Tailwind uses) or for a slightly more tech feel, try Geist Sans or JetBrains Mono for the numbers and data points. **Describe the solution you'd like** A clear and concise description of what you want to happen. **Describe alternatives you've considered** A clear and concise description of any alternative solutions or features you've considered. **Additional context** Add any other context or screenshots about the feature request here.