Tutorial: Oscurecer o cambiar colores de páginas web aplicando Estilos al navegador

Un saludo foreros de denunciando.

Para aquellos/as interesados en oscurecer (hacer el texto claro - fondo oscuro) o cambiar los colores o estilos de páginas web desde su navegador, lo pueden lograr con la adición de códigos creados y actualizados para modificar esas características de una página web, ya sea dirigido para sitios específicos, o poner un estilo global para todo.
("sitio" y "página" las pongo como sinónimas).

¿Para que es útil un estilo de página?: para reducir las molestias e irritación de los Ojos al estar enfrente de un monitor, ser capaz de navegar con la luz apagada durante horas del día en que exista una fuente de luz natural, como la de una ventana. E incluso, por el sólo hecho de ponerle un estilo simpático o colorido a páginas web.

Los estilos se pueden aplicar en todos los navegadores, por lo menos sé que en los más conocidos, con algunas diferencias que ojalá podamos dilucidar a lo largo de este tema, invito a expertos en otros navegadores, que se adhieran a este tema, como también intervenir en consideraciones que se necesiten para el sistema operativo donde opera el navegador.


Muy bien. Haré énfasis en aplicar estilos, para este navegador, pero recordar la idea de pluralidad de mis palabras anteriores.

Lo primero es dirigirse a la página donde se hallan los diversos estilos de página, la cual cuenta con temas revisados. Supongo que podrían existir otras webs.

Digamos que el interés de busqueda de estilos, lo podemos dirigir a que se adopten para sitios muy conocidos, ellos podrían ser: Google, Youtube, Facebook, Gmail, Yahoo, u otros.
Entonces ingresan una de esas palabras en el buscador interno de Userstyles.org. Si quieren enfocarse en estilos oscuros, agréguenle a su búsqueda la palabra dark o black.
Ejemplo: google dark , youtube dark , ...

Si el sitio web no es molesto para la vista, o el estilo altera notoriamente la página web que están viendo, podrían excluírla para que a ésta no la afecte el estilo, o desactivar dicho estilo temporalmente mientras navegan por esa página. En general, lo ideal es tener activo 1 estilo para cada cosa.

El sitio web

Solo los usarios con mas de 1000 puntos de reputacion o los usuarios con membresia Gold, pueden ver este link Que es la reputacion? - Membresias Pagas

es donde se hallan los estilos de páginas (los cuales de vez en cuando son actualizados por cada autor), es totalmente gratuita, y no tiene fines comerciales.


Defino los diferentes métodos para agregar estilos a páginas web:



Método 1. De forma manual:
En la página del estilo de su interés, hacen click en el botón "Show code", seleccionan todo su texto (ése es el código del estilo), y lo copian.
Luego van a la ubicación de su perfil de firefox, deben ir a la configuración de sus carpetas para desocultarlo.
¿Dónde se encuentra el perfil en Mozilla Firefox? --> Fuente:

Solo los usarios con mas de 1000 puntos de reputacion o los usuarios con membresia Gold, pueden ver este link Que es la reputacion? - Membresias Pagas

Van a la carpeta llamada "Chrome", y abren el archivo (o fichero) llamado userContent-example.css , y debajo del texto que allí aparece, pegan el código del estilo de página que copiaron de la web. Si quieren recordar que código fue el que adicionaron allí, funciona poner arriba del texto del código, el nombre de este estilo, antecedido del signo @ ó @name
Luego de salvar los cambios, modifican el nombre del archivo, ahora lo llamarán userContent , sin el "-example".
* .css : son aquellos archivos en formato hoja de estilo de cascada.

Ventajas: este método es útil si ya están muy seguros de que estilo aplicarán para un determinado sitio; la página web carga automáticamente con dicho estilo, como si fuese el original; los estilos pueden actualizarse desde la misma extensión.

Desventajas: por lo que he leído, no es tan sencillo agregar exclusiones en código CSS; estilos globales pueden pasar por alto algunos objetos, o al operar junto con estilos de sitio, darán mezclas de estilos en estos sitios, salvo que sepan agregar las exclusiones. Para desactivar un estilo, deben borrar el código que está en el fichero usercontent, o adicionarle a su código algún texto o caracter que rompa el código, salvar los cambios, y de esa forma el navegador no lo tomará.

Método 2. Con la extensión Stylish:

Solo los usarios con mas de 1000 puntos de reputacion o los usuarios con membresia Gold, pueden ver este link Que es la reputacion? - Membresias Pagas

Esta extensión toma el código tal como aparece en la página de

Solo los usarios con mas de 1000 puntos de reputacion o los usuarios con membresia Gold, pueden ver este link Que es la reputacion? - Membresias Pagas

, es decir funciona con código en lenguaje CSS.
Cuando ya tienen instalada a Stylish, van a la página del estilo de su interés en userstyles, y le dan click a "Install with Stylish" e "Instalar".

Ventajas: al activar o desactivar un código, lo aplica enseguida, no requiere actualizar la página. Se integra más íntimamente como un complemento (Addon) de Firefox.
Esta extensión existe con el mismo nombre (Stylish) para el navegador Google Chrome.

