Skip to content

Commit 1cff214

Browse files
aromalanilaromalanil
committed
🌑 Added DarkMode for Code
1 parent b7e5c2b commit 1cff214

File tree

7 files changed

+182
-27
lines changed

7 files changed

+182
-27
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.7.0",
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

‎src/App.scss

+29-15
Original file line numberDiff line numberDiff line change
@@ -16,24 +16,24 @@ body {
1616
--body-accent-color: #e1e4e8;
1717
--alternate-table-color: #eaecef;
1818
--primary-text-color: #24292e;
19-
--link-color:var(--primary-color);
19+
--link-color: var(--primary-color);
2020
--table-border-color: #ddd;
2121
--source-code-font: "Source Code Pro", monospace;
2222
--open-sans-font: "Open Sans", sans-serif;
23-
--color-transition : .5s ease;
23+
--color-transition: 0.5s ease;
2424
background-color: var(--body-color);
2525
transition: background-color var(--color-transition);
2626
margin: 0;
2727
color: var(--primary-text-color);
2828
font-family: var(--open-sans-font);
2929
}
3030

31-
.dark{
32-
--body-color:#1A1A1D;
33-
--body-accent-color:#202124;
34-
--primary-text-color:#c0c0c0;
31+
.dark {
32+
--body-color: #1a1a1d;
33+
--body-accent-color: #202124;
34+
--primary-text-color: #c0c0c0;
3535
--table-border-color: #3b3b3b;
36-
--alternate-table-color: #2B2C2F;
36+
--alternate-table-color: #2b2c2f;
3737
}
3838

3939
::-webkit-scrollbar {
@@ -48,7 +48,7 @@ body {
4848
border-radius: 0.2rem;
4949
color: var(--nav-item-color);
5050
background-color: var(--primary-color);
51-
transition: color,background-color var(--color-transition);
51+
transition: color, background-color var(--color-transition);
5252
border: none;
5353
transition: filter 200ms ease;
5454
margin: 0 0.5rem;
@@ -72,7 +72,7 @@ body {
7272
display: flex;
7373
align-items: center;
7474
justify-content: space-between;
75-
*{
75+
* {
7676
user-select: none;
7777
}
7878
.title {
@@ -126,11 +126,10 @@ body {
126126
right: -2.5rem;
127127
top: 2.2rem;
128128
width: 15.625rem;
129-
height: 18.75rem;
130129
background-color: var(--primary-color);
131-
transition: background-color,border var(--color-transition);
130+
transition: background-color, border var(--color-transition);
132131
border: 0.1rem solid var(--accent-color);
133-
padding: 1rem 1.5rem;
132+
padding: 1rem 1.5rem 1.5rem;
134133
border-radius: 0.6rem;
135134
z-index: 999;
136135
-webkit-box-shadow: 0px 0px 14px 5px rgba(0, 0, 0, 0.17);
@@ -141,7 +140,7 @@ body {
141140
padding-bottom: 1rem;
142141
border-bottom: 0.1rem solid var(--accent-color);
143142
}
144-
h4{
143+
h4 {
145144
margin-bottom: 0em;
146145
}
147146
}
@@ -271,11 +270,26 @@ body {
271270
transition: background-color var(--color-transition);
272271
}
273272
pre {
273+
transition: background-color var(--color-transition);
274+
line-height: 1.45;
275+
padding: 0.8em;
276+
overflow: auto;
277+
border-radius: 6px;
278+
font-size: 0.9em;
274279
padding: 1rem;
275280
width: 100%;
276281
overflow: auto;
277282
margin-top: 0;
278283
margin-bottom: 1rem;
284+
*{
285+
transition: color var(--color-transition);
286+
}
287+
}
288+
:not(pre) > code {
289+
font-size: 85%;
290+
border-radius: 0.3em;
291+
padding: 0.2em 0.4em;
292+
margin: 0;
279293
}
280294
code {
281295
font-family: var(--source-code-font);
@@ -338,8 +352,8 @@ body {
338352
transition: background-color var(--color-transition);
339353
color: white;
340354
}
341-
summary:focus{
342-
outline:none;
355+
summary:focus {
356+
outline: none;
343357
}
344358
}
345359

‎src/components/DarkCodeToggle.jsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React, { useEffect } from "react";
2+
import Switch from "@material-ui/core/Switch";
3+
import useLocalStorage from "../hooks/useLocalStorage";
4+
5+
function DarkCodeToggle() {
6+
const [darkMode, setDarkMode] = useLocalStorage("codeDarkMode", false);
7+
8+
useEffect(() => {
9+
const styleSheet = `/styles/${darkMode?"dark":"light"}.css`
10+
document.getElementById('code-stylesheet').setAttribute("href", styleSheet);
11+
}, [darkMode])
12+
13+
const handleSwitchToggle = (e) => {
14+
setDarkMode(e.target.checked);
15+
};
16+
17+
return (
18+
<>
19+
<h4>Code Dark Mode</h4>
20+
<Switch checked={darkMode} onChange={handleSwitchToggle} />
21+
</>
22+
);
23+
}
24+
25+
export default DarkCodeToggle;

‎src/components/ThemeSelector.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import React, { useEffect, useRef } from "react";
22
import themeData from "../data/theme";
33
import tickIcon from "../icons/tick.svg";
44
import DarkModeToggle from "./DarkModeToggle";
5-
6-
require("prismjs/themes/prism-okaidia.css");
5+
import DarkCodeToggle from "./DarkCodeToggle";
76

87
function ThemeSelector({ isVisible, setVisible, activeTheme, setActiveTheme }) {
98

@@ -52,6 +51,7 @@ function ThemeSelector({ isVisible, setVisible, activeTheme, setActiveTheme }) {
5251
<h3>Change Theme</h3>
5352
<div className="theme-btn">{themeButtons}</div>
5453
<DarkModeToggle />
54+
<DarkCodeToggle />
5555
</div>
5656
);
5757
}

0 commit comments

Comments
 (0)