2020년 6월 21일 13시 29분 업데이트
배터리를 아끼기 위해 작업해본 페미위키 다크모드입니다. 자신의 사용자문서 css(사용자:닉네임/femiwiki.css
)에 아래 코드를 추가하면 다크모드를 사용할 수 있습니다. 해당 문서가 없으면 만드신 후 넣으면 됩니다. 자바스크립트 문서는 못 건드리고 css로만 하다 보니 엉성할 수 있습니다. 쓰시다가 불편한 점을 발견하시면 이 문서의 토론문서에 의견을 남겨 주세요. 코드는 수시로 업데이트됩니다.
.mw-body {
#mw-notification-area {
.mw-notification {
border: solid 1px #19456b;
background-color: #3e4e5c;
}
}
}
.mw-body-content {
a.external {
color: @color3;
}
a.new {
color: #fa7f8e;
&:visited {
color: #bf7878;
}
}
a.stub {
color: #e64c6a;
}
// @See https://femiwiki.com/w/Topic:Tvsoi1ez3qwf7l7b
s,
strike {
color: gray;
}
code {
color: gainsboro;
background-color: #707070;
border: 1px solid #a1a1a1;
}
// Headings
h1,
h2,
h3,
h4,
h5,
h6 {
color: #f1f1f1;
}
h2 {
border-bottom: 2px solid #c1b1e3;
}
h3 {
border-bottom: 1px dotted #c1b1e3;
}
hr {
background-color: #a2a9b1;
border: 0;
margin: 0.2em 0;
}
table.wikitable {
// IE needs inline-block to position scrolling shadows otherwise use:
background-color: transparent;
}
// CSS only Responsive Tables
// http://dbushell.com/2016/03/04/css-only-responsive-tables/
// by David Bushell
.wikitable,
.wikitable--flip tbody {
-webkit-overflow-scrolling: touch;
background: -webkit-radial-gradient(left ellipse,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0) 75%) 0 center,
-webkit-radial-gradient(right ellipse,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0) 75%) 100% center;
background: radial-gradient(ellipse at left,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0) 75%) 0 center,
radial-gradient(ellipse at right,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0) 75%)
}
.wikitable th:first-child,
.wikitable td:first-child,
.wikitable--flip tbody tr:first-child {
background-image: -webkit-linear-gradient(left,
white 50%,
rgba(255, 255, 255, 0) 100%);
background-image: linear-gradient(to right,
white 50%,
rgba(255, 255, 255, 0) 100%);
}
.wikitable th:last-child,
.wikitable td:last-child,
.wikitable--flip tbody tr:last-child {
background-image: -webkit-linear-gradient(right,
white 50%,
rgba(255, 255, 255, 0) 30%);
background-image: linear-gradient(to left,
white 50%,
rgba(255, 255, 255, 0) 30%);
}
.wikitable th {
color: gainsboro;
}
.wikitable > * > tr > th,
.wikitable > * > tr > td {
background-color: transparent;
border: 1px solid #ddd;
}
textarea:not(.ve-init-mw-tempWikitextEditorWidget) {
border: 1px solid #c8ccd1;
box-sizing: border-box;
}
*:not(.mw-highlight) > pre:not(.CodeMirror-line) {
background-color: #a1a1a1;
color: gainsboro;
white-space: pre-wrap;
}
.mw-highlight > pre {
background-color: #adadad;
color: gainsboro;
}
#contentSub {
color: #868f96;
.flaggedrevs_short {
background-color: transparent;
}
}
#mw-content-text {
.mw-warning {
border: 1px solid #a2a9b1;
background-color: #696969;
}
.magnify {
a {}
}
}
.catlinks,
#mw-content-text .mw-parser-output .fw-catlinks {
border: 0 solid #a2a9b1;
background-color: transparent;
ul {}
}
.fw-catlinks-toggle {
color: #bababa;
background-color: transparent;
}
.btn,
.btn:hover,
.btn:visited {
color: gainsboro;
background-color: #7975a1;
}
// VisualEditor
.ve-init-mw-desktopArticleTarget-toolbar,
.ve-init-mw-desktopArticleTarget-toolbarPlaceholder {
margin: 0;
}
}
.mw-parser-output {
// Table of contents
.toc {
background-color: inherit;
ul,
// Override mediawiki.legacy
ul ul {
li {
.tocnumber {
color: gainsboro;
}
}
}
&::before {
border-bottom: 2px solid #8981d3;
}
&::after {
border-top: 2px solid #8981d3;
}
}
// Interwiki Styling
a.extiw,
a.extiw:active {
color: #6394eb;
}
a.extiw:visited {
color: #c28cc2;
}
a.extiw:active {
color: #e89664;
}
// External links
a.external:active {
color: #e89664;
}
// Links
a.external {
color: #b6b6f0;
}
a.new {
color: #fa7f8e;
&:visited {
color: #bf7878;
}
}
// Image
.thumb {
.thumbinner {
background-color: #3d3d3d;
border: 1px solid #c8ccd1;
}
}
.thumbimage {
background-color: #333333;
border: 1px solid #c8ccd1;
}
}
body {
background-color: #333333;
color: gainsboro;
}
a {
color: #b6b6f0;
}
a.new {
color: #fa7f8e !important;
&:visited {
color: #bf7878;
}
}
#p-header #p-title-and-tb h1.firstHeading,
.oo-ui-window .mw-body-content h1.firstHeading {
color: gainsboro;
}
.mw-body-content .mw-highlight > pre {
color: gainsboro;
background-color: #444444;
}
.mw-plusminus-pos {
color: YELLOWGREEN;
}
.mw-plusminus-neg {
color: #f09880;
}
.mw-special-Recentchanges .mw-body #bodyContent div.mw-changeslist .mw-changeslist-line:not(tr):nth-child(odd),
.mw-special-Recentchangeslinked .mw-body #bodyContent div.mw-changeslist .mw-changeslist-line:not(tr):nth-child(odd),
.mw-special-Watchlist .mw-body #bodyContent div.mw-changeslist .mw-changeslist-line:not(tr):nth-child(odd) {
background-color: #343434;
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
background: #444444;
}
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
background-color: #555555;
}
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title {
color: gainsboro;
}
bdi {
color: gainsboro;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: #555555;
}
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active:focus,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
background-color: #444444;
}
.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon:not(.oo-ui-image-invert),
.oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator:not(.oo-ui-image-invert) {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: #343434;
}
.mw-special-Recentchanges .mw-body #bodyContent div.mw-changeslist h4,
.mw-special-Recentchangeslinked .mw-body #bodyContent div.mw-changeslist h4,
.mw-special-Watchlist .mw-body #bodyContent div.mw-changeslist h4 {
color: gainsboro;
}
.nav-bar #mw-navigation #p-search #searchInput {
background-color: #333333;
}
.nav-bar #mw-navigation #site-navigation a {
color: gainsboro;
}
#fw-menu .mw-portlet h3,
#fw-menu .portal h3 {
color: gainsboro;
}
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
color: gainsboro;
}
.mwe-popups .mwe-popups-extract {
a {
color: #333333;
}
}
@media screen {
a:visited {
color: #b6b6f0;
}
}
.mw-parser-output a.external {
color: #b6b6f0;
}
.oo-ui-panelLayout-padded {
padding: 1.14285714em;
background-color: #333333;
}
.oo-ui-processDialog-location,
.ve-ui-mwSaveDialog-options {
background-color: #444;
}
.ve-ui-mwSaveDialog-license {
color: gainsboro;
}
.mw-parser-output .notice {
color: gainsboro;
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: gainsboro;
}
/* 바뀐글 페이지에서 나오는 이름공간과 태그 글자색*/
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
color: inherit;
background-color: dimgray;
}
/* 검색창에 입력되는 글자색 */
.nav-bar #mw-navigation #p-search #searchInput {
color: gainsboro;
}
/* 문서 저장시 경고창 */
.oo-ui-messageDialog-message {
color: gainsboro;
}
/* 문서 저장시 경고창, 바뀐글 버튼 */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: gainsboro;
background-color: #333;
&
}
/* 바뀐글 버튼 hover */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
color: gainsboro;
}
.mw-parser-output .인용문 {
background-color: #444;
}
.mw-body-content *:not(.mw-highlight) > pre:not(.CodeMirror-line) {
background: #ddd;
}
/* 인라인 코드 */
.mw-parser-output kbd {
background-color: transparent;
}
/* 책날개 사이드바 */
.book-flap-side {
background-color: #444;
}
/* 목차 순서리스트 */
.mw-parser-output .toc ul li .tocnumber,
.mw-parser-output .toc ul ul li .tocnumber {
color: gainsboro;
}
.mw-body-content .wikitable {
background-color: transparent;
color: gainsboro;
}
.flow-component.flow-board-page.flow-full-height-side-rail .flow-board-header:before {
background-color: #444;
}
.flow-topic-titlebar {
background-color: #444;
}
.flow-post {
color: gainsboro;
}
span.mw-ui-icon {
-webkit-filter: invert(100%);
filter: invert(100%);
}
/* 게시판 텍스트박스 */
.flow-component .ve-init-mw-target-surface.ve-ui-surface-source .ve-ce-documentNode,
.flow-component .ve-init-mw-target-surface.ve-ui-surface-source .ve-ui-surface-placeholder {
background: #555;
}
.flow-component .flow-ui-editorWidget-focused > .flow-ui-editorWidget-editor > .oo-ui-toolbar > .oo-ui-toolbar-bar {
background: #555;
}
.mw-body-content code {
color: #F8C471;
background: #555;
border: 1px solid #333;
}
.diff-context {
background: #555;
color: gainsboro;
}
/*편집 되돌리기 시 변경사항 폰트색*/
body.action-edit .diff-deletedline, body.action-edit .diff-addedline {
color: #333;
}
/*내비게이션바 바뀐글 및 임의글 폰트색*/
.nav-bar #mw-navigation #site-navigation a {
color: white;
}