elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía actualizada para evitar que un ransomware ataque tu empresa


+  Foro de elhacker.net
|-+  Programación
| |-+  Programación General
| | |-+  .NET (C#, VB.NET, ASP) (Moderador: kub0x)
| | | |-+  [SOLUCIONADO] ¿Cómo activar el modo oscuro en un navegador (ChromiumWebBrowser) de la librería CefSharp?
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [SOLUCIONADO] ¿Cómo activar el modo oscuro en un navegador (ChromiumWebBrowser) de la librería CefSharp?  (Leído 3,098 veces)
elektrostudios2

Desconectado Desconectado

Mensajes: 28



Ver Perfil
[SOLUCIONADO] ¿Cómo activar el modo oscuro en un navegador (ChromiumWebBrowser) de la librería CefSharp?
« en: 24 Febrero 2024, 02:33 am »

Buen día. Llevo una semanita estujándome el cerebro para intentar averiguar cómo narices se puede activar el modo oscuro en un navegador ChromiumWebBrowser de la librería CefSharp.

Mi intención es que al cargar una página web en el navegador, automáticamente se coloree con un tema oscuro o, por lo menos, una solución que funcione para los típicos sitios web que comprueban si el navegador web está utilizando el modo oscuro o claro y luego el sitio web adapta de forma automática sus colores.

He probado todas las sugerencias que he encontrado y que he sido capaz de probar hasta donde alcanza mi muy limitado conocimiento sobre CefSharp, la API de CEF y Chromium, y la programación a nivel web en general.

Conozco alternativas de navegadores web gratuitos y comerciales como GeckoFX y EO WebBrowser, las cuales no me interesan para el tipo de proyectos que llevo a cabo.



Esta misma duda la he formulado en el sitio web de stackoverflow con una amplia información sobre toda mi investigación y los métodos que he probado:

 - How to enable dark mode for CefSharp web browser in .NET?

(me da pereza traducir al español -y corregir lo traducido de- esa biblia que escribí.)

También he planteado la duda (a modo de petición) en el repositorio de CefSharp:

 - Feature Request - Improve documentation to understand how to enable dark mode for ChromiumWebBrowser #4723

Y también en su comunidad:

 - How to enable dark mode for ChromiumWebBrowser? #4722

Ninguno de mis tres intentos han obtenido respuesta alguna.

Gracias con antelación si alguien puede echarme una mano para aclarar mis dudas.

Aténtamente,
Elektro.


« Última modificación: 25 Febrero 2024, 11:30 am por elektrostudios2 » En línea

   
**Aincrad**


Desconectado Desconectado

Mensajes: 668



Ver Perfil WWW
Re: ¿Cómo activar el modo oscuro en un navegador (ChromiumWebBrowser) de la librería CefSharp?
« Respuesta #1 en: 24 Febrero 2024, 04:54 am »

Que onda bro, Genial que volviste!!!

Yo siempre uso EO.WebBrowser, pero como lo hago deberia funcionarte tambien a ti :

1) Descargo DarkMode.js , yo uso un WebClient, pero si sabes javascript puedes inyectar el script en el evento load de la pagina.

2) Inyecto el js en la pagina cuando termine de cargar :  WebView.EvalScript(DarkThemeJSCode) en tu caso deberia ser  browser.ExecuteScriptAsync(script)

Despues de Inyectado el JS, lo puedes cambiar usando :

Código
  1. var darkmode =  new Darkmode();
  2. darkmode.toggle();


Todo lo manejo usando javascript Inyectado, Esta es la documentacion : darkmodejs  y asi se vería :

Antes :



Despues:



PD: Obia el scrollbar gigante, apenas lo estoy personalizando.  :rolleyes:


« Última modificación: 24 Febrero 2024, 04:58 am por **Aincrad** » En línea



elektrostudios2

Desconectado Desconectado

Mensajes: 28



Ver Perfil
Re: ¿Cómo activar el modo oscuro en un navegador (ChromiumWebBrowser) de la librería CefSharp?
« Respuesta #2 en: 24 Febrero 2024, 09:35 am »

Te agradezco la sugerencia, @**Aincrad**.

He preferido cargar el script darkmode-js.min.js añadiendo este html con el cual se controla el evento "load" de la página para añadir el widget con el que alternar entre modo oscuro y claro en la esquina inferior derecha de la página:

Código
  1. <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
  2.  function addDarkmodeWidget() {
  3.    new Darkmode().showWidget();
  4.  }
  5.  window.addEventListener('load', addDarkmodeWidget);

