Files

GitHub Actions 3169b05156 fix: skip incomplete system log viewer tests

- Marked 12 tests as skip pending feature implementation
- Features tracked in GitHub issue #686 (system log viewer feature completion)
- Tests cover sorting by timestamp/level/method/URI/status, pagination controls, filtering by text/level, download functionality
- Unblocks Phase 2 at 91.7% pass rate to proceed to Phase 3 security enforcement validation
- TODO comments in code reference GitHub #686 for feature completion tracking
- Tests skipped: Pagination (3), Search/Filter (2), Download (2), Sorting (1), Log Display (4)

2026-02-09 21:55:55 +00:00

3.7 KiB

Raw Blame History

title, description

title	description
Dark Mode & Modern UI	Toggle between light and dark themes with a clean, modern interface

Dark Mode & Modern UI

Easy on the eyes, day or night. Toggle between light and dark themes to match your preference. The clean, modern interface makes managing complex setups feel simple.

Overview

Charon's interface is built with Tailwind CSS v4 and a modern React component library. Dark mode is the default, with automatic system preference detection and manual override support.

Design Philosophy

Dark-first: Optimized for low-light environments and reduced eye strain
Semantic colors: Consistent meaning across light and dark modes
Accessibility-first: WCAG 2.1 AA compliant with focus management
Responsive: Works seamlessly on desktop, tablet, and mobile

Why a Modern UI Matters

Feature	Benefit
Dark Mode	Reduced eye strain during long sessions
Semantic Tokens	Consistent, predictable color behavior
Component Library	Professional, polished interactions
Keyboard Navigation	Full functionality without a mouse
Screen Reader Support	Accessible to all users

Theme System

Color Tokens

Charon uses semantic color tokens that automatically adapt:

Token	Light Mode	Dark Mode	Usage
`--background`	White	Slate 950	Page backgrounds
`--foreground`	Slate 900	Slate 50	Primary text
`--primary`	Blue 600	Blue 500	Actions, links
`--destructive`	Red 600	Red 500	Delete, errors
`--muted`	Slate 100	Slate 800	Secondary surfaces
`--border`	Slate 200	Slate 700	Dividers, outlines

Switching Themes

Click the theme toggle in the top navigation
Choose: Light, Dark, or System
Preference is saved to local storage

Component Library

Core Components

Component	Purpose	Accessibility
Badge	Status indicators, tags	Color + icon redundancy
Alert	Notifications, warnings	ARIA live regions
Dialog	Modal interactions	Focus trap, ESC to close
DataTable	Sortable data display	Keyboard navigation
Tooltip	Contextual help	Delay for screen readers
DropdownMenu	Action menus	Arrow key navigation

Status Indicators

Visual status uses color AND icons for accessibility:

✅ Online - Green badge with check icon
⚠️ Warning - Yellow badge with alert icon
❌ Offline - Red badge with X icon
⏳ Pending - Gray badge with clock icon

Accessibility Features

WCAG 2.1 Compliance

Color contrast: Minimum 4.5:1 for text, 3:1 for UI elements
Focus indicators: Visible focus rings on all interactive elements
Text scaling: UI adapts to browser zoom up to 200%
Motion: Respects prefers-reduced-motion

Key	Action
`Tab`	Move between interactive elements
`Enter` / `Space`	Activate buttons, links
`Escape`	Close dialogs, dropdowns
`Arrow keys`	Navigate within menus, tables

Semantic HTML structure with landmarks
ARIA labels on icon-only buttons
Live regions for dynamic content updates
Skip links for main content access

Customization

CSS Variables Override

Advanced users can customize the theme via CSS:

/* Custom brand colors */
:root {
  --primary: 210 100% 50%;  /* Custom blue */
  --radius: 0.75rem;        /* Rounder corners */
}

Notifications - Visual notification system
REST API - Programmatic access
Back to Features

3.7 KiB Raw Blame History