Dark Mode

From iPhone Development Wiki
Jump to: navigation, search

Tired of burning your eyes out? Here's how to add a dark mode for our default theme.

1. Open https://iphonedev.wiki/index.php/Special:MyPage/vector.css and click "Create this Page"

2. Copy the following text into the page and save it:

h1,h2,h3,h4,h5,h6{color:#c1c1c1 !important}hr{color:#222 !important}.editOptions{background-color:#333 !important;border-color:#4c4c4c !important}input,textarea{background-color:#4c4c4c !important;border-color:#4c4c4c !important;color:#c1c1c1 !important}a,.mw-body a.external,.mw-body a.extiw{color:#7d9ed4 !important}a:visited,.mw-body a.external:visited,.mw-body a.extiw:visited{color:#8a7f6c !important}a.new,#p-personal a.new{color:#d44 !important}ul{list-style-image:none !important}div.thumbinner,.catlinks{background-color:#4c4c4c !important;border-color:#666 !important}#toc,div.toc,ul#filetoc,li.gallerybox div.thumb{background-color:#4c4c4c !important;border-color:#666 !important}code{border:none !important;background-color:inherit !important;color:inherit !important}table.mw_metadata td,table.mw_metadata th,table.wikitable,table.wikitable>*>tr>th,table.wikitable>*>tr>td,pre{color:#c1c1c1 !important;background-color:#4c4c4c !important;border-color:#666 !important}table.mw_metadata th,table.wikitable>*>tr>th{background-color:#595959 !important}table.diff{background-color:#4c4c4c !important}td .diffchange{color:#4c4c4c !important}#pagehistory li.selected,td.diff-context{background-color:inherit !important;color:inherit !important}#pagehistory li{border:0 !important}ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper,ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper,ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper{background-color:rgba(0,0,0,0.8) !important}#left-navigation div.vectorTabs,#right-navigation div.vectorTabs{background-image:inherit !important;background-color:#250b2d !important}#left-navigation div.vectorTabs ul,#right-navigation div.vectorTabs ul{background-color:#250b2d !important}#left-navigation div.vectorTabs ul li,#right-navigation div.vectorTabs ul li{background-color:#222 !important;background-image:-moz-linear-gradient(top, #2e2e2e 20%, #222 100%) !important;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(20%, #2e2e2e), color-stop(100%, #222)) !important;background-image:-webkit-linear-gradient(top, #2e2e2e 20%, #222 100%) !important;background-image:linear-gradient(#2e2e2e 20%, #222 100%) !important}#left-navigation div.vectorTabs li.new a,#right-navigation div.vectorTabs li.new a,#left-navigation div.vectorTabs li.new a:visited,#right-navigation div.vectorTabs li.new a:visited{color:#d44 !important}#left-navigation div.vectorTabs li.selected,#right-navigation div.vectorTabs li.selected{background-color:#333 !important;background-image:-moz-linear-gradient(top, #7d9ed4 0, #333 10%) !important;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #7d9ed4), color-stop(10%, #333)) !important;background-image:-webkit-linear-gradient(top, #7d9ed4 0, #333 10%) !important;background-image:linear-gradient(#7d9ed4 0, #333 10%) !important}#left-navigation div.vectorTabs li.selected a,#right-navigation div.vectorTabs li.selected a,#left-navigation div.vectorTabs li.selected a:visited,#right-navigation div.vectorTabs li.selected a:visited{color:#8a7f6c !important}#left-navigation div.vectorTabs li a,#right-navigation div.vectorTabs li a{color:#7d9ed4 !important}#left-navigation div.vectorTabs span,#right-navigation div.vectorTabs span{background:transparent !important}div#mw-head #right-navigation div.vectorMenu h3{background:inherit !important}div#mw-head div.vectorMenu h3 span{color:#7d9ed4 !important}div.vectorMenu h3 a{background:inherit !important}div.vectorMenu ul{background-color:black !important;border:solid 1px #0c0c0c !important}div.vectorMenu li a{color:#7d9ed4 !important}div.vectorMenu li.selected a,div.vectorMenu li.selected a:visited{color:#8a7f6c !important;text-decoration:none !important}div.vectorMenu#p-cactions div.menu{border-color:#666 !important}div.vectorMenu#p-cactions ul{border:0 !important;background-color:#4c4c4c !important}#mw-navigation div#mw-panel div.portal{background-image:none !important;border-top:1px solid #4c4c4c !important}#mw-navigation div#mw-panel div.portal#p-logo,#mw-navigation div#mw-panel div.portal#p-navigation{border-top:none !important}html{font-size:100% !important}html,body{height:100% !important;margin:0 !important;padding:0 !important;font-family:sans-serif !important}body{background-color:#2a2a2a !important}.mw-body{margin-left:10em !important;padding:1em !important;border:1px solid #250b2d !important;border-right-width:0 !important;margin-top:-1px !important;background-color:#333 !important;color:#c1c1c1 !important;direction:ltr !important}.mw-body .mw-editsection,.mw-body .mw-editsection-like{font-family:sans-serif !important}.mw-body p{line-height:inherit !important;margin:.5em 0 !important}.mw-body h1,.mw-body h2,.mw-body #firstHeading{font-family:"Linux Libertine",Georgia,Times,serif !important;line-height:1.3 !important;margin-bottom:.25em !important;padding:0 !important}.mw-body h1,.mw-body #firstHeading{font-size:1.8em !important}.mw-body h2{font-size:1.5em !important;margin-top:1em !important}.mw-body h3,.mw-body h4,.mw-body h5,.mw-body h6{line-height:1.6 !important;margin-top:.3em !important;margin-bottom:0 !important;padding-bottom:0 !important}.mw-body h3{font-size:1.17em !important}.mw-body h3,.mw-body h4{font-weight:bold !important}.mw-body h4,.mw-body h5,.mw-body h6{font-size:100% !important}.mw-body #toc h2,.mw-body .toc h2{font-size:100% !important;font-family:sans-serif !important}div.emptyPortlet{display:none !important}ul{list-style-type:disc !important;list-style-image:/* @embed */ url('skins/Vector/images/bullet-icon.png') !important}pre,.mw-code{line-height:1.3em !important}#siteNotice{font-size:.8em !important}.redirectText{font-size:140% !important}.redirectMsg img{vertical-align:text-bottom !important}.mw-body-content{position:relative !important;line-height:1.6 !important;font-size:.875em !important}body.vector-animateLayout .mw-body,body.vector-animateLayout div#footer,body.vector-animateLayout #left-navigation{-webkit-transition:margin-left 250ms,padding 250ms !important;-moz-transition:margin-left 250ms,padding 250ms !important;-o-transition:margin-left 250ms,padding 250ms !important;transition:margin-left 250ms,padding 250ms !important}body.vector-animateLayout #p-logo{-webkit-transition:left 250ms !important;-moz-transition:left 250ms !important;-o-transition:left 250ms !important;transition:left 250ms !important}body.vector-animateLayout #mw-panel{-webkit-transition:padding-right 250ms !important;-moz-transition:padding-right 250ms !important;-o-transition:padding-right 250ms !important;transition:padding-right 250ms !important}body.vector-animateLayout #p-search{-webkit-transition:margin-right 250ms !important;-moz-transition:margin-right 250ms !important;-o-transition:margin-right 250ms !important;transition:margin-right 250ms !important}body.vector-animateLayout #p-personal{-webkit-transition:right 250ms !important;-moz-transition:right 250ms !important;-o-transition:right 250ms !important;transition:right 250ms !important}body.vector-animateLayout #mw-head-base{-webkit-transition:margin-left 250ms !important;-moz-transition:margin-left 250ms !important;-o-transition:margin-left 250ms !important;transition:margin-left 250ms !important}#p-personal{position:absolute !important;top:.33em !important;right:.75em !important;z-index:100 !important}#p-personal h3{display:none !important}#p-personal ul{list-style-type:none !important;list-style-image:none !important;margin:0 !important;padding-left:10em !important}#p-personal li{line-height:1.125em !important;float:left !important;margin-left:.75em !important;margin-top:.5em !important;font-size:.75em !important;white-space:nowrap !important}#pt-userpage,#pt-anonuserpage{background-position:left top !important;background-repeat:no-repeat !important;background-image:url('skins/Vector/images/user-icon.png') !important;background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/user-icon.svg') !important;background-image:linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/user-icon.svg') !important;padding-left:15px !important !important}#p-search{float:left !important;margin-right:.5em !important;margin-left:.5em !important}#p-search h3{display:none !important}#p-search form,#p-search input{margin:0 !important;margin-top:.4em !important}div#simpleSearch{display:block !important;width:12.6em !important;padding-right:1.4em !important;height:1.4em !important;margin-top:.65em !important;position:relative !important;min-height:1px !important;border:solid 1px #aaa !important;color:black !important;background-color:white !important;background-image:/* @embed */ url('skins/Vector/images/search-fade.png') !important;background-position:top left !important;background-repeat:repeat-x !important}div#simpleSearch input{margin:0 !important;padding:0 !important;border:0 !important;background-color:transparent !important;color:black !important}div#simpleSearch #searchInput{width:100% !important;padding:.2em 0 .2em .2em !important;font-size:13px !important;direction:ltr !important;-webkit-appearance:textfield !important}div#simpleSearch #searchInput:focus{outline:none !important}div#simpleSearch #searchInput.placeholder{color:#999 !important}div#simpleSearch #searchInput:-ms-input-placeholder{color:#999 !important}div#simpleSearch #searchInput:-moz-placeholder{color:#999 !important}div#simpleSearch #searchInput::-webkit-search-decoration,div#simpleSearch #searchInput::-webkit-search-cancel-button,div#simpleSearch #searchInput::-webkit-search-results-button,div#simpleSearch #searchInput::-webkit-search-results-decoration{-webkit-appearance:textfield !important}div#simpleSearch #searchButton,div#simpleSearch #mw-searchButton{position:absolute !important;top:0 !important;right:0 !important;width:1.65em !important;height:100% !important;cursor:pointer !important;text-indent:-99999px !important;line-height:1 !important;direction:ltr !important;white-space:nowrap !important;overflow:hidden !important;background-image:url('skins/Vector/images/search-ltr.png') !important;background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/search-ltr.svg') !important;background-image:linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/search-ltr.svg') !important;background-position:center center !important;background-repeat:no-repeat !important}div#simpleSearch #mw-searchButton{z-index:1 !important}div.vectorTabs h3{display:none !important}div.vectorTabs{float:left !important;height:2.5em !important;background-image:/* @embed */ url('skins/Vector/images/tab-break.png') !important;background-position:bottom left !important;background-repeat:no-repeat !important;padding-left:1px !important}div.vectorTabs ul{float:left !important;height:100% !important;list-style-type:none !important;list-style-image:none !important;margin:0 !important;padding:0 !important;background-image:/* @embed */ url('skins/Vector/images/tab-break.png') !important;background-position:right bottom !important;background-repeat:no-repeat !important}div.vectorTabs ul li{float:left !important;line-height:1.125em !important;display:inline-block !important;height:100% !important;margin:0 !important;padding:0 !important;background-color:#f3f3f3 !important;background-image:/* @embed */ url('skins/Vector/images/tab-normal-fade.png') !important;background-position:bottom left !important;background-repeat:repeat-x !important;white-space:nowrap !important}div.vectorTabs ul>li{display:block !important}div.vectorTabs li.new a,div.vectorTabs li.new a:visited{color:#a55858 !important}div.vectorTabs li.selected{background-image:/* @embed */ url('skins/Vector/images/tab-current-fade.png') !important}div.vectorTabs li.selected a,div.vectorTabs li.selected a:visited{color:#333 !important;text-decoration:none !important}div.vectorTabs li.icon a{background-position:bottom right !important;background-repeat:no-repeat !important}div.vectorTabs li a{display:inline-block !important;height:1.9em !important;padding-left:.5em !important;padding-right:.5em !important;color:#7d9ed4 !important;cursor:pointer !important;font-size:.8em !important}div.vectorTabs li>a{display:block !important}div.vectorTabs span{display:inline-block !important;background-image:/* @embed */ url('skins/Vector/images/tab-break.png') !important;background-position:bottom right !important;background-repeat:no-repeat !important}div.vectorTabs span a{display:inline-block !important;padding-top:1.25em !important}div.vectorTabs span>a{float:left !important;display:block !important}div.vectorMenu{direction:ltr !important;float:left !important;cursor:pointer !important;position:relative !important}body.rtl div.vectorMenu{direction:rtl !important}div#mw-head div.vectorMenu h3{float:left !important;background-image:/* @embed */ url('skins/Vector/images/tab-break.png') !important;background-repeat:no-repeat !important;background-position:bottom right !important;margin-left:-1px !important;font-size:1em !important;height:2.5em !important;padding-right:1px !important;margin-right:-1px !important}div.vectorMenu h3 span{display:block !important;font-size:.8em !important;padding-left:.7em !important;padding-top:1.375em !important;margin-right:20px !important;font-weight:normal !important;color:#4d4d4d !important}div.vectorMenu h3 a{position:absolute !important;top:0 !important;right:0 !important;width:20px !important;height:2.5em !important;background-image:url('skins/Vector/images/arrow-down-icon.png') !important;background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/arrow-down-icon.svg') !important;background-image:linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/arrow-down-icon.svg') !important;background-position:100% 70% !important;background-repeat:no-repeat !important;-webkit-transition:background-position 250ms !important;-moz-transition:background-position 250ms !important;-o-transition:background-position 250ms !important;transition:background-position 250ms !important}div.vectorMenu.menuForceShow h3 a{background-position:100% 100% !important}div.vectorMenuFocus h3 a{background-image:url('skins/Vector/images/arrow-down-focus-icon.png') !important;background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/arrow-down-focus-icon.svg') !important;background-image:linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/arrow-down-focus-icon.svg') !important}div.vectorMenu div.menu{min-width:100% !important;position:absolute !important;top:2.5em !important;left:-1px !important;background-color:white !important;border:solid 1px silver !important;border-top-width:0 !important;clear:both !important;text-align:left !important;display:none !important}div.vectorMenu:hover div.menu,div.vectorMenu.menuForceShow div.menu{display:block !important}div.vectorMenu ul{list-style-type:none !important;list-style-image:none !important;padding:0 !important;margin:0 !important;text-align:left !important}div.vectorMenu ul,x:-moz-any-link{min-width:5em !important}div.vectorMenu ul,x:-moz-any-link,x:default{min-width:0 !important}div.vectorMenu li{padding:0 !important;margin:0 !important;text-align:left !important;line-height:1em !important}div.vectorMenu li a{display:inline-block !important;padding:.5em !important;white-space:nowrap !important;color:#7d9ed4 !important;cursor:pointer !important;font-size:.8em !important}div.vectorMenu li>a{display:block !important}div.vectorMenu li.selected a,div.vectorMenu li.selected a:visited{color:#333 !important;text-decoration:none !important}@-webkit-keyframes rotate{from{-webkit-transform:rotate(0deg) !important;-moz-transform:rotate(0deg) !important;transform:rotate(0deg) !important}to{-webkit-transform:rotate(360deg) !important;-moz-transform:rotate(360deg) !important;transform:rotate(360deg) !important} !important}@-moz-keyframes rotate{from{-webkit-transform:rotate(0deg) !important;-moz-transform:rotate(0deg) !important;transform:rotate(0deg) !important}to{-webkit-transform:rotate(360deg) !important;-moz-transform:rotate(360deg) !important;transform:rotate(360deg) !important} !important}@-o-keyframes rotate{from{-webkit-transform:rotate(0deg) !important;-moz-transform:rotate(0deg) !important;transform:rotate(0deg) !important}to{-webkit-transform:rotate(360deg) !important;-moz-transform:rotate(360deg) !important;transform:rotate(360deg) !important} !important}@keyframes rotate{from{-webkit-transform:rotate(0deg) !important;-moz-transform:rotate(0deg) !important;transform:rotate(0deg) !important}to{-webkit-transform:rotate(360deg) !important;-moz-transform:rotate(360deg) !important;transform:rotate(360deg) !important} !important}#ca-unwatch.icon a,#ca-watch.icon a{margin:0 !important;padding:0 !important;display:block !important;width:26px !important;padding-top:3.1em !important;margin-top:0 !important;height:0 !important;overflow:hidden !important;background-position:5px 60% !important}#ca-unwatch.icon a{background-image:url('skins/Vector/images/unwatch-icon.png') !important;background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/unwatch-icon.svg') !important;background-image:linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/unwatch-icon.svg') !important}#ca-watch.icon a{background-image:url('skins/Vector/images/watch-icon.png') !important;background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/watch-icon.svg') !important;background-image:linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/watch-icon.svg') !important}#ca-unwatch.icon a:hover,#ca-unwatch.icon a:focus{background-image:url('skins/Vector/images/unwatch-icon-hl.png') !important;background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/unwatch-icon-hl.svg') !important;background-image:linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/unwatch-icon-hl.svg') !important}#ca-watch.icon a:hover,#ca-watch.icon a:focus{background-image:url('skins/Vector/images/watch-icon-hl.png') !important;background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/watch-icon-hl.svg') !important;background-image:linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/watch-icon-hl.svg') !important}#ca-unwatch.icon a.loading,#ca-watch.icon a.loading{background-image:url('skins/Vector/images/watch-icon-loading.png') !important;background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/watch-icon-loading.svg') !important;background-image:linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/watch-icon-loading.svg') !important;-webkit-animation:rotate 700ms infinite linear !important;-moz-animation:rotate 700ms infinite linear !important;-o-animation:rotate 700ms infinite linear !important;animation:rotate 700ms infinite linear !important;outline:none !important;cursor:default !important;pointer-events:none !important;background-position:50% 60% !important;-webkit-transform-origin:50% 57% !important;transform-origin:50% 57% !important}#ca-unwatch.icon a span,#ca-watch.icon a span{display:none !important}#mw-navigation h2{position:absolute !important;top:-9999px !important}#mw-page-base{height:5em !important;background-position:bottom left !important;background-repeat:repeat-x !important;background-image:url('skins/Vector/images/page-fade.png') !important;background-color:#2a2a2a !important;background-image:-moz-linear-gradient(top, #333 50%, #2a2a2a 100%) !important;background-image:-webkit-gradient(linear, left top, left bottom, color-stop(50%, #333), color-stop(100%, #2a2a2a)) !important;background-image:-webkit-linear-gradient(top, #333 50%, #2a2a2a 100%) !important;background-image:linear-gradient(#333 50%, #2a2a2a 100%) !important;background-color:#333 !important}#mw-head-base{margin-top:-5em !important;margin-left:10em !important;height:5em !important}div#mw-head{position:absolute !important;top:0 !important;right:0 !important;width:100% !important}div#mw-head h3{margin:0 !important;padding:0 !important}#left-navigation{float:left !important;margin-left:10em !important;margin-top:2.5em !important;margin-bottom:-2.5em !important;display:inline !important}#right-navigation{float:right !important;margin-top:2.5em !important}#p-logo{position:absolute !important;top:-160px !important;left:0 !important;width:10em !important;height:160px !important}#p-logo a{display:block !important;width:10em !important;height:160px !important;background-repeat:no-repeat !important;background-position:center center !important;text-decoration:none !important}div#mw-panel{font-size:inherit !important;position:absolute !important;top:160px !important;padding-top:1em !important;width:10em !important;left:0 !important}div#mw-panel div.portal{margin:0 .6em 0 .7em !important;padding:.25em 0 !important;direction:ltr !important;background-position:top left !important;background-repeat:no-repeat !important;background-image:/* @embed */ url('skins/Vector/images/portal-break.png') !important}div#mw-panel div.portal h3{font-size:.75em !important;color:#4d4d4d !important;font-weight:normal !important;margin:0 !important;padding:.25em 0 .25em .25em !important;cursor:default !important;border:none !important}div#mw-panel div.portal div.body{margin:0 0 0 1.25em !important;padding-top:0 !important}div#mw-panel div.portal div.body ul{list-style-type:none !important;list-style-image:none !important;margin:0 !important;padding:0 !important}div#mw-panel div.portal div.body ul li{line-height:1.125em !important;margin:0 !important;padding:.25em 0 !important;font-size:.75em !important;word-wrap:break-word !important}div#mw-panel div.portal div.body ul li a{color:#7d9ed4 !important}div#mw-panel div.portal div.body ul li a:visited{color:#8a7f6c !important}div#mw-panel div.portal.first{background-image:none !important;margin-top:0 !important}div#mw-panel div.portal.first h3{display:none !important}div#mw-panel div.portal.first div.body{margin-left:.5em !important}div#footer{margin-left:10em !important;margin-top:0 !important;padding:.75em !important;direction:ltr !important}div#footer ul{list-style-type:none !important;list-style-image:none !important;margin:0 !important;padding:0 !important}div#footer ul li{margin:0 !important;padding:0 !important;padding-top:.5em !important;padding-bottom:.5em !important;color:#333 !important;font-size:.7em !important}div#footer #footer-icons{float:right !important}div#footer #footer-icons li{float:left !important;margin-left:.5em !important;line-height:2em !important;text-align:right !important}div#footer #footer-info li{line-height:1.4em !important}div#footer #footer-places li{float:left !important;margin-right:1em !important;line-height:2em !important}body.ltr div#footer #footer-places{float:left !important}.mw-body .external{background-position:center right !important;background-repeat:no-repeat !important;background-image:url('skins/Vector/images/external-link-ltr-icon.png') !important;background-image:-webkit-linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/external-link-ltr-icon.svg') !important;background-image:linear-gradient(transparent, transparent),/* @embed */ url('skins/Vector/images/external-link-ltr-icon.svg') !important;padding-right:13px !important}