Skip to content
This repository was archived by the owner on Oct 26, 2026. It is now read-only.

Commit 93eafde

Browse files
raphwriterraphwriter
committed
Dark Theme improvements
1 parent 72476d4 commit 93eafde

14 files changed

Lines changed: 194 additions & 123 deletions

File tree

‎Melon.md‎

Lines changed: 71 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ aliases:
77
pageDecoration:
88
prefix: "🍉 "
99
---
10+
# General
1011
```space-style
1112
1213
/* ------------------------------------------------------------------------- */
@@ -16,30 +17,34 @@ pageDecoration:
1617
html {
1718
--editor-width: 960px;
1819
}
20+
```
1921

22+
# Light Theme
23+
```space-style
2024
html[data-theme="light"] {
2125
--root-color: #212122;
2226
2327
/* Custom Variables */
2428
--selection-background-color: #3cad9e54;
2529
--shadow-main: 1px 1px 4px 1px #aaa;
26-
2730
--editor-main-background-color: #fcfcfc;
2831
--editor-main-box-shadow: 1px 1px 4px 1px #ddd;
2932
--editor-secondary-box-shadow: 2px 3px 4px -1px #aaa;
3033
--editor-top-widget-background-color: #eae8d754;
34+
--melon-border-radius-button: 3px;
3135
--melon-color: #3cad9e;
3236
--melon-color-text: #256a61;
3337
--melon-color-text-negative: #ebebeb;
34-
--melon-unsaved-color: #d6222e;
35-
--melon-unsaved-border-color: white;
38+
--melon-media-image-box-shadow: 1px 2px 4px -1px #ccd;
39+
--melon-media-image-border-color: var(--melon-secondary-background-border-color);
40+
--melon-placeholder-color: var(--root-color);
3641
--melon-secondary-background-color: #647479;
3742
--melon-secondary-background-border-color: #e8e8e8;
3843
--melon-secondary-color: #d2d2d2;
3944
--melon-top-selection-color: #187166f5;
40-
--melon-media-image-box-shadow: 1px 2px 4px -1px #ccd;
41-
--melon-media-image-border-color: var(--melon-secondary-background-border-color);
42-
--melon-border-radius-button: 3px;
45+
--melon-unsaved-color: #d6222e;
46+
--melon-unsaved-border-color: white;
47+
4348
4449
/* SilverBullet Variables Overrides */
4550
--action-button-background-color: transparent;
@@ -72,6 +77,7 @@ html[data-theme="light"] {
7277
--editor-directive-background-color: #3c73ad2e;
7378
--editor-frontmatter-background-color: #f0eab4;
7479
--editor-frontmatter-border-color: #c6ba4f;
80+
7581
--editor-hashtag-color: var(--melon-color-text-negative);
7682
--editor-hashtag-background-color: var(--melon-color);
7783
--editor-hashtag-border-color: var(--melon-color);
@@ -89,12 +95,14 @@ html[data-theme="light"] {
8995
9096
--link-color: #d90033;
9197
--link-missing-color: #d90033;
92-
98+
99+
--modal-header-label-color: var(--melon-color);
93100
--modal-selected-option-background-color: #eef4f4;
94101
--modal-selected-option-color: var(--melon-color);
95102
--modal-description-color: var(--melon-color);
96103
--modal-hint-color: #eee;
97104
--modal-hint-background-color: #333;
105+
--modal-help-background-color:; /*TODO*/
98106
99107
--panel-border-color: #d1d1d1;
100108
@@ -109,55 +117,88 @@ html[data-theme="light"] {
109117
110118
--ui-accent-color: #464cfc;
111119
}
120+
```
112121