Desventajas: las que otorga el lenguaje CSS, no es obvio aplicar exclusiones (o excepciones) para que el estilo no se aplique a alguna página web; o inclusiones dado el caso. Por lo tanto, es común que se mezcle el diseño de un estilo global junto con estilos de sitio, al estar ambos activados.

Para arreglarlo, seguramente se requiere editar alguna franja de código en formato CSS. Tal vez, en el pequeño foro de la parte inferior de la página del estilo, al registrarse como usuario, puede preguntársele al autor (o tal vez éste ya dio respuesta).




Método 3. Con la extensión Greasemonkey:

Solo los usarios con mas de 1000 puntos de reputacion o los usuarios con membresia Gold, pueden ver este link Que es la reputacion? - Membresias Pagas

Greasemonkey toma el código en formato JavaScript, o en una variante llamada JScript la cual según leo, es un estándar propiedad de Microsoft.
Cuando ya la tienen instalada, para instalarle el estilo desde su página en

Solo los usarios con mas de 1000 puntos de reputacion o los usuarios con membresia Gold, pueden ver este link Que es la reputacion? - Membresias Pagas

, le dan click a "install as a user script."
Por lo que percibo, también otros navegadores diferentes a Mozilla optan por este lenguaje JS para adoptar el código del estilo.

Greasemonkey 0.8.2010x
Varios usuarios han decidido quedarse con Greasemonkey en la última de sus versiones 0.8, la cual pueden buscar en la anterior página de Addons de Mozilla, dan click en el enlace de abajo que dice: "Ver todas las versiones", y en la Versión 0.8.20100408.6, la instalan dando click en "Añadir a Firefox". Esta es la extensión que actualmente utilizo.

Ventajas: permite agregar inclusiones o exclusiones de páginas web de forma muy sencilla, simplemente estando dentro de la página web que se desea excluir (o incluir dado el caso), se procede a abrir las opciones de la extensión, y se da click en el botón "Añadir" del cuadro llamado: "Páginas excluídas". Greasemonkey añadirá esa página para cumplir con la condición deseada.
Esto permite, que se puedan tener muchos estilos de página, sobretodo los globales, sin que estos tengan interferencia con los estilos de sitios que deseen excluir.

Se puede deshabilitar o habilitar al extensión, con un simple click en su icono de la barra de estado.
La extensión sirve para muchas otras funcionalidades, además de las de aplicar estilos en páginas.

Desventajas: para que la página adopte el estilo, si cambiaste o pusiste uno por primera vez, de paso extra, debes Actualizar la página para poder percibir los cambios; activas un estilo, y también con el ratón debes desactivar el otro que tenías.

Puedes tener varios estilos instalados, los que quieras sin excederse, pero lo ideal es que esté funcionando 1 sólo para la página en la que estás, de tal forma que la extensión le dé prioridad a ese estilo y éstos no se mezclen entre uno y otro.
Ahora, si lo que quieren es que se mezclen entre un estilo y otro, la extensión sigue funcionando, pero no sé que tanto se afecte la navegabilidad.


Greasemonkey 0.9.x
Desde la versión 0.9 en adelante, esta extensión sufrió un giro que ha dividido los gustos. A algunos les parece bien, porqué podría representar una "evolución" y mejoras. No obstante, voy a explicar lo siguiente.

El procedimiento de exclusión e inclusión de sitios web, opera de forma algo distinta, acá se debe escribir un pequeño código para que la extensión proceda a cumplir con esa orden que le das.
Sugiero leer y dar click en los enlaces que se hallan en el siguiente nuevo tutorial de la página oficial (está en inglés):
[CODE]

Solo los usarios con mas de 1000 puntos de reputacion o los usuarios con membresia Gold, pueden ver este link Que es la reputacion? - Membresias Pagas

[/CODE] Hay un ejemplo allí en "Include and exclude rules"

Me explico, en las Opciones de Greasemonkey, dar clic en Editar, y aparecerá el block de notas con el código JScript del estilo.
Lo que deben hacer, es ubicar el cursor al final del último signo igual de la palabra: // ==UserScript== , click en Enter y luego escriben las reglas de exclusión que Uds. consideren, y dan click Enter para que el resto del código continúe en la fila siguiente. Así debe quedar:
[CODE]// ==UserScript==
// @exclude

Solo los usarios con mas de 1000 puntos de reputacion o los usuarios con membresia Gold, pueden ver este link Que es la reputacion? - Membresias Pagas

// @exclude

Solo los usarios con mas de 1000 puntos de reputacion o los usuarios con membresia Gold, pueden ver este link Que es la reputacion? - Membresias Pagas

*
// @exclude

Solo los usarios con mas de 1000 puntos de reputacion o los usuarios con membresia Gold, pueden ver este link Que es la reputacion? - Membresias Pagas

[/CODE]Nota: si al dar click en Editar no abre el Block de Notas, para corregirlo, en el campo de texto de la ventana del explorador que les aparece, escriben: C:\Windows\system32\notepad.exe, y le dan Abrir.
Estas y otra respuestas se hallan en el FAQ de la web GreaseSpot.

Aparte de lo que mencioné en este segmento, la versión 0.9 tiene el mismo resto de ventajas y desventajas que Greasemonkey 0.8.

A continuación les adiciono unos cuantos ejemplos de estilos de páginas (ofrezco disculpas si quedaron un poco grandes), intenté reducirlas: