From fb606929ef39ca74e6d22b3688fd38a7956cee5f Mon Sep 17 00:00:00 2001 From: yflory Date: Wed, 10 Feb 2021 10:38:02 +0100 Subject: [PATCH] New CodeMirror theme in dark mode --- www/common/sframe-common-codemirror.js | 2 +- www/common/theme/cryptpad-dark.css | 46 +++++++++++++++++++++++++ www/common/theme/dracula-cryptpad.css | 47 -------------------------- www/common/themes.js | 1 + 4 files changed, 48 insertions(+), 48 deletions(-) create mode 100644 www/common/theme/cryptpad-dark.css delete mode 100644 www/common/theme/dracula-cryptpad.css diff --git a/www/common/sframe-common-codemirror.js b/www/common/sframe-common-codemirror.js index 02370bc47..e65a68fb9 100644 --- a/www/common/sframe-common-codemirror.js +++ b/www/common/sframe-common-codemirror.js @@ -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; diff --git a/www/common/theme/cryptpad-dark.css b/www/common/theme/cryptpad-dark.css new file mode 100644 index 000000000..e070ab89a --- /dev/null +++ b/www/common/theme/cryptpad-dark.css @@ -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; } diff --git a/www/common/theme/dracula-cryptpad.css b/www/common/theme/dracula-cryptpad.css deleted file mode 100644 index f67e1a7b2..000000000 --- a/www/common/theme/dracula-cryptpad.css +++ /dev/null @@ -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; } diff --git a/www/common/themes.js b/www/common/themes.js index 3df706c88..33b76b9fe 100644 --- a/www/common/themes.js +++ b/www/common/themes.js @@ -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",