New CodeMirror theme in dark mode

pull/1/head
yflory 4 years ago
parent f794d0f907
commit fb606929ef

@ -381,7 +381,7 @@ define([
/* Remember the user's last choice of theme using localStorage */
var isDark = window.CryptPad_theme === "dark";
var themeKey = ['codemirror', isDark ? 'themedark' : 'theme'];
var defaultTheme = isDark ? 'dracula' : 'default';
var defaultTheme = isDark ? 'cryptpad-dark' : 'default';
var todo = function (err, lastTheme) {
lastTheme = lastTheme || defaultTheme;

@ -0,0 +1,46 @@
/*
Name: cryptpad-dark
Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)
Customised for CryptPad by David Benqué
*/
.cm-s-cryptpad-dark.CodeMirror, .cm-s-cryptpad-dark .CodeMirror-gutters {
background-color: #323232 !important;
color: #f8f8f2 !important;
border: none;
}
.cm-s-cryptpad-dark .CodeMirror-gutters { color: #282a36; }
.cm-s-cryptpad-dark .CodeMirror-cursor { border-left: solid thin #f8f8f0; }
.cm-s-cryptpad-dark .CodeMirror-linenumber { color: #6D8A88; }
.cm-s-cryptpad-dark.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
.cm-s-cryptpad-dark .CodeMirror-line::selection, .cm-s-cryptpad-dark .CodeMirror-line > span::selection, .cm-s-cryptpad-dark .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.2); }
.cm-s-cryptpad-dark .CodeMirror-line::-moz-selection, .cm-s-cryptpad-dark .CodeMirror-line > span::-moz-selection, .cm-s-cryptpad-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
.cm-s-cryptpad-dark span.cm-comment { color: #66d9ef; }
.cm-s-cryptpad-dark span.cm-string, .cm-s-cryptpad-dark span.cm-string-2 { color: #f1fa8c; }
.cm-s-cryptpad-dark span.cm-number { color: #bd93f9; }
.cm-s-cryptpad-dark span.cm-variable { color: #50fa7b; }
.cm-s-cryptpad-dark span.cm-variable-2 { color: white; }
.cm-s-cryptpad-dark span.cm-def { color: #ffb86c; }
.cm-s-cryptpad-dark span.cm-keyword { color: #ff79c6; }
.cm-s-cryptpad-dark span.cm-operator { color: #ff79c6; }
.cm-s-cryptpad-dark span.cm-keyword { color: #ff79c6; }
.cm-s-cryptpad-dark span.cm-atom { color: #bd93f9; }
.cm-s-cryptpad-dark span.cm-meta { color: #99cfff; }
.cm-s-cryptpad-dark span.cm-tag { color: #ff79c6; }
.cm-s-cryptpad-dark span.cm-attribute { color: #50fa7b; }
.cm-s-cryptpad-dark span.cm-qualifier { color: #50fa7b; }
.cm-s-cryptpad-dark span.cm-property { color: #66d9ef; }
.cm-s-cryptpad-dark span.cm-builtin { color: #50fa7b; }
.cm-s-cryptpad-dark span.cm-variable-3 { color: #50fa7b; }
.cm-s-cryptpad-dark span.cm-header { color: #bd93f9;}
.cm-s-cryptpad-dark span.cm-link { color: #ff79c6;}
.cm-s-cryptpad-dark span.cm-strong { color: #ffb86c;}
.cm-s-cryptpad-dark span.cm-em { color: #f1fa8c;}
.cm-s-cryptpad-dark .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); }
.cm-s-cryptpad-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

@ -1,47 +0,0 @@
/*
Name: dracula
Author: Michael Kaminsky (http://github.com/mkaminsky11)
Original dracula color scheme by Zeno Rocha (https://github.com/zenorocha/dracula-theme)
Customised for CryptPad by David Benqué
*/
.cm-s-dracula.CodeMirror, .cm-s-dracula .CodeMirror-gutters {
background-color: #323232 !important;
color: #f8f8f2 !important;
border: none;
}
.cm-s-dracula .CodeMirror-gutters { color: #282a36; }
.cm-s-dracula .CodeMirror-cursor { border-left: solid thin #f8f8f0; }
.cm-s-dracula .CodeMirror-linenumber { color: #6D8A88; }
.cm-s-dracula.CodeMirror-focused div.CodeMirror-selected { background: rgba(255, 255, 255, 0.10); }
.cm-s-dracula .CodeMirror-line::selection, .cm-s-dracula .CodeMirror-line > span::selection, .cm-s-dracula .CodeMirror-line > span > span::selection { background: rgba(255, 255, 255, 0.2); }
.cm-s-dracula .CodeMirror-line::-moz-selection, .cm-s-dracula .CodeMirror-line > span::-moz-selection, .cm-s-dracula .CodeMirror-line > span > span::-moz-selection { background: rgba(255, 255, 255, 0.10); }
.cm-s-dracula span.cm-comment { color: #66d9ef; }
.cm-s-dracula span.cm-string, .cm-s-dracula span.cm-string-2 { color: #f1fa8c; }
.cm-s-dracula span.cm-number { color: #bd93f9; }
.cm-s-dracula span.cm-variable { color: #50fa7b; }
.cm-s-dracula span.cm-variable-2 { color: white; }
.cm-s-dracula span.cm-def { color: #ffb86c; }
.cm-s-dracula span.cm-keyword { color: #ff79c6; }
.cm-s-dracula span.cm-operator { color: #ff79c6; }
.cm-s-dracula span.cm-keyword { color: #ff79c6; }
.cm-s-dracula span.cm-atom { color: #bd93f9; }
.cm-s-dracula span.cm-meta { color: #99cfff; }
.cm-s-dracula span.cm-tag { color: #ff79c6; }
.cm-s-dracula span.cm-attribute { color: #50fa7b; }
.cm-s-dracula span.cm-qualifier { color: #50fa7b; }
.cm-s-dracula span.cm-property { color: #66d9ef; }
.cm-s-dracula span.cm-builtin { color: #50fa7b; }
.cm-s-dracula span.cm-variable-3 { color: #50fa7b; }
.cm-s-dracula span.cm-header { color: #bd93f9;}
.cm-s-dracula span.cm-link { color: #ff79c6;}
.cm-s-dracula span.cm-strong { color: #ffb86c;}
.cm-s-dracula span.cm-em { color: #f1fa8c;}
.cm-s-dracula .CodeMirror-activeline-background { background: rgba(255,255,255,0.1); }
.cm-s-dracula .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

@ -12,6 +12,7 @@ define(function () {
"blackboard blackboard.css",
"cobalt cobalt.css",
"colorforth colorforth.css",
"cryptpad-dark cryptpad-dark.css",
"default default",
"dracula dracula.css",
"eclipse eclipse.css",

Loading…
Cancel
Save