[SOLUCIONADO] ¿Cómo activar el modo oscuro en un navegador (ChromiumWebBrowser) de la librería CefSharp?
elektrostudios2:
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.
**Aincrad**:
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
var darkmode = new Darkmode();
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:
elektrostudios2:
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
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
function addDarkmodeWidget() {
new Darkmode().showWidget();
}
window.addEventListener('load', addDarkmodeWidget);
</script>
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
<style>
* {
background-color: hsl(228, 5%, 15%) !important;
color: hsl(228, 5%, 80%) !important;
box-sizing: border-box !important;
}
textarea, input, select {
border: 1px solid hsl(228, 5%, 30%) !important;
}
</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:
elektrostudios2:
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
''' <summary>
''' Handles the <see cref="ChromiumWebBrowser.IsBrowserInitializedChanged"/> event
''' for all of the <see cref="ChromiumWebBrowser1"/> control.
''' </summary>
'''
''' <param name="sender">
''' The source of the event.
''' </param>
'''
''' <param name="e">
''' The <see cref="EventArgs"/> instance containing the event data.
''' </param>
<DebuggerStepperBoundary>
Private Sub ChromiumWebBrowser1_IsBrowserInitializedChanged(sender As Object, e As EventArgs) _
Handles ChromiumWebBrowser1.IsBrowserInitializedChanged
Dim browser As ChromiumWebBrowser = DirectCast(sender, ChromiumWebBrowser)
If browser.IsBrowserInitialized Then
browser.GetDevToolsClient().Emulation.SetAutoDarkModeOverrideAsync(True)
End If
End Sub
O al terminar de cargar el frame principal de una página:
Código
''' <summary>
''' Handles the <see cref="ChromiumWebBrowser.FrameLoadEnd"/> event
''' for all of the <see cref="ChromiumWebBrowser1"/> control.
''' </summary>
'''
''' <param name="sender">
''' The source of the event.
''' </param>
'''
''' <param name="e">
''' The <see cref="FrameLoadEndEventArgs"/> instance containing the event data.
''' </param>
<DebuggerStepperBoundary>
Private Sub ChromiumWebBrowser1_FrameLoadEnd(sender As Object, e As FrameLoadEndEventArgs) _
Handles ChromiumWebBrowser1.FrameLoadEnd
If e.Frame.IsMain Then
Dim browser As ChromiumWebBrowser = DirectCast(sender, ChromiumWebBrowser)
browser.GetDevToolsClient().Emulation.SetAutoDarkModeOverrideAsync(True)
End If
End Sub
Por último, así lo podríamos presentar en forma de método de extensión:
Código
''' <summary>
''' Ennable or disable dark mode for the source <see cref="ChromiumWebBrowser"/> object.
''' </summary>
'''
''' <param name="browser">
''' The source <see cref="ChromiumWebBrowser"/> which to ennable or disable dark mode.
''' </param>
'''
''' <param name="enableDarkMode">
''' <see langword="True"/> to enable dark mode, <see langword="False"/> otherwise.
''' </param>
'''
''' <returns>
''' Returns a <see cref="DevToolsMethodResponse"/> object containing information about success or error.
''' </returns>
'''
''' <exception cref="InvalidOperationException">
''' Browser has not been initialized.
''' </exception>
<Extension>
<DebuggerStepThrough>
Public Async Function SetDarkModeAsync(browser As ChromiumWebBrowser, enableDarkMode As Boolean) As _
Task(Of DevToolsMethodResponse)
If browser Is Nothing Then
Throw New ArgumentNullException(paramName:=NameOf(browser))
End If
If Not browser.IsBrowserInitialized Then
Throw New InvalidOperationException("Browser has not been initialized.")
End If
Return Await browser.GetDevToolsClient().Emulation.SetAutoDarkModeOverrideAsync(enableDarkMode)
End Function
Aténtamente,
Elektro.
**Aincrad**:
Genial que lo lograste, puedes poner alguna imagen de como se ve ? para comparar, podrias mostrar como se veria la pagina de youtube , porfa?
Navegación
[#] Página Siguiente