El problema es que algunas páginas, al menos usando Cefsharp, se ven así:



Y las que ya son oscuras por defecto, se me ven así:



Este es el mayor problema que me temía con este tipo de soluciones. Aunque me has ayudado a avanzar y tener algo más que poder usar para probar.



El widget funciona bien para otras páginas web, como la que aparece en el siguiente gif, pero si no funciona de forma más o menos correcta con todas las páginas entonces tendré que seguir buscando soluciones alternativas...



Gracias una vez más.

Aténtamente,
Elektro.



ACTUALIZACIÓN:

Mediante la inserción de la siguiente etiqueta <style> en el html de la página cargada, he logrado obtener un mejor resultado de contraste de los colores, y lograr que también me funcione con páginas oscuras:

Código
  1. <style>
  2.    * {
  3.        background-color: hsl(228, 5%, 15%) !important;
  4.        color: hsl(228, 5%, 80%) !important;
  5.        box-sizing: border-box !important;
  6.    }
  7.  
  8.    textarea, input, select {
  9.        border: 1px solid hsl(228, 5%, 30%) !important;
  10.    }
  11. </style>

...aunque esto sigue siendo una solución bastante imperfecta, pero las letras tienen el color adecuado con un fondo oscuro para casi todos los tipos de elementos Html de estas páginas web:

« Última modificación: 24 Febrero 2024, 14:39 pm por elektrostudios2 » En línea

   
elektrostudios2

Desconectado Desconectado

Mensajes: 28



Ver Perfil
Re: ¿Cómo activar el modo oscuro en un navegador (ChromiumWebBrowser) de la librería CefSharp?
« Respuesta #3 en: 25 Febrero 2024, 07:08 am »

Ya está, ¡lo logré!, la solución óptima es utilizando el método ChromiumWebBrowser.GetDevToolsClient().Emulation.SetAutoDarkModeOverrideAsync.

El resultado es sencillamente sublime, el contraste de colores es perfecto para todos los elementos html que he visto.

Así se podría hacer para activar el modo oscuro al inciializar el control:

Código
  1. ''' <summary>
  2. ''' Handles the <see cref="ChromiumWebBrowser.IsBrowserInitializedChanged"/> event
  3. ''' for all of the <see cref="ChromiumWebBrowser1"/> control.
  4. ''' </summary>
  5. '''
  6. ''' <param name="sender">
  7. ''' The source of the event.
  8. ''' </param>
  9. '''
  10. ''' <param name="e">
  11. ''' The <see cref="EventArgs"/> instance containing the event data.
  12. ''' </param>
  13. <DebuggerStepperBoundary>
  14. Private Sub ChromiumWebBrowser1_IsBrowserInitializedChanged(sender As Object, e As EventArgs) _
  15.    Handles ChromiumWebBrowser1.IsBrowserInitializedChanged
  16.  
  17.    Dim browser As ChromiumWebBrowser = DirectCast(sender, ChromiumWebBrowser)
  18.    If browser.IsBrowserInitialized Then
  19.        browser.GetDevToolsClient().Emulation.SetAutoDarkModeOverrideAsync(True)
  20.    End If
  21.  
  22. End Sub

O al terminar de cargar el frame principal de una página:

Código
  1. ''' <summary>
  2. ''' Handles the <see cref="ChromiumWebBrowser.FrameLoadEnd"/> event
  3. ''' for all of the <see cref="ChromiumWebBrowser1"/> control.
  4. ''' </summary>
  5. '''
  6. ''' <param name="sender">
  7. ''' The source of the event.
  8. ''' </param>
  9. '''
  10. ''' <param name="e">
  11. ''' The <see cref="FrameLoadEndEventArgs"/> instance containing the event data.
  12. ''' </param>
  13. <DebuggerStepperBoundary>
  14. Private Sub ChromiumWebBrowser1_FrameLoadEnd(sender As Object, e As FrameLoadEndEventArgs) _
  15.    Handles ChromiumWebBrowser1.FrameLoadEnd
  16.  
  17.    If e.Frame.IsMain Then
  18.        Dim browser As ChromiumWebBrowser = DirectCast(sender, ChromiumWebBrowser)
  19.        browser.GetDevToolsClient().Emulation.SetAutoDarkModeOverrideAsync(True)
  20.    End If
  21.  
  22. End Sub

