Add dark mode styles for EasyMDE editor

2025-12-07 06:34:36 -05:00
parent 581cad4a93
commit 1d5e7ca003
2 changed files with 575 additions and 0 deletions
--- a/themes/lucentui/css/easymde.css
+++ b/themes/lucentui/css/easymde.css
@@ -0,0 +1,169 @@
+/* =============================================================================
+   EASYMDE EDITOR DARK MODE STYLES
+   ============================================================================= */
+
+/* Toolbar Container */
+.EasyMDEContainer .editor-toolbar {
+    background-color: hsl(var(--color-background-secondary)) !important;
+    border-color: hsl(var(--color-neutral)) !important;
+    border-radius: 0.5rem 0.5rem 0 0;
+    padding: 0.5rem;
+}
+
+/* Toolbar Buttons */
+.EasyMDEContainer .editor-toolbar button {
+    color: hsl(var(--color-base)) !important;
+    background-color: transparent !important;
+    border: 1px solid transparent !important;
+    border-radius: 0.375rem;
+    padding: 0.25rem 0.5rem;
+    transition: all 0.2s ease;
+}
+
+.EasyMDEContainer .editor-toolbar button:hover {
+    background-color: hsl(var(--color-neutral) / 0.3) !important;
+    border-color: hsl(var(--color-neutral)) !important;
+}
+
+.EasyMDEContainer .editor-toolbar button.active {
+    background-color: hsl(var(--color-primary) / 0.2) !important;
+    border-color: hsl(var(--color-primary)) !important;
+    color: hsl(var(--color-primary)) !important;
+}
+
+/* Toolbar Separator */
+.EasyMDEContainer .editor-toolbar i.separator {
+    border-left-color: hsl(var(--color-neutral)) !important;
+    border-right-color: hsl(var(--color-neutral)) !important;
+}
+
+/* CodeMirror Editor Area */
+.EasyMDEContainer .CodeMirror {
+    background-color: hsl(var(--color-background)) !important;
+    border-color: hsl(var(--color-neutral)) !important;
+    border-radius: 0 0 0.5rem 0.5rem;
+    color: hsl(var(--color-base)) !important;
+}
+
+.EasyMDEContainer .CodeMirror-cursor {
+    border-left-color: hsl(var(--color-base)) !important;
+}
+
+/* Placeholder Text */
+.EasyMDEContainer .CodeMirror .CodeMirror-placeholder {
+    color: hsl(var(--color-muted)) !important;
+    opacity: 0.7;
+}
+
+/* Selected Text */
+.EasyMDEContainer .CodeMirror-selected {
+    background-color: hsl(var(--color-primary) / 0.3) !important;
+}
+
+/* Scrollbar Styling */
+.EasyMDEContainer .CodeMirror-scroll {
+    scrollbar-width: thin;
+    scrollbar-color: hsl(var(--color-neutral)) transparent;
+}
+
+.EasyMDEContainer .CodeMirror-scroll::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.EasyMDEContainer .CodeMirror-scroll::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.EasyMDEContainer .CodeMirror-scroll::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--color-neutral));
+    border-radius: 4px;
+}
+
+/* Status Bar */
+.EasyMDEContainer .editor-statusbar {
+    background-color: hsl(var(--color-background-secondary)) !important;
+    border-color: hsl(var(--color-neutral)) !important;
+    color: hsl(var(--color-muted)) !important;
+    padding: 0.25rem 0.5rem;
+}
+
+/* Preview Mode */
+.EasyMDEContainer .editor-preview {
+    background-color: hsl(var(--color-background)) !important;
+    color: hsl(var(--color-base)) !important;
+}
+
+.EasyMDEContainer .editor-preview-side {
+    background-color: hsl(var(--color-background-secondary)) !important;
+    border-color: hsl(var(--color-neutral)) !important;
+    color: hsl(var(--color-base)) !important;
+}
+
+/* Fullscreen Mode */
+.EasyMDEContainer.fullscreen .editor-toolbar,
+.EasyMDEContainer.fullscreen .CodeMirror,
+.EasyMDEContainer.fullscreen .editor-preview-side {
+    background-color: hsl(var(--color-background)) !important;
+}
+
+/* Markdown Syntax Highlighting */
+.EasyMDEContainer .cm-header {
+    color: hsl(var(--color-primary)) !important;
+}
+
+.EasyMDEContainer .cm-quote {
+    color: hsl(var(--color-muted)) !important;
+    font-style: italic;
+}
+
+.EasyMDEContainer .cm-link {
+    color: hsl(var(--color-info)) !important;
+}
+
+.EasyMDEContainer .cm-url {
+    color: hsl(var(--color-info)) !important;
+    opacity: 0.7;
+}
+
+.EasyMDEContainer .cm-strong {
+    color: hsl(var(--color-base)) !important;
+    font-weight: bold;
+}
+
+.EasyMDEContainer .cm-em {
+    color: hsl(var(--color-base)) !important;
+    font-style: italic;
+}
+
+.EasyMDEContainer .cm-strikethrough {
+    color: hsl(var(--color-muted)) !important;
+    text-decoration: line-through;
+}
+
+.EasyMDEContainer .cm-comment {
+    color: hsl(var(--color-muted)) !important;
+}
+
+/* Code blocks */
+.EasyMDEContainer .cm-s-easymde .cm-comment {
+    background-color: hsl(var(--color-neutral) / 0.2) !important;
+    border-radius: 0.25rem;
+    padding: 0.125rem 0.25rem;
+}
+
+/* Gutters */
+.EasyMDEContainer .CodeMirror-gutters {
+    background-color: hsl(var(--color-background-secondary)) !important;
+    border-right-color: hsl(var(--color-neutral)) !important;
+}
+
+.EasyMDEContainer .CodeMirror-linenumber {
+    color: hsl(var(--color-muted)) !important;
+}
+
+/* Focus States */
+.EasyMDEContainer .CodeMirror-focused {
+    outline: none;
+    box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.3);
+}