Day and night mode
Objective
Allow the user to choose between a light background (day mode) and a dark background (night mode) to reduce visual fatigue and adapt to the environment's light conditions.
What this tool is
It is the visual option of the system. Switching between day and night mode does not change the functions or the information available: it only changes the colors of the screen.
What changes visually
| Aspect | Day mode | Night mode |
|---|---|---|
| Main background | White or very light gray | Very dark gray or black |
| Main text | Almost black | White or very light gray |
| Secondary text | Medium gray | Light gray |
| Borders and separators | Light gray | Dark gray |
| Brand colors (accents) | Same in both modes | Same in both modes |
| Tables | White background, light gray hover | Dark background, medium gray hover |
| Shadows | Soft | Reduced or eliminated |
| Images and avatars | No filter | No filter (real colors are maintained) |
If you have never changed the theme, the system automatically detects your operating system configuration (for example, if your Mac or Windows is in dark mode, the application opens in night mode).
Where it is activated or deactivated
There are two ways to change the theme. Both do exactly the same.
1. Top bar icon
- It is a button with a sun icon (when the current theme is dark) or a moon icon (when the current theme is light).
- It is located in the top bar, between the birthday icon and the notifications bell.
- When clicking, the theme changes immediately.
2. My profile panel
- Open the My profile panel (gear icon at the bottom of the side menu).
- Scroll down to the System appearance section.
- Click the Day or Night button (with sun and moon icons).
- The change is applied immediately.
How the preference is saved
- In this browser: the choice is saved locally. This way, the next time you open the application in the same browser and with the same user, it is respected.
- In your user profile: additionally, the system tries to save the preference in your profile, so that it is also respected if you log in on another equipment or browser.
- If you have never chosen a theme: the system automatically uses your operating system configuration.
If the system cannot save the preference in your profile (for example, due to lack of connection), a notice appears. The local choice in this browser is maintained anyway.
When to use each mode
| Situation | Suggested theme |
|---|---|
| Well-lit clinic consultations | Day mode |
| Prolonged work in front of the screen (long shifts, administrative) | Night mode |
| Main screen in the waiting room | Day mode (better contrast for patients) |
| Night work or with reduced light | Night mode |
| Print or project | Day mode (colors are more accurate on paper and projectors) |
How it affects the main screens
| Screen | Night mode effect |
|---|---|
| Schedule | Calendar background turns dark gray. Cells maintain the medical group color. |
| Modals and dialogs | Dark modal background, light text. |
| Notifications (bell) | Notification list with dark background, unread with lighter background. |
| Spotlight | Modal and results list background in dark. |
| Cash box | Movements table in dark. |
| Patients and consultations | Tables, forms and panel in dark. |
| My profile panel | Sections and fields in dark. |
| Birthdays panel | Birthday cards with dark background. Fireworks animation is maintained. |
What to do if the change does not reflect correctly
| Situation | What to do |
|---|---|
| The theme change does not apply | Refresh the page with F5 or Ctrl + R (Windows/Linux) or ⌘ + R (Mac). |
| The preference is not saved between sessions | Check that the browser is not in incognito mode. Some browsers block storage in that mode. |
| The operating system changes the theme automatically | The system respects the operating system changes only if you have never chosen a theme manually. If you have already chosen, your choice has priority. To return to automatic mode, clear the browser storage. |
| Some texts do not look good | There may be screens that do not fully support night mode. Report to the technical team with a screenshot. |
| The icon does not change | Wait for the animation (it can take about 300 ms). If it does not change, refresh the page. |
States or important messages
| State | What happens |
|---|---|
| Cannot save in profile | Toast warning "Preference not synchronized". The local choice is maintained. |
| Change applied successfully | The entire screen changes colors immediately. |
| Automatic mode | If you have never chosen a theme, the application uses the operating system configuration. |
Common errors
| Situation | What to do |
|---|---|
| The theme changes but reverts to the previous one on refresh | Check that the browser is not blocking storage. Try another browser. |
| The change is not reflected in some screens | Report to the technical team. In the meantime, try with Ctrl + F5 (full reload). |
| The system asks to choose a theme every time | Browser storage is disabled. Coordinate with the support team. |
Permissions
There is no explicit permission. The option is available to all authenticated users.
Operational recommendations
- Choose a theme and keep it. Changing constantly can be uncomfortable.
- If you share the equipment with several users, remember that the preference is per user and browser.
- Night mode recommended for long shifts in front of the screen, especially in administration or cash box.
- Coordinate with the support team if any component does not look good in night mode.
Relation with other modules
- My profile: the "System appearance" section is another way to change the theme. See My profile.
- Spotlight: the modal respects the current theme.
- Audit log and notifications: popover colors adjust to the active theme.
Pending validation: confirm whether the application follows the operating system in real time when the user has not chosen a theme manually, or if it requires a refresh to detect the change.