Por último, así lo podríamos presentar en forma de método de extensión:

Código
  1. ''' <summary>
  2. ''' Ennable or disable dark mode for the source <see cref="ChromiumWebBrowser"/> object.
  3. ''' </summary>
  4. '''
  5. ''' <param name="browser">
  6. ''' The source <see cref="ChromiumWebBrowser"/> which to ennable or disable dark mode.
  7. ''' </param>
  8. '''
  9. ''' <param name="enableDarkMode">
  10. ''' <see langword="True"/> to enable dark mode, <see langword="False"/> otherwise.
  11. ''' </param>
  12. '''
  13. ''' <returns>
  14. ''' Returns a <see cref="DevToolsMethodResponse"/> object containing information about success or error.
  15. ''' </returns>
  16. '''
  17. ''' <exception cref="InvalidOperationException">
  18. ''' Browser has not been initialized.
  19. ''' </exception>
  20. <Extension>
  21. <DebuggerStepThrough>
  22. Public Async Function SetDarkModeAsync(browser As ChromiumWebBrowser, enableDarkMode As Boolean) As _
  23.    Task(Of DevToolsMethodResponse)
  24.  
  25.    If browser Is Nothing Then
  26.        Throw New ArgumentNullException(paramName:=NameOf(browser))
  27.    End If
  28.  
  29.    If Not browser.IsBrowserInitialized Then
  30.        Throw New InvalidOperationException("Browser has not been initialized.")
  31.    End If
  32.  
  33.    Return Await browser.GetDevToolsClient().Emulation.SetAutoDarkModeOverrideAsync(enableDarkMode)
  34.  
  35. End Function

Aténtamente,
Elektro.
« Última modificación: 25 Febrero 2024, 08:01 am por elektrostudios2 » En línea

   
**Aincrad**


Desconectado Desconectado

Mensajes: 668



Ver Perfil WWW
Re: [SOLUCIONADO] ¿Cómo activar el modo oscuro en un navegador (ChromiumWebBrowser) de la librería CefSharp?
« Respuesta #4 en: 27 Febrero 2024, 20:52 pm »

Genial que lo lograste, puedes poner alguna imagen de como se ve ? para comparar, podrias mostrar como se veria la pagina de youtube , porfa?
« Última modificación: 27 Febrero 2024, 20:56 pm por **Aincrad** » En línea



Eleкtro
Ex-Staff
*
Desconectado Desconectado

Mensajes: 9.821



Ver Perfil
Re: [SOLUCIONADO] ¿Cómo activar el modo oscuro en un navegador (ChromiumWebBrowser) de la librería CefSharp?
« Respuesta #5 en: 28 Febrero 2024, 08:01 am »

puedes poner alguna imagen de como se ve ? para comparar, podrias mostrar como se veria la pagina de youtube , porfa?

Claro, no hay problema. He subido un video en Youtube:



También dejo por aquí enlaces al código fuente de ese programa, a modo de snippets para usar con CefSharp:

 - ChromiumWebBrowserExtensions.vb
Citar
(Function: SetDarkModeAsync)

 - RequestHandlerByUrlCondition.vb
Citar
Provides functionality to allow or restrict navigation requests based on whether the requested URL satisfies the condition of a specified predicate function.

 - RequestHandlerRestrictedToHostName.vb
Citar
Provides functionality to restrict navigation requests within a specific hostname.

 - CefSharpUtil.vb
« Última modificación: 28 Febrero 2024, 08:10 am por Eleкtro » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Cómo activar el modo oscuro en Google Chrome y Mozilla Firefox
Noticias
wolfbcn 0 1,679 Último mensaje 16 Diciembre 2016, 21:27 pm
por wolfbcn
Cómo activar el modo oscuro de YouTube
Noticias
wolfbcn 0 1,409 Último mensaje 19 Abril 2018, 01:56 am
por wolfbcn
Cómo activar el modo oscuro en Windows 10 automáticamente todas las noches
Noticias
wolfbcn 0 1,464 Último mensaje 18 Junio 2018, 21:33 pm
por wolfbcn
Cómo activar el modo oscuro de YouTube en tu móvil Android
Noticias
wolfbcn 0 1,279 Último mensaje 6 Septiembre 2018, 21:36 pm
por wolfbcn
Así puedes activar el modo oscuro en WhatsApp Web
Noticias
wolfbcn 0 1,406 Último mensaje 24 Noviembre 2019, 01:27 am
por wolfbcn
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines