Off Topic - Dark Mode LWP !!!

 
Vista:
Imágen de perfil de Kathyu
Val: 77
Oro
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kathyu (17 intervenciones) el 04/07/2020 01:50:32
Les comento que como proyecto personal me tome la molestia de hacer un Dark mode para LWP.

Les diré a continuación como pueden activarlo.

Como todos sabrán, al pasar mucho frente al PC, la vista se cansa. En mi caso particular casi todo lo uso en Dark mode, hasta el word xD

Una extensión que me ayuda es Stylus, basicamente te permite cambiar el estilo de un sitio web. Un estilo propio tuyo.

Y como ya se imaginaran, lo que nació como un proyecto, inspiró a muchos a crear una comunidad, la comunidad de https://userstyles.org/ una comunidad donde alguien sube un estilo personalizado de alguna web.

Google, Reddit, Stack Overflow, Facebook, Twiter, YouTube, Ebay, Wikipedia, Amazon y cualquier sitio de los mas famosos del mundo tienen estilos personalizados y lo que mas impera son los famosos Dark mode, temas oscuros.

Bueno, a mi me pareció buena idea en subir el Dark mode para LWP, pero por razones que desconozco no pude registrarme y aunque dispongo de gran banda ancha de internet, esa pagina se tarda un mundo en cargar. Por otro lado, mi hermano, alguien que supervisa cada cosa que yo hago, ha sido colaborador de varios Dark themes, y yo subí a su cuenta el estilo de LWP.

Que deben hacer?
- Deben instalar la Extensión Stylus
- Luego deben ir a https://userstyles.org/ y buscar el theme para LWP, pueden ir directamente en este link: https://userstyles.org/styles/185886/lwp-by-ochoa
- Una vez ahí, instalan el theme y listo.
- Esos mismos pasos siguen para las web que quieran.

El proyecto lo llevo en un 80% creo, he cubierto todo el dominio de https://www.lawebdelprogramador.com/, pero muy probablemente algunas cosas se me han escapado, en el link de user styles pueden ver algunas capturas, pero igual acá se las dejo:

Home
185886_additional_36711

Foros
185886_additional_36712

Respuestas
185886_additional_36713

Código en respuestas
185886_additional_36714


Son bienvenidas las sugerencias y las alertas de donde hace falta darle "una maquilladita" a LWP. Aunque debo aclarar que el propósito de esto es quitar el exceso de tonos blancos a la hora de navegar por LWP, por lo demás cada quien es libre de instar o no este theme. Deje algunos tonos azules que a mi ver no hacen que se vea mal el estilo.

Disclaimer: Aclaro que no es algo oficial de parte de la administración de LWP, es un proyecto personal, si los administradores les parece que esto incumple con algo, pueden proceder a borrar el post.


PD: Al momento de hacer este post, user styles me pone un gran 504 Gateway Time-out
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
3
Responder
Imágen de perfil de joel
Val: 44
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por joel (9 intervenciones) el 04/07/2020 08:38:29
Oleeee!!! que guapo Kathyu!!!

No sabia que se pudiera hacer esto!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kathyu
Val: 77
Oro
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kathyu (17 intervenciones) el 04/07/2020 10:48:44
Pues, si que se puede. Ya hay varios themes para las paginas mas visitadas o famosas del mundo. Y LWP no podía faltar.

Definitivamente mis ojos han agradecido este Dark mode

La cosa ahora es ver si este foro les avisa a todos los usuarios que hay un nuevo post. Digo para que vean este cambio, porque por ejemplo la gente que solo venga al foro de 3D, quizás nunca quieran ver que nuevas cosas hay en este apartado de LWP
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kabuto
Val: 25
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kabuto (6 intervenciones) el 05/07/2020 00:03:59
Muchas gracias por esta aportación.

Sin duda así es más agradable a la vista.
Personalmente, al texto le he dado un color más cercano al gris en lugar de blanco.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kathyu
Val: 77
Oro
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kathyu (17 intervenciones) el 05/07/2020 09:53:15
Sabe que pasa? que al hacer eso su vista necesita esforzarse mas por leer, y se cansa mas, por eso los tonos en contraste son lo mejor.

Tengo un fondo oscuro, le pongo letra clara, es claro el fondo? entonces letra oscura, pero si usa un tono pastel y le pone un blanco de letra, pobre de sus ojos, aunque usted no lo siente mucho, pero sus ojos si.

Justo por eso ocupé el color teal en los links, aunque por ahí me ha quedado un link suelto, el de los MP's, y estoy pensando que los links de los post tambien debo colorearlos, un naranja quizás
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kabuto
Val: 25
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kabuto (6 intervenciones) el 05/07/2020 13:35:41
Probaré unos días así a ver como me va.
Me resulta más relajado, pero ya veremos.
Un saludo.

