Cada vegada més persones naveguen amb el mode fosc activat al mòbil i a l'ordinador. Si el teu web d'empresa només ofereix un fons blanc brillant a les 22 h, no és un detall estètic: és una fricció que pot fer que tanquin la pestanya abans de llegir la teva proposta o omplir un formulari.
El mode fosc no substitueix una bona estratègia de disseny, però ben implementat millora l'experiència, reforça la marca i demostra que la teva empresa cuida els detalls. T'expliquem quan convé, com fer-ho sense trencar la conversió i quins errors evitar.
Què és el mode fosc i per què el demanen els teus visitants
El mode fosc inverteix la jerarquia visual habitual: fons foscos, textos clars i accents de color més continguts. Els sistemes operatius (iOS, Android, Windows, macOS) ja l'ofereixen de manera nativa, i molts usuaris l'activen globalment.
Quan algú entra al teu web amb prefers-color-scheme: dark, espera que el lloc respecti aquesta preferència o, com a mínim, que ofereixi un interruptor visible per canviar. Si no ho fas, l'experiència es sent trencada: llamps blancs, fatiga visual i sensació de web desactualitzada.
Quan té sentit en un web d'empresa
No tots els webs necessiten mode fosc, però en aquests casos sol aportar valor real:
- Productes digitals o SaaS. Panells, dashboards i eines que l'usuari consulta durant hores.
- Marques tecnològiques o creatives. Reforça una imatge moderna sense renunciar a la llegibilitat.
- Contingut nocturn. Blogs, mitjans o plataformes que es consumeixen fora de l'horari laboral.
- Públic jove o molt digital. Perfils acostumats a apps amb tema fosc per defecte.
En canvi, si venes serveis molt visuals (decoració, moda, alimentació premium) o la teva identitat es recolza en fotografia lluminosa, un mode fosc mal plantejat pot apagar l'impacte de les teves imatges. La clau no és tenir-lo sí o no: és decidir amb criteri.
Beneficis reals més enllà de l'estètica
- Menys fatiga visual en sessions llargues o amb poca llum ambiental.
- Millor percepció de marca quan encaixa amb una imatge cuidada i contemporània.
- Estalvi de bateria en pantalles OLED de mòbils (impacte moderat, però mesurable).
- Diferenciació davant competidors amb webs genèriques sense adaptació a l'usuari.
Errors freqüents que costen conversions
- Contrast insuficient. Grisos clars sobre grisos foscos que no compleixen WCAG. Revisa text, botons i enllaços.
- Logotips i fotos sense adaptar. Un logo fosc sobre fons fosc desapareix; les fotos amb fons blanc generen «pedaços» lluminosos.
- Forçar el fosc sense opció clara. Alguns usuaris prefereixen el mode clar; eliminar l'elecció genera rebuig.
- Copiar colors del mode clar. Els mateixos hex no funcionen: cal redefinir paleta, ombres i estats hover.
- Oblidar formularis i modals. Pop-ups, inputs i missatges d'error solen quedar fora del redisseny.
L'accessibilitat web no és opcional: un mode fosc illegible exclou usuaris i pot generar problemes legals a la UE.
Com implementar-lo bé a la pràctica
- Define tokens de color. Variables CSS per fons, text, vores, accents i estats. Evita hardcodear colors a cada component.
- Respecta
prefers-color-scheme. Detecta la preferència del dispositiu com valor per defecte. - Afegeix un toggle visible. Icona sol/lluna a la capçalera o el peu, amb estat persistent (localStorage o cookie).
- Adapta imatges i logotips. Versions per cada tema o fons que funcionin en ambdós.
- Prova en dispositius reals. Mòbil, tauleta i escriptori; amb diferents nivells de brillantor.
Si el teu web ja treballa amb una identitat de marca definida, el mode fosc ha de ser una extensió d'aquesta guia, no un tema independent.
Impact en rendiment i analítica
Ben fet, el mode fosc no penalitza la velocitat web: són regles CSS addicionals, no recursos pesats. Vigila que no dupliquis fulls d'estil enormes; usa custom properties i càrrega condicional si cal.
A l'analítica web, pots segmentar per preferència de tema per veure si afecta el temps a la pàgina, el scroll o els enviaments de formulari. Les dades et diran si mereix prioritat davant d'altres millores.
Checklist ràpid abans de publicar
- Contrast verificat en textos, botons i enllaços (mínim AA).
- Toggle visible i estat recordat entre visites.
- Logotip llegible en ambdós modes.
- Formularis, taules, alertes i peus de pàgina revisats.
- Prova amb usuaris reals o almenys amb 3 perfils de dispositiu diferents.
Conclusió: detall que transmet maduresa digital
El mode fosc no és un extra per webs «cool»: és una expectativa creixent en entorns professionals. Implementat amb criteri reforça la confiança; mal fet, resta credibilitat.
Si el teu web encara no l'ofereix, comença per auditar contrast i components crítics. Si ja el tens, revisa que l'experiència sigui coherent en tot el recorregut del client —no només a la home.
Vols que el teu web respecti les preferències dels teus visitants sense sacrificar conversió? A aatsoft dissenyem interfícies clares, accessibles i alineades amb la teva marca —en mode clar, fosc o ambdós.
