Skip to main content

​
Overview

The Settings page allows you to personalize your CicloVital experience by choosing from multiple theme options and managing your account. Access settings through the application header or menu. Route: /settings

​
Accessing Settings

1

Navigate to Settings

Click the Settings link in the application header or menu
2

Choose your preferences

Select your preferred theme and manage your account options
3

Changes save automatically

Theme selections are saved immediately and persist across sessions

​
Theme Customization

CicloVital offers five distinct themes to match your mood and preferences:

​
Available Themes

Dark

Classic dark mode for comfortable viewing in low-light environments

Ocean

Calming blue and teal tones inspired by the ocean

Sunset

Warm oranges and purples reminiscent of sunset

Berry

Rich berry tones with purple and pink accents

Forest

Natural green tones inspired by forest landscapes

​
How Themes Work

  1. Instant application - Theme changes apply immediately across the entire app
  2. Persistent storage - Your theme choice is saved in browser localStorage
  3. Consistent styling - All pages, components, and features adapt to your chosen theme
  4. Accessibility - Each theme maintains proper contrast ratios for readability

​
Switching Themes

// Themes are managed by ThemeContext
const themes = [
  'theme-dark',
  'theme-ocean',
  'theme-sunset',
  'theme-berry',
  'theme-forest'
];
The active theme is applied to the document body as a CSS class, enabling theme-specific styling throughout the application.

​
Account Management

​
Sign Out

The Settings page provides a secure sign-out option:
1

Locate Sign Out button

Find the Cerrar sesión (Sign Out) button in the User Settings section
2

Click to sign out

Click the button with the logout icon to end your session
3

Redirected to home

You’ll be safely logged out and redirected to the home page
The Sign Out button is only enabled when you’re logged in. If you’re not authenticated, the button appears disabled.

​
User Interface

The Settings page is organized into clear sections:

​
Theme Settings Section

  • Title: “Ajustes de Tema” (Theme Settings)
  • Layout: Horizontal button group with all theme options
  • Active state: Currently selected theme is highlighted
  • Disabled state: Active theme button is disabled to prevent redundant clicks

​
User Settings Section

  • Title: “Ajustes de Usuario” (User Settings)
  • Sign Out button: Large, prominent button with logout icon
  • Disabled when logged out: Prevents errors if no user session exists

​
Visual Elements

  • CicloVital logo: Displayed at the bottom of the settings page
  • Clean spacing: Generous padding for comfortable reading and interaction
  • Responsive design: Adapts to different screen sizes and orientations

​
Technical Implementation

Settings integrates with several contexts and hooks:
src/pages/Settings/Settings.jsx:14-16
const { user } = useContext(UserContext);
const { logout } = useAuth();
const { theme, setTheme } = useContext(ThemeContext);

​
Theme Persistence

Themes are stored using the useLocalStorage hook: 
// In ThemeContext
const [theme, setTheme] = useLocalStorage('theme', 'theme-dark');

​
Theme Application

When you change themes, the new theme class is applied to the document: 
document.body.className = theme;

​
Best Practices

Try different themes - Experiment with themes at different times of day to find what works best for your eyes and mood.
Sign out on shared devices - Always sign out when using CicloVital on public or shared computers to protect your privacy.

​
Troubleshooting

If theme selection doesn’t work:
  • Refresh the page
  • Clear your browser cache
  • Check that JavaScript is enabled
  • Ensure localStorage is not disabled in your browser
The sign out button is disabled when:
  • You’re not logged in
  • Your session has expired
Solution: Navigate to the login page to authenticate again.
If your theme resets after closing the browser:
  • Check browser privacy settings
  • Ensure cookies and localStorage are allowed
  • Verify you’re not in private/incognito mode

Theme Context

Learn how themes are managed at the code level

Authentication

Understand user authentication and sessions

useAuth Hook

Technical details of the logout function

useLocalStorage

Learn about persistent storage

Build docs developers (and LLMs) love

Get started for freeTalk to us