APP开发 最全日夜间模式

最近开发遇到日夜间模式的功能,初次接触比较迷茫,于是开始请教度娘,发现一篇不错的文章

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<styles.length;i++){if(styles[i].id == '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');"

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,718评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,683评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,207评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,755评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,862评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,050评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,136评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,882评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,330评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,651评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,789评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,477评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,135评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,864评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,099评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,598评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,697评论 2 351

推荐阅读更多精彩内容

  • 最近开发遇到日夜间模式的功能,初次接触比较迷茫,于是开始请教度娘,发现一篇不错的文章 http://www.jia...
    因猿际会阅读 1,454评论 9 4
  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,845评论 0 1
  • 第四天:山茶花,先上成品图 步骤:先勾线稿,再用桃红色给花朵整体铺色,用玫红色加强暗色部位,最后用浅绿色和橄榄绿色...
    墨夕手绘阅读 384评论 0 2
  • 正式上班第一日,各种累,各种理由,无上班 ps:昨夜几乎通宵玩游戏,你真系得!不过电话左讲左好多战术
    DeathKnightR阅读 183评论 0 0
  • 庐山谣①寄卢侍御虚舟 李白 我本楚狂人,凤歌笑孔丘。 手持绿玉杖,朝别黄鹤楼。 五岳②寻仙不辞远,一生好入名山游。...
    古诗新读阅读 789评论 0 1