最近开发遇到日夜间模式的功能，初次接触比较迷茫，于是开始请教度娘，发现一篇不错的文章
http://www.jianshu.com/p/bae45500366b
使用DKNightVersion实现夜间模式
（转载作者的）作者在这篇文章中大概介绍了DKNightVersion的使用方法，各类控件没有一一列举，但是DKNightVersion文件中都有大概说明，在此我就举个作者没有列出来的。
改变按钮字体颜色：[creatBtn dk_setTitleColorPicker:DKColorPickerWithRGB(0x000000,0x999999) forState:UIControlStateNormal];
但是重点来了，我需要改变的不止原生界面的日夜间模式，还有网页的日夜间，像加载的淘宝网，携程网，时光网。。。。可是DKNightVersion只支持原生界面日夜间的修改，虽然我们有方法可以直接注入JS来改变网页，但想到网页css，html。。。。 而且不同页面设计风格不同，要想实现网页日夜间必须要一套较完善的JS代码，而且最好能够使用各个网页，一脸懵逼
别人只看结果，而你要自己独撑过程
所以不啰嗦，直接上代码，现在就将我们工程里面最终实现的JS代码分享给大家，虽然还是不够完善，但是基本没大问题了，需要的同行们可以直接使用。
night_js:var
parent = document.getElementsByTagName('head').item(0);var style =
document.createElement('style');style.type = 'text/css';style.id =
'eg-injected';style.innerHTML = 'html{background:#333!important}html
*{background-color:#333!important;color:#bbb!important;border-color:#333!important;border-width:0!important}html
a,html a
*{color:#5c8599!important;text-decoration:underline!important}html
a:visited,html a:visited *,html a:active,html a:active
*{color:#525f66!important}html a:hover,html a:hover
*{color:#cef!important;background:#023!important}html input,html
select,html button,html textarea{background:#4d4c40!important;border:1px
solid
#5c5a46!important;border-top-color:#474531!important;border-bottom-color:#7a7967!important}html
input[type=button],html input[type=submit],html input[type=reset],html
input[type=image],html
button{border-top-color:#7a7967!important;border-bottom-color:#474531!important}html
input:focus,html select:focus,html option:focus,html button:focus,html
textarea:focus{background:#5c5b3e!important;color:#fff!important;border-color:#474100
#665d00 #7a7849!important;outline:2px solid #041d29!important}html
input[type=button]:focus,html input[type=submit]:focus,html
input[type=reset]:focus,html input[type=image]:focus,html
button:focus{border-color:#7a7849 #665d00 #474100!important}html
input[type=radio]{background:none!important;border-color:#333!important;border-width:0!important}html
img[src],html input[type=image]{opacity:.5}html img[src]:hover,html
input[type=image]:hover{opacity:1}html,html
body{scrollbar-base-color:#4d4c40!important;scrollbar-face-color:#5c5b3e!important;scrollbar-shadow-color:#5c5b3e!important;scrollbar-highlight-color:#5c5b3e!important;scrollbar-dlight-color:#5c5b3e!important;scrollbar-darkshadow-color:#474531!important;scrollbar-track-color:#4d4c40!important;scrollbar-arrow-color:#000!important;scrollbar-3dlight-color:#7a7967!important}@media
all and (-webkit-min-device-pixel-ratio:0){html body
*{-webkit-transition:color 0 ease-in,background-color 0
ease-out!important}html a,html textarea,html input,html
select{-webkit-transition:color 0 ease-in,background-color 0
ease-out!important}html img[src],html
input[type=image]{-webkit-transition:opacity 0 ease-in!important}html
input:focus,html select:focus,html option:focus,html button:focus,html
textarea:focus{outline-style:outset!important}}';var tagHeadAdd =
parent.appendChild(style);window.alert(style);
nonight_js:var
parent = document.getElementsByTagName('head').item(0);var styles =
document.getElementsByTagName('style');for(var
i=0;i
'eg-injected'){styles[i].id='noeg-injected';styles[i].innerHTML = ''}};
1.下面是处理日夜间切换的时候，发送通知后接收到通知做的判断
NSString * const DKNightVersionCurrentThemeVersionKey = @"com.dknightversion.manager.themeversion";
NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];
DKThemeVersion * themeVersion = [userDefaults valueForKey:DKNightVersionCurrentThemeVersionKey];
if([themeVersion isEqualToString:DKThemeVersionNormal])
{
[wkWebView evaluateJavaScript:noeginjected_js completionHandler:^(id result, NSError *error) {
NSLog(@"error =%@",error);
}];
}
else
{
[wkWebView evaluateJavaScript:eginjected_js completionHandler:^(id result, NSError *error) {
NSLog(@"error =%@",error);
}];
}
2.ios8 以后使用的一般都是wkwebview，这里要做配置
//内容
WKUserScript
*nightModelScript = [[WKUserScript alloc]
initWithSource:nightModelCheck_js
injectionTime:WKUserScriptInjectionTimeAtDocumentEnd
forMainFrameOnly:YES];
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
[config.userContentController addUserScript:nightModelScript];
wkWebView
= [[WKWebView
alloc]initWithFrame:CGRectMake(0,CGRectGetMaxY(topLine.frame),
appSize.width, appSize.height - CGRectGetMaxY(topLine.frame)- 45)
configuration:config];
3.最后是在什么时候注入JS，开始我选择的是
//数据加载完
-
(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation
*)navigation 这个方法，但是这样就会出现一个问题，就是网页完全加载完成后才能显示夜间模式，会出现先白后闪一下才能变成夜间模式
所以就换了一种方式
/**web界面中有弹出警告框时调用**/
-(void)webView:(WKWebView
*)webView runJavaScriptAlertPanelWithMessage:(NSString *)message
initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void
(^)(void))completionHandler
{
if([message rangeOfString:@"nightModel_check"].location !=NSNotFound)
{
NSString * const DKNightVersionCurrentThemeVersionKey = @"com.dknightversion.manager.themeversion";
NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];
DKThemeVersion * themeVersion = [userDefaults valueForKey:DKNightVersionCurrentThemeVersionKey];
if([themeVersion isEqualToString:DKThemeVersionNormal])
{
}
else
{
[wkWebView evaluateJavaScript:eginjected_js completionHandler:^(id result, NSError *error) {
NSLog(@"error =%@",error);
}];
}
}
completionHandler();
}
注释*：nightModelCheck_js @"window.alert('nightModel_check');"
网友评论