estilo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kathyu
Val: 77
Oro
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kathyu (17 intervenciones) el 05/07/2020 15:50:03
No se ve mal

Incluso pinto los botones, y porque no hacemos una mezcla? digo yo ya tengo en userstyles el theme, podemos hacer un uppgrade ahi
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kabuto
Val: 25
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kabuto (6 intervenciones) el 05/07/2020 17:01:33
Humm...
La verdad no me manejo bien con el Stylish este, incluso aún no se si lo que cambié ha sido locálmente en mi maquina, o los cambios se los he hecho al estilo que tú habías subido...
Mientras lo modificaba pensé:
- Verás la Kathyu, se va a enfadar porque le fregué su estilo

Para los botones puse este tono verde:
1
2
3
.button {
        color: #13c31e;
    }
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kathyu
Val: 77
Oro
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kathyu (17 intervenciones) el 05/07/2020 17:13:58
Para nada.

En cuanto pueda pongo ese color al Dark theme de userstyles
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kabuto
Val: 25
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kabuto (6 intervenciones) el 05/07/2020 20:09:49
También cambié el azul del texto del recuadro que sale al final de la página.
Por defecto usa darkblue y con el "modo oscuro" se vuelven casi invisibles, aunque tampoco es algo que nadie suela leer.

Lo cambié a lightblue, quizás a ti se te ocurra otro tono más adecuado.
1
2
3
.legend {
        color: lightblue;
    }

lightblue
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kathyu
Val: 77
Oro
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kathyu (17 intervenciones) el 06/07/2020 09:51:27
He realizado los cambios, pero esa mendiga pagina hace las cosas cuando ella quiere.

Le di los respectivos créditos en el change log Kabuto

Hay que seguir con esto hasta dejar todo OK para LWP
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de daenius
Val: 27
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por daenius (7 intervenciones) el 09/07/2020 00:22:46
Fantástica idea. Con el tiempo he tenido que ponerme los temas negros para casi todo tipo de aplicaciones.

Aprovecho para añadir el enlace directo para descargar el Stylus desde Mozilla https://addons.mozilla.org/es/firefox/addon/styl-us/

Y también que la primera vez que entré a la página para descargarme el Theme me tardaba mucho en cargar y hasta me dio un error al instalarlo. Un segundo intento solucionó todo.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kathyu
Val: 77
Oro
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kathyu (17 intervenciones) el 09/07/2020 11:44:31
Buenale esa de poner para FF, en mi caso esa pagina funciona cuando se le pega la gana.

Cualquier cosa seguimos abiertos a cambios o mejoras !!!!!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de pablo
Val: 42
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por pablo (9 intervenciones) el 11/07/2020 17:18:46
Buenas,

Vaya genial, siempre me a gustado el dark mode en las páginas que más utilizo, y la verdad es que para la web del programador viene bien, antes utilizaba otro tipo de extensión de chrome que se llama Dark Reader pero no me gustaba mucho por que no se podía modificar muchas cosas, gracias por el aporte. Lo probaré.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de pablo
Val: 42
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por pablo (9 intervenciones) el 11/07/2020 17:59:13
He visto que al usarlo hay algunos cambios, como en el footer no tiene aplicado todo el color, los globos de nuevo foro es como muy claro, y la parte donde se ve el cuadrito del nombre esta como el color por defecto así como el input esta es su color blanco normal, igual para los text area, yo los arreglue un poco pero no sé si sean de su gusto y deseen agregarlos al proyecto. aquí les dejo el código por sí quieren, yo lo modifique con la herramienta de desarrolladores de google para ver el preview de como quedaría.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.content_right li:first-child{
	background-color: #1b1b1b;
}
 
#filter{
	background-color: #292929;
}
 
.forosListIndex .new::after{
	border-color: transparent #d11414 transparent transparent;
 
}
 
.forosListIndex .new{
	background #d11414;
}
 
.recommendForm input {
	background-color: #292929;
}
 
footer{
 background-color: #222222;
}
.formulario{
color: #13c131e;
background-color: #222222;
}

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kathyu
Val: 77
Oro
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kathyu (17 intervenciones) el 13/07/2020 10:16:58
Pase preview por favor, ya que así es como vemos como se verían las cosas