122+
# Dark Theme
123+
```space-style
113124
html[data-theme="dark"] {
114-
--root-color: #dedede;
115-
--selection-background-color: #383d3ff5;
116-
125+
/* Custom Variables */
126+
--editor-top-widget-background-color: var(--editor-code-background-color);
117127
--editor-main-background-color: #2a2b2b;
118128
--editor-main-box-shadow: 1px 1px 4px 1px #ddd;
119-
--editor-secondary-box-shadow: 2px 3px 4px -1px #aaa;
120-
--editor-top-widget-background-color: #eae8d754;
129+
--editor-secondary-box-shadow: 2px 3px 5px 1px #111;
121130
131+
--melon-button-color: var(--root-color);
122132
--melon-color: #3e6f68;
123133
--melon-color-text: #090e0e;
124134
--melon-color-text-negative: #ebebeb;
135+
--melon-placeholder-color: var(--root-color);
125136
--melon-unsaved-color: #d6222e;
126137
--melon-unsaved-border-color: white;
127138
--melon-secondary-background-color: #383d3f;
128139
--melon-secondary-background-border-color: #181a1a;
129140
--melon-secondary-color: #d2d2d2;
130141
--melon-top-selection-color: #383d3ff5;
131142
143+
144+
/* SilverBullet Variables Overrides */
145+
--root-color: #dedede;
146+
--root-background-color: #1c1d20;
147+
--selection-background-color: #383d3ff5;
148+
132149
--action-button-background-color: transparent;
133150
--action-button-color: var(--melon-color-text-negative);
134151
--action-button-hover-color: var(--melon-color-text);
135152
--action-button-active-color: var(--melon-color-text);
136153
137-
--button-color: #333;
138154
--button-background-color: #efefef;
139-
--button-hover-background-color: #ccc;
140155
--button-border-color: #d2d2d2;
141-
--primary-button-color: var(--melon-color-text-negative);
142-
--primary-button-background-color: var(--melon-color);
143-
--primary-button-hover-background-color: var(--melon-color-text);
144-
--primary-button-border-color: var(--melon-color-text);
156+
--button-color: #333;
157+
--button-hover-background-color: #ccc;
158+
159+
--editor-code-atom-color: #ce6c91;
160+
--editor-code-info-color: #eee;
161+
--editor-code-number-color: #b485d9;
162+
--editor-code-string-color: #c094e1;
163+
--editor-code-typename-color: #13bb5a;
164+
--editor-code-variable-color: #7bc7e8;
165+
145166
--editor-command-button-color: var(--melon-color-text);
146167
--editor-command-button-background-color: var(--melon-color);
147168
--editor-command-button-border-color: var(--melon-color-text);
148-
}
149-
150-
```
151169
170+
--editor-frontmatter-background-color: rgba(51, 50, 51, 0.5);
171+
--editor-frontmatter-border-color: #7e405a;
172+
--editor-frontmatter-marker-color: #576462;
173+
--editor-hashtag-background-color: var(--melon-color);
174+
--editor-highlight-background-color: #72735f4f;
175+
--editor-link-color: #66bdaf; /*#a4c2bd;*/
176+
--editor-meta-color: #5f99cc;
177+
178+
--editor-wiki-link-page-background-color: none;
179+
--editor-wiki-link-page-color: var(--editor-link-color);
180+
--editor-wiki-link-page-missing-color: #aa7373;
152181
153-
```css
154-
/* parking space */
155-
--background-error: repeating-linear-gradient(
156-
45deg, #e6e370, #e6e370 100px, #686868 100px, #686868 200px
157-
);
158-
/* ## Animation */
159-
@keyframes fade {
160-
0%,100% { opacity: 0 }
161-
50% { opacity: 1 }
182+
--link-color: var(--editor-link-color);
183+
--link-missing-color: var(--editor-wiki-link-page-missing-color);
184+
185+
--modal-background-color: #644c60;
186+
--modal-border-color: #644c60;
187+
--modal-color: #dbe4e2;
188+
--modal-header-label-color: #8ec2ba;
189+
--modal-help-background-color: #3336;
190+
191+
--primary-button-color: var(--melon-color-text-negative);
192+
--primary-button-background-color: var(--melon-color);
193+
--primary-button-hover-background-color: var(--melon-color-text);
194+
--primary-button-border-color: var(--melon-color-text);
195+
196+
--text-field-background-color: #373737;
197+
198+
--top-saved-color: #ececec;
162199
}
200+
163201
```
202+
#asd
203+
[[asdfasdf]]
204+
[[01 Journal/2024/08/2024-08-08]]

‎Melon/Editor.md‎

