Skip to content

Commit 8ebf048

Browse files
aromalanilaromalanil
authored
Merge pull request #6 from aromalanil/dark-mode
🌑 Added DarkMode for Body and Code
2 parents 6543f09 + 1cff214 commit 8ebf048

11 files changed

+289
-73
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "markdown-editor",
3-
"version": "1.6.4",
3+
"version": "1.8.0",
44
"description": "A react app to preview and edit Markdown",
55
"private": true,
66
"author": {

‎public/index.html

+2
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@
4646
<meta property="twitter:image"
4747
content="https://raw.githubusercontent.com/aromalanil/Markdown-Editor/master/public/demo.webp">
4848

49+
50+
<link rel="stylesheet" id="code-stylesheet" href="%PUBLIC_URL%/styles/light.css">
4951
</head>
5052

5153
<body>

‎public/styles/dark.css

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
/**
2+
* okaidia theme for JavaScript, CSS and HTML
3+
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
4+
* @author ocodia
5+
*/
6+
7+
code[class*="language-"],
8+
pre[class*="language-"] {
9+
color: #f8f8f2;
10+
background: none;
11+
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
12+
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
13+
font-size: 1em;
14+
text-align: left;
15+
white-space: pre;
16+
word-spacing: normal;
17+
word-break: normal;
18+
word-wrap: normal;
19+
20+
-moz-tab-size: 4;
21+
-o-tab-size: 4;
22+
tab-size: 4;
23+
24+
-webkit-hyphens: none;
25+
-moz-hyphens: none;
26+
-ms-hyphens: none;
27+
hyphens: none;
28+
}
29+
30+
/* Code blocks */
31+
pre[class*="language-"] {
32+
padding: 1em;
33+
margin: .5em 0;
34+
overflow: auto;
35+
border-radius: 0.3em;
36+
}
37+
38+
:not(pre) > code[class*="language-"],
39+
pre[class*="language-"] {
40+
background: #272822;
41+
}
42+
43+
/* Inline code */
44+
:not(pre) > code[class*="language-"] {
45+
padding: .1em;
46+
border-radius: .3em;
47+
white-space: normal;
48+
}
49+
50+
.token.comment,
51+
.token.prolog,
52+
.token.doctype,
53+
.token.cdata {
54+
color: #8292a2;
55+
}
56+
57+
.token.punctuation {
58+
color: #f8f8f2;
59+
}
60+
61+
.token.namespace {
62+
opacity: .7;
63+
}
64+
65+
.token.property,
66+
.token.tag,
67+
.token.constant,
68+
.token.symbol,
69+
.token.deleted {
70+
color: #f92672;
71+
}
72+
73+
.token.boolean,
74+
.token.number {
75+
color: #ae81ff;
76+
}
77+
78+
.token.selector,
79+
.token.attr-name,
80+
.token.string,
81+
.token.char,
82+
.token.builtin,
83+
.token.inserted {
84+
color: #a6e22e;
85+
}
86+
87+
.token.operator,
88+
.token.entity,
89+
.token.url,
90+
.language-css .token.string,
91+
.style .token.string,
92+
.token.variable {
93+
color: #f8f8f2;
94+
}
95+
96+
.token.atrule,
97+
.token.attr-value,
98+
.token.function,
99+
.token.class-name {
100+
color: #e6db74;
101+
}
102+
103+
.token.keyword {
104+
color: #66d9ef;
105+
}
106+
107+
.token.regex,
108+
.token.important {
109+
color: #fd971f;
110+
}
111+
112+
.token.important,
113+
.token.bold {
114+
font-weight: bold;
115+
}
116+
.token.italic {
117+
font-style: italic;
118+
}
119+
120+
.token.entity {
121+
cursor: help;
122+
}
123+

‎src/styles/github.css ‎public/styles/light.css

-9
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,6 @@ pre {
99
word-spacing: normal;
1010
word-break: normal;
1111
word-wrap: normal;
12-
line-height: 1.45;
13-
padding: 0.8em;
14-
overflow: auto;
15-
font-size: 0.9em;
16-
border-radius: 6px;
1712
background: #f6f8fa;
1813

1914
-moz-tab-size: 8;
@@ -29,12 +24,8 @@ pre {
2924
/* Inline code */
3025
:not(pre) > code {
3126
color: inherit;
32-
font-size: 85%;
33-
border-radius: 0.3em;
3427
white-space: normal;
3528
background: #f5f5f5;
36-
padding: 0.2em 0.4em;
37-
margin: 0;
3829
background-color: rgba(27, 31, 35, 0.05);
3930
}
4031

0 commit comments

Comments
 (0)