# UI Componenets - Nokken Documentation
Documentation for the Nokken medical tracking application
Author: Charlotte Croce

Skip to content

# UI Components

Nokken includes several shared UI components for consistency:

## Theming System

### Key Components

- `AppTheme`: Base theme definitions and spacing/padding constants
- `AppColors`: Theme-aware color values
- `AppTextStyles`: Theme-aware text styles
- `AppIcons`: Centralized icon management

### Theme Management

- Theme state is managed through Riverpod with the `themeProvider`
- `ThemeUtils` provides utility functions for theme management
- Settings Screen: User preferences for theme are stored and managed by the settings feature

    // Provider for the theme mode
    final themeProvider = StateProvider<ThemeMode>((ref) => ThemeMode.dark);

    // Utility functions for theme management
    class ThemeUtils {
      static void toggleTheme(WidgetRef ref) {...}
      static void setTheme(WidgetRef ref, ThemeMode mode) {...}
    }

## Widgets

### SharedWidgets

The `SharedWidgets` class provides reusable UI components throughout the app

### Dialog Service

The `DialogService` provides centralized management of dialogs and alerts.

#### Features

- Standard save/discard changes dialog
- Delete confirmation dialog
- Generic back button handler with unsaved changes check