Lines changed: 9 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@
22
/* ------------------------------------------------------------------------- */
33
/* # Main Editor Area */
44
/* ------------------------------------------------------------------------- */
5+
56
html[data-theme="light"] #sb-main {
6-
background-color: #fcfcfd;
7-
/* candidates: #647479, #f3f6f7, #fcfcfd */
7+
background-color: #fcfcfd; /*TODO - assign variable + dark theme */
88
}
99
10-
1110
/* Move Editor to Left */
1211
#sb-main .cm-editor .cm-content {
1312
/*width: 100%;*/
@@ -16,16 +15,15 @@ html[data-theme="light"] #sb-main {
1615
min-height: unset;
1716
}
1817
19-
2018
/* Change Colors, Add Shadow */
19+
/* TODO same for dark theme */
2120
html[data-theme="light"] #sb-main .cm-editor .cm-content { /* Add Box Shadow to Editor */
2221
background-color: var(--editor-main-background-color);
2322
box-shadow: var(--editor-main-box-shadow);
2423
padding-block: 0;
2524
/*border-inline: 1px solid #d7d7d7;*/
2625
}
2726
28-
2927
#sb-main #sb-editor .cm-scroller .cm-content .sb-code,
3028
#sb-main .cm-editor .cm-line.sb-line-fenced-code {
3129
padding-inline: 0.4em;
@@ -36,21 +34,13 @@ html[data-theme="light"] #sb-main .cm-editor .cm-content { /* Add Box Shadow to
3634
padding-block: 0;
3735
}
3836
39-
40-
/* ## Blockquotes */
41-
#sb-main .cm-editor .sb-blockquote-outside,
42-
#sb-main .cm-editor .sb-line-blockquote.cm-line {
43-
border-width: 2px;
44-
text-indent: unset;
45-
padding: 3px 0;
46-
margin-top: 1em;
47-
padding-left: 10px;
48-
}
49-
/* Remove Top Margin From Adjacent Blockquote Lines */
50-
#sb-main .cm-editor .sb-blockquote-outside + .sb-blockquote-outside,
51-
#sb-main .cm-editor .sb-line-blockquote.cm-line + .sb-line-blockquote.cm-line {
52-
margin-top: 0;
37+
/* ## Text Selections */
38+
#sb-main #sb-editor .cm-editor .cm-scroller .cm-content ::selection {
39+
background-color: var(--selection-background-color) !important;
5340
}
5441
42+
#sb-top .main .inner .wrapper .sb-mini-editor .cm-editor .cm-scroller .cm-line::selection {
43+
background-color: var(--melon-top-selection-color); /* Selection in Top Bar (aka page name) */
44+
}
5545
5646
```

‎Melon/Editor/Blockquotes.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
```space-style
2+
/* ## Blockquotes */
3+
#sb-main .cm-editor .sb-blockquote-outside,
4+
#sb-main .cm-editor .sb-line-blockquote.cm-line {
5+
border-width: 2px;
6+
font-style: italic;
7+
margin-top: 1em;
8+
padding: 3px 0;
9+
padding-left: 10px;
10+
text-indent: -3px; /* not quite ideal, value may depend on font choice */
11+
}
12+
/* Remove Top Margin From Adjacent Blockquote Lines */
13+
#sb-main .cm-editor .sb-blockquote-outside + .sb-blockquote-outside,
14+
#sb-main .cm-editor .sb-line-blockquote.cm-line + .sb-line-blockquote.cm-line {
15+
margin-top: 0;
16+
}
17+
18+
```

‎Melon/Editor/Headings.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
#sb-main .cm-editor .cm-line:is(.sb-line-h1, .sb-line-h2, .sb-line-h3, .sb-line-h4, .sb-line-h5, .sb-line-h6) {
77
font-weight: unset;
88
font-family: var(--ui-font);
9-
padding-top: 1em;
9+
padding-block: 1em 0.3em;
1010
}
1111
1212
#sb-main .cm-editor .cm-content div.cm-line.sb-line-h1:nth-of-type(1),

‎Melon/Editor/Links.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
```space-style
22
/* ## Links */
3-
html[data-theme="light"] #sb-main .cm-editor .sb-markdown-top-widget a.wiki-link,
4-
html[data-theme="light"] #sb-main .cm-editor .sb-markdown-top-widget .sb-wiki-link-page-missing,
5-
html[data-theme="light"] #sb-main #sb-editor .cm-editor .cm-scroller .cm-content a.sb-wiki-link-page-missing,
6-
html[data-theme="light"] #sb-main #sb-editor .cm-editor .cm-scroller .cm-content a.sb-wiki-link-page,
7-
html[data-theme="light"] #sb-main #sb-editor .cm-editor .cm-scroller .cm-content .sb-markdown-bottom-widget div.content span.p a.wiki-link,
8-
html[data-theme="light"] #sb-main .cm-editor .sb-markdown-widget a.wiki-link
3+
#sb-main .cm-editor .sb-markdown-top-widget a.wiki-link,
4+
#sb-main .cm-editor .sb-markdown-top-widget .sb-wiki-link-page-missing,
5+
#sb-main #sb-editor .cm-editor .cm-scroller .cm-content a.sb-wiki-link-page-missing,
6+
#sb-main #sb-editor .cm-editor .cm-scroller .cm-content a.sb-wiki-link-page,
7+
#sb-main #sb-editor .cm-editor .cm-scroller .cm-content .sb-markdown-bottom-widget div.content #span.p a.wiki-link,
8+
#sb-main .cm-editor .sb-markdown-widget a.wiki-link
99
{
1010
background: none;
1111
border-bottom: 1px solid var(--link-color);
@@ -16,8 +16,8 @@ html[data-theme="light"] #sb-main .cm-editor .sb-markdown-widget a.wiki-link
1616
}
1717
1818
/* Broken Links and Links to Missing Pages */
19-
html[data-theme="light"] #sb-main .cm-editor .sb-markdown-top-widget .sb-wiki-link-page-missing,
20-
html[data-theme="light"] #sb-main #sb-editor .cm-editor .cm-scroller .cm-content a.sb-wiki-link-page-missing {
19+
#sb-main .cm-editor .sb-markdown-top-widget .sb-wiki-link-page-missing,
20+
#sb-main #sb-editor .cm-editor .cm-scroller .cm-content a.sb-wiki-link-page-missing {
2121
border-bottom: 1px dashed var(--link-color);
2222
}
2323
a.sb-wiki-link-page-missing, .sb-wiki-link-page-missing > .sb-wiki-link-page {

‎Melon/Editor/Typography.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,12 @@
1717
/* Keyword (inline) */
1818
#sb-main .cm-editor .sb-keyword {
1919
font-weight: 600;
20-
color: #455e59;
2120
}
2221
22+
html[data-theme="light"] #sb-main .cm-editor .sb-keyword {color: #455e59;}
23+
html[data-theme="dark"] #sb-main .cm-editor .sb-keyword {color: #78aea4;}
24+
25+
2326
/* Inline Code */
2427
#sb-main #sb-editor .cm-scroller .cm-content .sb-code {
2528
padding: 0.05em 0.2em;

