Customizando el dark mode de la documentación de php

freishner · 3 Mayo 2024

Nunca me gustó la estética que obtengo con las extensiones para el dark mode. Y tener una web como capa9 con dark mode al lado de la documentación de php me fríe los ojos en la oscuridad del bunker desde donde trabajo, así que por qué no modificarla a mi gusto, total que sus buenos minutos he pasado, y seguiré pasando leyendome la bendita docu.

Sin dark mode

Con dark mode

La estética que conseguí con las modificaciones es la siguiente, algunas cosas como el coloreado de la sintaxis está momentáneamente perdido, pero se puede lograr desde javascript dentro de un evento window onload, cosa que igualmente se pierde con las extensiones dark mode que tengo instaladas 🤷‍♂️.

Para cargar la modificación en chromium (o cualquier browser basado en chromium), usé una extensión llamada "User JavaScript and CSS". Una vez instalada, hay que ir a la página php.net, pinchar en el ícono de la extensión y dar clic en el ícono +.

Cuando se habra la ventana de la extensión, verán una pantalla blanca dividida, tan blanca que ni el dark mode funciona en ella (no digan que no se los advertí).
En la división de la derecha deberán cargar el siguiente código CSS y le dan al botón amarillo "Save" de arriba a la derecha. Luego cierran la ventana y recargan la pestaña en donde tienen la documentación de php.

CSS:

#layout-content {
    background-color: #2d2d2d00;
    border: 1px solid #555;
}

h1.refname,
h3.title,
p.verinfo,
p.refpurpose,
div.example > p > strong,
div.appendix h1.title,
div.appendix strong.title,
section#layout-content h1,
section#layout-content h2,
section#layout-content h3,
section#layout-content h4,
section#layout-content h5,
section#layout-content h6,
section#layout-content article.newsentry time {
    color: #ddd022;
}

dt > code.parameter,
p.para code.parameter {
    color: #dd9b22;
}

p.para,
ul.itemizedlist > li.listitem,
span.function,
section#layout-content p,
section#layout-content li {
    color: #FAFAFA;
}

a.genanchor, a.genanchor:hover, a.genanchor:focus,
a.classname, a.classname:hover, a.classname:focus,
a.function, a.function:hover, a.function:focus,
div.note strong.user,
div.note a.genanchor,
p.para code > a,
#usernotes span.action > a,
div.appendix a,
section#layout-content a {
    color: #9bbaf3 !important;
}

div.contribute {
    display: none !important;
}

blockquote.note,
div.methodsynopsis,
div.note div.text {
    background: #424242 !important;
}

blockquote.note p:first-child,
blockquote.note p > strong.note {
    color: #ddd022;
}

div.methodsynopsis,
div.methodsynopsis span.methodname strong,
div.methodsynopsis span.methodparam {
    color: #FAFAFA !important;
}

div.methodsynopsis a,
div.methodsynopsis code.parameter {
    color: #9bbaf3 !important;
}

div.methodsynopsis code.parameter {
    color: #d2e0f9 !important;
}

div.example-contents div.phpcode {
    background-color: #424242 !important;
}

div.example-contents .phpcode > code > span > span,
div.note div.phpcode > code > span,
div.note div.phpcode > code > span > span {
    color: #FAFAFA !important;
}

div.note div.date strong {
    color: #ddd022 !important;
}

aside.layout-menu ul.child-menu-list li.current > a {
    color: #ddd022 !important;
    border-bottom-color: #ddd022 !important;
}

nav#head-nav {
    background: #606fa9 !important;
    border: unset !important;
    box-shadow: unset !important;
}

Customizando el dark mode de la documentación de php

freishner

Capo