Skip to content

Commit 77893ff

Browse files
lebogaearon
lebo
authored and
gaearon
committed
Dark more tweaks
1 parent 926dbee commit 77893ff

File tree

7 files changed

+78
-41
lines changed

7 files changed

+78
-41
lines changed

‎beta/colors.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ module.exports = {
2323
'secondary-button-dark': '#404756', // gray-70
2424

2525
// Gray
26+
'gray-95': '#16181D',
2627
'gray-90': '#23272F',
2728
'gray-80': '#343A46',
2829
'gray-70': '#404756',

‎beta/src/components/Layout/Nav/Nav.tsx

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -91,15 +91,7 @@ function inferSection(pathname: string): 'learn' | 'reference' | 'home' {
9191

9292
export default function Nav() {
9393
const {pathname} = useRouter();
94-
const {isOpen, toggleOpen} = React.useContext(MenuContext);
95-
// TODO: persist
96-
// TODO: respect system pref
97-
const [isDark, setIsDark] = React.useState(() => {
98-
if (typeof document === 'undefined') {
99-
return false;
100-
}
101-
return document.documentElement.classList.contains('dark');
102-
});
94+
const {isOpen, toggleOpen, isDark, setIsDark} = React.useContext(MenuContext);
10395
const section = inferSection(pathname);
10496

10597
function handleFeedback() {

‎beta/src/components/MDX/CodeBlock/CodeBlock.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,10 @@ import {
1111
SandpackThemeProvider,
1212
} from '@codesandbox/sandpack-react';
1313
import rangeParser from 'parse-numeric-range';
14+
import {MenuContext} from 'components/useMenu';
1415

15-
import {CodeBlockLightTheme} from '../Sandpack/Themes';
16+
import {GithubLightTheme} from '../Sandpack/Themes';
17+
import {NightOwlTheme} from '../Sandpack/Themes';
1618
import styles from './CodeBlock.module.css';
1719

1820
interface InlineHiglight {
@@ -47,7 +49,7 @@ const CodeBlock = React.forwardRef(
4749
const linesToHighlight = getHighlightLines(metastring);
4850
const highlightedLineConfig = linesToHighlight.map((line) => {
4951
return {
50-
className: 'bg-github-highlight',
52+
className: 'bg-github-highlight dark:bg-opacity-10',
5153
line,
5254
};
5355
});
@@ -77,11 +79,12 @@ const CodeBlock = React.forwardRef(
7779
const language = className.substring(9);
7880
const filename = '/index.' + language;
7981
const decorators = getDecoratedLineInfo();
82+
const {isDark} = React.useContext(MenuContext);
8083
return (
8184
<div
8285
translate="no"
8386
className={cn(
84-
'rounded-lg h-full w-full overflow-x-auto flex items-center bg-white shadow-lg',
87+
'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
8588
!noMargin && 'my-8'
8689
)}>
8790
<SandpackProvider
@@ -93,7 +96,8 @@ const CodeBlock = React.forwardRef(
9396
},
9497
},
9598
}}>
96-
<SandpackThemeProvider theme={CodeBlockLightTheme}>
99+
<SandpackThemeProvider
100+
theme={isDark ? NightOwlTheme : GithubLightTheme}>
97101
<ClasserProvider
98102
classes={{
99103
'sp-cm': styles.codeViewer,

‎beta/src/components/MDX/Sandpack/CustomPreset.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@ import {
1111
} from '@codesandbox/sandpack-react';
1212

1313
import {IconChevron} from 'components/Icon/IconChevron';
14+
import {MenuContext} from 'components/useMenu';
1415
import {NavigationBar} from './NavigationBar';
1516
import {Preview} from './Preview';
1617
import {GithubLightTheme} from './Themes';
18+
import {NightOwlTheme} from './Themes';
1719

1820
export function CustomPreset({
1921
isSingleFile,
@@ -26,6 +28,7 @@ export function CustomPreset({
2628
const {sandpack} = useSandpack();
2729
const {code} = useActiveCode();
2830
const [isExpanded, setIsExpanded] = React.useState(false);
31+
const {isDark} = React.useContext(MenuContext);
2932

3033
const {activePath} = sandpack;
3134
if (!lineCountRef.current[activePath]) {
@@ -45,7 +48,8 @@ export function CustomPreset({
4548
<>
4649
<div className="shadow-lg dark:shadow-lg-dark rounded-lg">
4750
<NavigationBar showDownload={isSingleFile} onReset={onReset} />
48-
<SandpackThemeProvider theme={GithubLightTheme}>
51+
<SandpackThemeProvider
52+
theme={isDark ? NightOwlTheme : GithubLightTheme}>
4953
<div
5054
ref={sandpack.lazyAnchorRef}
5155
className="sp-layout rounded-t-none"

‎beta/src/components/MDX/Sandpack/Themes.tsx

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,50 @@
22
* Copyright (c) Facebook, Inc. and its affiliates.
33
*/
44

5-
import {githubLightTheme, SandpackTheme} from '@codesandbox/sandpack-react';
5+
import {
6+
codesandboxDarkTheme,
7+
codesandboxLightTheme,
8+
SandpackTheme,
9+
} from '@codesandbox/sandpack-react';
610
import tailwindConfig from '../../../../tailwind.config';
711

812
export const GithubLightTheme: SandpackTheme = {
9-
...githubLightTheme,
13+
...codesandboxLightTheme,
14+
palette: {
15+
activeText: '#24292e',
16+
defaultText: '#959da5',
17+
inactiveText: '#e4e7eb',
18+
activeBackground: '#e4e7eb',
19+
defaultBackground: '#ffffff',
20+
inputBackground: '#ffffff',
21+
accent: '#c8c8fa',
22+
errorBackground: '#ffcdca',
23+
errorForeground: '#811e18',
24+
},
25+
typography: {
26+
...codesandboxLightTheme.typography,
27+
bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
28+
monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
29+
fontSize: tailwindConfig.theme.extend.fontSize.code,
30+
lineHeight: '24px',
31+
},
32+
};
1033

34+
export const NightOwlTheme: SandpackTheme = {
35+
...codesandboxDarkTheme,
36+
palette: {
37+
activeText: '#FFFFFF',
38+
defaultText: '#999999',
39+
inactiveText: '#343434',
40+
activeBackground: '#343434',
41+
defaultBackground: '#16181D',
42+
inputBackground: '#242424',
43+
accent: '#6caedd',
44+
errorBackground: '#ffcdca',
45+
errorForeground: '#811e18',
46+
},
1147
typography: {
12-
...githubLightTheme.typography,
48+
...codesandboxDarkTheme.typography,
1349
bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
1450
monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
1551
fontSize: tailwindConfig.theme.extend.fontSize.code,
@@ -18,13 +54,13 @@ export const GithubLightTheme: SandpackTheme = {
1854
};
1955

2056
export const CodeBlockLightTheme: SandpackTheme = {
21-
...githubLightTheme,
57+
...codesandboxLightTheme,
2258
palette: {
23-
...githubLightTheme.palette,
59+
...codesandboxLightTheme.palette,
2460
defaultBackground: 'transparent',
2561
},
2662
typography: {
27-
...githubLightTheme.typography,
63+
...codesandboxLightTheme.typography,
2864
bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
2965
monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
3066
fontSize: tailwindConfig.theme.extend.fontSize.code,

‎beta/src/components/useMenu.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,9 @@ type SidebarNav = 'root' | 'docs' | 'reference';
1919
*/
2020
export const useMenu = () => {
2121
const [isOpen, setIsOpen] = React.useState(false);
22+
// TODO: persist
23+
// TODO: respect system pref
24+
const [isDark, setIsDark] = React.useState(false);
2225
const menuRef = React.useRef<HTMLDivElement>(null);
2326
const router = useRouter();
2427

@@ -57,6 +60,8 @@ export const useMenu = () => {
5760
toggleOpen,
5861
menuRef,
5962
isOpen,
63+
isDark,
64+
setIsDark,
6065
};
6166
};
6267

‎beta/src/styles/sandpack.css

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,30 @@
33
*/
44

55
.sp-tabs .sp-tab-button {
6-
color: #087EA4;
6+
color: #087ea4;
77
padding: 0 4px;
88
}
99

1010
html.dark .sp-tabs .sp-tab-button {
11-
color: #149ECA;
11+
color: #149eca;
1212
}
1313

1414
.sp-tabs .sp-tab-button:hover {
15-
color: #087EA4;
15+
color: #087ea4;
1616
}
1717

1818
html.dark .sp-tabs .sp-tab-button:hover {
19-
color: #149ECA;
19+
color: #149eca;
2020
}
2121

2222
.sp-tabs .sp-tab-button[data-active='true'] {
23-
color: #087EA4;
24-
border-bottom: 2px solid #087EA4;
23+
color: #087ea4;
24+
border-bottom: 2px solid #087ea4;
2525
}
2626

2727
html.dark .sp-tabs .sp-tab-button[data-active='true'] {
28-
color: #149ECA;
29-
border-bottom: 2px solid #149ECA;
28+
color: #149eca;
29+
border-bottom: 2px solid #149eca;
3030
}
3131

3232
.sp-stack .sp-code-editor,
@@ -60,23 +60,17 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
6060
*
6161
* If you know a better way to keep them from diverging, send a PR.
6262
*/
63-
.sp-layout {
63+
.sp-layout {
6464
border-bottom-left-radius: 0.5rem !important;
6565
border-bottom-right-radius: 0.5rem !important;
6666
}
67-
68-
.cm-activeLine {
69-
background: rgba(245, 247, 250, var(--tw-bg-opacity)) !important;
70-
}
71-
.sp-code-editor {
72-
background: white !important;
73-
}
7467
.sp-stack {
7568
height: initial !important;
7669
width: fit-content !important;
7770
}
7871
.sp-cm {
7972
-webkit-text-size-adjust: none !important;
73+
padding: 0 !important;
8074
}
8175
.cm-wrap,
8276
.cm-wrap .cm-gutters {
@@ -96,21 +90,22 @@ html.dark .sp-tabs .sp-tab-button[data-active='true'] {
9690
}
9791
.sp-cm.sp-pristine .cm-scroller {
9892
overflow: auto !important;
93+
padding: 18px 0 !important;
9994
}
10095
.sp-layout {
10196
overflow: initial !important;
102-
border:0px solid transparent !important;
97+
border: 0px solid transparent !important;
10398
border-top-left-radius: 0px !important;
10499
border-top-right-radius: 0px !important;
105100
}
106-
html.dark .sp-layout>:not(:first-child) {
107-
border-color: #343A46;
101+
html.dark .sp-layout > :not(:first-child) {
102+
border-color: #343a46;
108103
}
109104
html.dark .sp-layout {
110-
background-color: #343A46;
105+
background-color: #343a46;
111106
}
112107
html.dark .sp-loading {
113-
background-color: #23272F;
108+
background-color: #23272f;
114109
}
115110

116111
@media (min-width: 768px) {

0 commit comments

Comments
 (0)