‎Melon/Forms.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,8 @@
3131
#sb-main .cm-editor .sb-command-button::after {
3232
content: " ‣";
3333
}
34+
35+
#sb-main #sb-editor .cm-editor .cm-panels .cm-search.cm-panel button.cm-button {
36+
color: var(--melon-button-color);
37+
}
3438
```

‎Melon/Overlays.md‎

Lines changed: 0 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,65 +2,7 @@
22
/* ------------------------------------------------------------------------- */
33
/* # Overlays */
44
/* ------------------------------------------------------------------------- */
5-
/* ## Modals (Rename Dialog, Confirm Delete Dialog, ...) */
6-
#sb-root .sb-modal-box {
7-
border-radius: 0;
8-
box-shadow: var(--editor-secondary-box-shadow);
9-
font-family: var(--editor-font);
10-
}
11-
#sb-root .sb-modal-box .sb-header label {
12-
color: var(--melon-color);
13-
}
14-
#sb-root .sb-modal-box .sb-header .sb-mini-editor .cm-editor .cm-content .cm-line {
15-
font-family: var(--editor-font);
16-
}
17-
#sb-root .sb-modal-box .sb-help-text {
18-
font-size: .9em;
19-
}
20-
.sb-highlight {
21-
padding: 1px 2px;
22-
}
235
246
25-
/* ## Text Selection */
26-
#sb-main #sb-editor .cm-editor .cm-scroller .cm-content ::selection {
27-
background-color: var(--selection-background-color) !important;
28-
}
29-
#sb-top .main .inner .wrapper .sb-mini-editor .cm-editor .cm-scroller .cm-line::selection {
30-
background-color: var(--melon-top-selection-color); /*Selection in Top Bar*/
31-
}
32-
33-
/* ## Notifications */
34-
#sb-top .main .inner .wrapper .sb-notifications {
35-
top: 50px;
36-
}
37-
#sb-top .main .inner .wrapper .sb-notifications > div {
38-
opacity: 1;
39-
/*animation: fade cubic-bezier(.95, 0, .15, 1) 2s;*/
40-
background-color: var(--melon-color);
41-
border: 1px dashed var(--melon-color-text);
42-
border-radius: 3px;
43-
margin-bottom: 3px;
44-
margin-top: 0.5em;
45-
padding: 0.6em;
46-
color: var(--melon-color-text-negative);
47-
}
48-
49-
/* ## Search & Replace */
50-
#sb-main #sb-editor .cm-search.cm-panel {
51-
padding-top: .3em;
52-
box-shadow: 0px 0px 8px -2px #313131 inset;
53-
font-size: 1.2em;
54-
font-family: var(--editor-font);
55-
}
56-
57-
#sb-main #sb-editor .cm-search.cm-panel label {
58-
font-size: .85em;
59-
color: var(--melon-secondary-color);
60-
}
61-
62-
#sb-main #sb-editor .cm-search.cm-panel .cm-button {
63-
color: #333;
64-
}
657
668
```

0 commit comments

Comments
 (0)