Style Editor [Chrome] - Dark Theme [Updated]

A dark theme for the Stylish style editor chrome extension. It also includes a code section for recoloring the default syntax highlighting theme.

当前为 2024-12-27 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

/* ==UserStyle==
@name         Style Editor [Chrome] - Dark Theme [Updated]
@namespace    USO Archive
@author       Paul Stevenson - [Updated by Nick2bad4u]
@description  A dark theme for the Stylish style editor chrome extension.  It also includes a code section for recoloring the default syntax highlighting theme.
@version      1.0.1
@license      CC-BY-SA-4.0
@preprocessor uso
==/UserStyle== */
@-moz-document regexp("chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe/.*"), regexp("chrome-extension://clngdbkpkpeebahjckkjfobafhncgmne/.*") {
body {
    color: #ccccff;
    background: #111111;
}

#stylish-popup {
	background: #ffffff;
	color: #000000;
}

a, a:visited, a:active {
	color: #00ccff;
}

a:hover {
	color: #99ffff;
}

input, #name, .applies-value, select {
    background: #000000;
    color: #00ffff;
    border-color: #0099ff;
}

button {
    background: #222222;
    color: #9999ff;
    border-color: #5555ff;
}

button:hover {
	background: #000000;
	color: #99ccff;
}

input[type="checkbox"] {
    display: none;
}

label {
    cursor: pointer;
}

#header {
	border-right: 1px dashed #0099ff;
}

input[type="checkbox"] + label:before {
    border: 1px solid #0099ff;
    content: "\00a0";
    display: inline-block;
    font: 16px/1em sans-serif;
    margin: 0 .25em 0 0;
    padding: 0;
    vertical-align: top;
    height: 16px;
    width: 16px;
}

input[type="checkbox"]:checked + label:before {
    background: #000000;
    color: #ccccff;
    content: "\2713";
    text-align: center;
}

input[type="checkbox"]:checked + label:after {
    font-weight: bold;
}

#help-popup {
    background: rgba(0,0,0,0.8);
}

#help-popup .close-icon {
    background: linear-gradient(-45deg, transparent 5px, white 5px, white 6px, transparent 6.5px) no-repeat, linear-gradient(45deg, transparent 5px, white 5px, white 6px, transparent 6.5px) no-repeat;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 8px;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: rgba(0,100,255,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,100,255,0.4);
}
}

@-moz-document regexp("chrome-extension://fjnbnpbmkenffdnngjfgmeleoegfcffe/.*") {
/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: #ffffff;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: black; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #0099ff;
  background-color: #000000;
  white-space: nowrap;
}
.CodeMirror-linenumbers {
  background: none;}
.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #5599ff;
  white-space: nowrap;
}

.CodeMirror-guttermarker { color: #ffffff; }
.CodeMirror-guttermarker-subtle { color: #fff; }

/* CURSOR */

.CodeMirror div.CodeMirror-cursor {
  border-left: 1px solid #fff;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.CodeMirror.cm-fat-cursor div.CodeMirror-cursor {
  width: auto;
  border: 0;
  background: #7e7;
}
.CodeMirror.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}

.cm-animate-fat-cursor {
  width: auto;
  border: 0;
  -webkit-animation: blink 1.06s steps(1) infinite;
  -moz-animation: blink 1.06s steps(1) infinite;
  animation: blink 1.06s steps(1) infinite;
  background-color: #7e7;
}
@-moz-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@-webkit-keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}
@keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}

/* Can style cursor different in overwrite (non-insert) mode */
div.CodeMirror-overwrite div.CodeMirror-cursor {
  color: #ffffff;
}

.cm-tab { display: inline-block; text-decoration: inherit; }

.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {color: #00f;}
.cm-s-default .cm-quote {color: #7e7;}
.cm-negative {color: #f00;}
.cm-positive {color: #7e7;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}

.cm-s-default .cm-keyword {color: #ffac3f;}
.cm-s-default .cm-atom {color: #9b8dff;}
.cm-s-default .cm-number {color: #00dfff;}
.cm-s-default .cm-def {color: #9999ff;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator { color: #ff00ff;}
.cm-s-default .cm-variable-2 {color: #62b0ff;}
.cm-s-default .cm-variable-3 {color: #88ffd3;}
.cm-s-default .cm-comment {color: #00ff2e;}
.cm-s-default .cm-string {color: #ff9500;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #c3c3c3;}
.cm-s-default .cm-qualifier {color: #dddddd;}
.cm-s-default .cm-builtin {color: #97b6ff;}
.cm-s-default .cm-bracket {color: #fff;}
.cm-s-default .cm-tag {color: #5599ff;}
.cm-s-default .cm-attribute {color: #7d7dff;}
.cm-s-default .cm-hr {color: #ff9f9f;}
.cm-s-default .cm-link {color: #00ffd6;}

.cm-s-default .cm-error {color: #ff7474;}
.cm-invalidchar {color: #ff7a7a;}

.CodeMirror-composing { border-bottom: 2px solid; }

div.CodeMirror span.CodeMirror-matchingbracket {color: #fdff00;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #0c0c0c;}

.CodeMirror {
  background: #0c0c0c;
}

.CodeMirror-selected { background: #000000; }
.CodeMirror-focused .CodeMirror-selected { background: #000000; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #000000; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #000000; }

.cm-searching {
  background: #00ff00;
  background: rgba(0,255,0, 0.5);
  border-bottom: 1px solid #ff9900;
}

}