Justo como lo hizo Kabuto, con imágenes para ver los cambios
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de daenius
Val: 27
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por daenius (7 intervenciones) el 13/07/2020 11:57:52
Una pequeña duda, en caso de que el Theme se vaya actualizando con el tiempo, ¿hay que ir a la página web a actualizarlo o eso ya lo hace solo? Con las extensiones del navegador o lo hacen solos, o bien te mandan una pantallita de advertencia, pero con el theme ya no lo sé.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kathyu
Val: 77
Oro
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kathyu (17 intervenciones) el 13/07/2020 12:01:15
Hay que ir a userstyles y dar clic en update theme.

Yo lo veo innecesario, debería de actualizarse solo, pero eso ya no es tema nuestro, así se hace y ni modo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de pablo
Val: 42
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por pablo (9 intervenciones) el 13/07/2020 19:04:01
Buenas aquí están los que he notado, algunos cambios son maña mia pero bueno si les gusta y los desean aplicar no caen mal

Primero estatus de los usuarios conectados al chat antes:

Estatus-antes

Después con algunos cambios hechos:

Estatus-despues

Código:

1
2
3
4
5
6
7
8
9
10
11
12
.forosMessage .chatsUser {
    margin: 5px 5px;
    background-color: #2b2b2b;
}
.chatsUser.tags li:first-child {
    background-color: inherit;
    padding-left: 0px;
    color: #ffff;
}
a {
    color: #13c31e !important;
} /*Con ete cambio los links cambian a verde */

Cambio de a:

cambio-de-a

Footer

Antes de los cambios:

footer-antes

Después de los cambios realizados:

footer-despues


Código:

1
2
3
4
5
6
footer {
    clear: both;
    overflow: hidden;
    margin-top: 20px;
    background-color: #222222;
}

Globo de nuevo foro

antes :

globo

después:

globo-despues

Código:
1
2
3
4
5
6
7
8
.forosListIndex .new::after{
	border-color: transparent #d11414 transparent transparent;
 
}
 
.forosListIndex .new{
	background #d11414;
}

Cuadros (esto ya queda a gusto propio sí se desea agregar)
Antes:

Cuadros-antes

Después:

Cuadro-despues

Código:
1
2
3
.content_right li:first-child {
    background-color: #222222;
}

Formulario:

Antes:

formulario-antes

Después:

formulario-despues

Código:
1
2
3
4
5
6
7
8
.formulario {
    font-family: Arial;
    font-size: 12px;
    color: #13c31e;
    background-color: #222222;
    border: 1px solid #C9D6F5;
    padding: 3px;
}

Recomendación

Antes:

recomendar-antes

Después:

recomendar-despues

Código:
1
2
3
.recommendForm input {
    background-color: #333;
}

Esos son algunos de los que he visto revisando.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Kathyu
Val: 77
Oro
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kathyu (17 intervenciones) el 14/07/2020 10:30:45
Las cosas buenas hay que acatarlas !!!

He realizado los cambios propuestos y solventado algunos bugs en ellos, por ejemplo, al momento de poner una respuesta, cuando se pone focused este textarea, se miraba fatal, así que hice los cambios necesarios para el evento :focus de CSS


Ya pueden pasar por su actualización a US
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 3
Ha disminuido su posición en 5 puestos en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Lopez (1 intervención) el 13/07/2020 20:41:06
Excelente!
Siempre viene bien el dark.
Recuerda siempre tener en cuenta las reglas de usabilidad, como un buen contraste,
especialmente para las etiquetas <pre></pre>.
Por demás pinta bárbaro, capo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de daenius
Val: 27
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por daenius (7 intervenciones) el 21/07/2020 20:22:42
Bueno, solamente me gustaría comentar que al parecer se me actualiza solo, ya que gracias al mega-post de @pablo he podido comprobar que se tengo las mejores que él menciona.

Gracias!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kathyu
Val: 77
Oro
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kathyu (17 intervenciones) el 21/07/2020 22:33:17
Y usted cuando instaló el Dark theme?

Porque hasta el momento a mi nunca se me ha actualizado solo, alguien mas que confirme por favor, eso seria lo mejor...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de daenius
Val: 27
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por daenius (7 intervenciones) el 22/07/2020 08:48:39
Lo instalé el mismo día que puse el primer post aquí, el 9 de julio
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Kathyu
Val: 77
Oro
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por Kathyu (17 intervenciones) el 22/07/2020 14:27:37
Sigamos esperando a ver si se actualiza solo a todos...


Alguien mas con este mismo caso???
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de pablo
Val: 42
Ha mantenido su posición en Off Topic (en relación al último mes)
Gráfica de Off Topic

Dark Mode LWP !!!

Publicado por pablo (9 intervenciones) el 23/07/2020 15:55:32
Buenas yo si tuve que dirigirme a la página a actualizar por que solo no lo hizo.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar