darkmode-webview

KO | EN

gitlite — search

#javascript #python #react #golang #machine-learning #linux #nodejs #macos #windows #awesome-list #security #ios #mcp #open-source

darkmode-webview

(★ 13)

iOS Swift app that loads html inside WKWbView and has a darkmode toggle

darkmode-webview 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# darkmode-webview
iOS Swift app that loads html inside WKWbView and has a darkmode toggle

Using this [tutorial][1] I implemented the effect with mix-blend-mode: difference.

[1]: https://dev.to/wgao19/night-mode-with-mix-blend-mode-difference-23lm

Inject multiple WKUserScript in the webiew at document start and document end:

1. JavaScript file with toggle function at document start
 2. Inject div container with background and blender that will make the blend difference (at document end)
 3. Inside style tags contents of CSS file at document end

let webConfiguration = WKWebViewConfiguration()
        let contentController = WKUserContentController()
        
        // Libray script an document start
        let darkModeScript = WKUserScript(source: self.darkModeLibraryJS, injectionTime: WKUserScriptInjectionTime.atDocumentStart, forMainFrameOnly: false)
        contentController.addUserScript(darkModeScript)
        
        let injectDarkModeScript = WKUserScript(source: self.injectDarkModeJS, injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: false)
        contentController.addUserScript(injectDarkModeScript)
        
        let injectCSScript = WKUserScript(source: self.injectCSS, injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: false)
        contentController.addUserScript(injectCSScript)
        
        webConfiguration.userContentController = contentController
        
        self.webview = WKWebView(frame: CGRect.zero, configuration: webConfiguration)
        self.webview?.navigationDelegate = self
        self.view.addSubview(webview!)
        
        self.webview!.loadHTMLString(html, baseURL: nil)

JavaScript with toggle function and inject CSS (darkmode.js)

function showDarkMode() {
         var blender = document.getElementById('blender')
         if (blender.hasAttribute("hidden")) {
             blender.removeAttribute("hidden")
         }
      }

function showOriginalMode() {
         var blender = document.getElementById('blender')
    
         if (!blender.hasAttribute("hidden")) {
             blender.setAttribute("hidden", true)
         }
     }

JavaScript with adding div container to DOM of the webview (inject-darkmode.js)

var container = document.createElement('div')
    container.id = 'darkmode-container'
    document.body.appendChild(container)

var background = document.createElement('div')
    background.classList.add('darkmode-background')
    container.appendChild(background)

var blender = document.createElement('div')
    blender.id = 'blender'
    blender.setAttribute('hidden', true)
    container.appendChild(blender)

CSS for defining blender and background (darkmode.css)

#blender {
        width: 100vw;
        height: 100vh;
        left: 0pt;
        top: 0pt;
        position: fixed;
        background: white;
        transition: all 1s ease;
        mix-blend-mode: difference;
     }

img {
         isolation: isolate;
     }

.darkmode-background {
         position: fixed;
         background: white;
         top: 0;
         left: 0;
         width: 100vw;
         height: 100vh;
         z-index: -1;
     }

darkmode-webview

darkmode-webview 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

darkmode-webview

darkmode-webview 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README