Skip to content

Latest commit

 

History

History
105 lines (78 loc) · 3.66 KB

DARK_THEME_README.md

File metadata and controls

105 lines (78 loc) · 3.66 KB

Dark Theme Implementation Guide

Overview

This document provides an overview of the dark theme implementation for the AI Bloodwork Analysis application. The dark theme was designed to improve readability, reduce eye strain, and create a more modern and professional look for the application.

Color Palette

The dark theme uses the following color palette:

  • Background Colors:

    • Primary Background: bg-gray-900 (Very dark gray, almost black)
    • Secondary Background: bg-gray-800 (Dark gray)
    • Card Background: bg-gray-800 or custom card-dark class
    • Input Background: bg-gray-800

  • Text Colors:

    • Primary Text: text-white (For headings and important text)
    • Secondary Text: text-gray-300 (For regular text)
    • Muted Text: text-gray-400 (For less important text)
    • Very Muted Text: text-gray-500 (For placeholder text)

  • Border Colors:

    • Primary Border: border-gray-700 (For most borders)
    • Secondary Border: border-gray-600 (For highlighted borders)

  • Accent Colors:

    • Primary Accent: text-primary-400 to text-primary-600 (Indigo shades)
    • Secondary Accent: text-secondary-400 to text-secondary-600 (Teal shades)

Component Styling

Layout Component

  • Uses bg-gray-900 for the main background
  • Text color is set to text-gray-100 for good contrast

Cards

  • Use the card-dark class which provides:
    • Dark background (bg-gray-800)
    • Border (border-gray-700)
    • Rounded corners (rounded-lg)
    • Subtle hover effect

Buttons

  • Primary buttons: btn btn-primary (Indigo background)
  • Secondary buttons: btn btn-secondary (Teal background)
  • Outline buttons: btn btn-outline (Transparent with border)

Form Elements

  • Inputs have dark backgrounds (bg-gray-800)
  • Borders use border-gray-700
  • Focus states use primary color ring (focus:ring-primary-500)

Progress Indicators

  • Use primary colors for active states
  • Use gray colors for inactive states
  • Animations maintain visibility on dark backgrounds

Implementation Details

Upload Page

  • Tab navigation uses border indicators for active state
  • Cards use the card-dark class for consistent styling
  • Icons are used to improve visual hierarchy

Upload Form

  • Drag-and-drop area uses dark styling with dashed borders
  • Progress bar changes color based on upload stage
  • Error and success states use appropriate icons and colors

Results Dashboard

  • Charts use dark theme colors for grid lines and ticks
  • Tab navigation for different sections
  • Status indicators use appropriate colors (red, yellow, green)

Chat Interface

  • Chat bubbles use different colors for user and assistant
  • User messages use primary color background
  • Assistant messages use dark gray background
  • Loading indicators use primary color with animation

Accessibility Considerations

  • Text contrast ratios meet WCAG AA standards
  • Interactive elements have clear focus states
  • Color is not the only indicator of state or information
  • Icons are used alongside text for better comprehension

Future Enhancements

  • Add user preference for light/dark theme
  • Implement smooth transitions between themes
  • Create more sophisticated data visualizations optimized for dark backgrounds
  • Add more subtle animations and micro-interactions

Implementation Notes

The dark theme was implemented using Tailwind CSS classes. The approach focused on:

  1. Consistency across components
  2. Appropriate contrast for readability
  3. Visual hierarchy through color and spacing
  4. Modern, professional aesthetic

No custom CSS was required beyond what was already in the custom.css file, which already included dark theme support for scrollbars, cards, and other elements.