Logo, favicon i mode clar/fosc

Després d’integrar Astrolus, calia una identitat pròpia: un logo a la barra, un favicon a la pestanya i un mode clar/fosc que no parpellegi. Aquest capítol explica on viuen els fitxers i com es canvien.

El logo actual del navbar: cropped-compt.png, icona Dusk de document + calculadora. És el mateix estil que fem servir a les accions de les taules.

La barra fixa (header.php) ja no usa el punt + barra d’Astrolus. El logo és una imatge de la mediateca:

<img src=""
     alt="Nítida" class="h-8 w-auto" />

Va a h-8 (32px d’alçada) per no estirar la barra. El text Nítida continua al costat, en Urbanist. Per canviar el logo: puja un PNG nou a wp-content/uploads/ i actualitza aquesta ruta, o substitueix el fitxer cropped-compt.png.

Favicon a la pestanya

El favicon és un SVG del tema, no el PNG del logo. Així escala bé a 16px i es veu nítid a Chrome, Firefox i Safari.

Fitxer wp-content/themes/astrolus/assets/favicon.svg: rectangle índigo #4f46e5 amb el punt + barra d’Astrolus en blanc.

Al <head>:

<link rel="icon" type="image/svg+xml" href=".../assets/favicon.svg" />
<link rel="apple-touch-icon" href=".../assets/favicon.svg" />

Si vols el mateix dibuix que el logo (document + calculadora) a la pestanya, canvia aquests dos link cap a cropped-compt.png.

Mode clar i fosc

Astrolus ja venia amb les dues versions. Nosaltres no fem servir prefers-color-scheme a cegues: Tailwind està en darkMode: 'class'. La classe dark va a <html>.

Astrolus en mode clar — Mode clar: fons blanc i blobs suaus.

Astrolus en mode fosc — Mode fosc: fons quasi negre. El desem a `localStorage`.

Evitar el flash blanc

Un script al principi del <head>, abans de Tailwind, llegeix localStorage.nitida-theme. Si no hi ha valor, mira prefers-color-scheme. Així la classe dark ja hi és quan es pinta la pàgina:

(function () {
  var stored = localStorage.getItem('nitida-theme');
  var dark = stored
    ? stored === 'dark'
    : window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.documentElement.classList.toggle('dark', dark);
})();

El botó de la barra

El botó #nitida-theme inverteix la classe, desa dark o light a localStorage i dispara l’event nitida-theme per si Highcharts ha de redibuixar. La lluna es veu en mode clar; el sol, en mode fosc.

On tocar-ho

Què	Fitxer
Logo navbar	`wp-content/uploads/2026/09/cropped-compt.png` + `header.php`
Favicon	`themes/astrolus/assets/favicon.svg`
Script anti-flash	Principi de `header.php`
Config Tailwind	`darkMode: 'class'` a `header.php`
Botó clar/fosc	`#nitida-theme` al final de `header.php`
Estils dark	Blocs `html.dark …` al CSS del tema

Icones Dusk

Si cal un icona (accions de taula, logo), fem servir el set Icons8 Dusk, a 16px a les taules per no pujar l’alçada de la fila. Funció: astrolus_dusk_icon( 'edit' ).

Logo al navbar