Skip to content

Commit 3903655

Browse files
CompuIvesCompuIves
authored
More theming (#3008)
* More theming * Styling tweaks
1 parent ca69237 commit 3903655

File tree

8 files changed

+114
-72
lines changed

8 files changed

+114
-72
lines changed

‎packages/app/src/app/overmind/effects/vscode/index.ts‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { debounce } from 'lodash-es';
2525
import { EXTENSIONS_LOCATION, VIM_EXTENSION_ID } from './constants';
2626
import {
2727
initializeCustomTheme,
28+
initializeCodeSandboxTheme,
2829
initializeExtensionsFolder,
2930
initializeSettings,
3031
initializeThemeCache,
@@ -133,6 +134,7 @@ export class VSCodeEffect {
133134
// We want to initialize before VSCode, but after browserFS is configured
134135
// For first-timers initialize a theme in the cache so it doesn't jump colors
135136
initializeExtensionsFolder();
137+
initializeCodeSandboxTheme();
136138
initializeCustomTheme();
137139
initializeThemeCache();
138140
initializeSettings();
@@ -498,12 +500,18 @@ export class VSCodeEffect {
498500
fs: 'LocalStorage',
499501
},
500502
'/extensions': {
501-
fs: 'BundledHTTPRequest',
503+
fs: 'OverlayFS',
502504
options: {
503-
index: EXTENSIONS_LOCATION + '/extensions/index.json',
504-
baseUrl: EXTENSIONS_LOCATION + '/extensions',
505-
bundle: EXTENSIONS_LOCATION + '/bundles/main.min.json',
506-
logReads: process.env.NODE_ENV === 'development',
505+
writable: { fs: 'InMemory' },
506+
readable: {
507+
fs: 'BundledHTTPRequest',
508+
options: {
509+
index: EXTENSIONS_LOCATION + '/extensions/index.json',
510+
baseUrl: EXTENSIONS_LOCATION + '/extensions',
511+
bundle: EXTENSIONS_LOCATION + '/bundles/main.min.json',
512+
logReads: process.env.NODE_ENV === 'development',
513+
},
514+
},
507515
},
508516
},
509517
'/extensions/custom-theme': {

‎packages/app/src/app/overmind/effects/vscode/initializers.ts‎

Lines changed: 72 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
import codeSandboxBlackTheme from '@codesandbox/common/lib/themes/codesandbox-black.json';
2+
import codeSandboxTheme from '@codesandbox/common/lib/themes/codesandbox.json';
3+
14
export function initializeThemeCache() {
25
try {
36
if (!localStorage.getItem('vs-global://colorThemeData')) {
@@ -42,57 +45,81 @@ export function initializeSettings() {
4245
}
4346
}
4447

48+
export function initializeCodeSandboxTheme() {
49+
// @ts-ignore
50+
const fs = BrowserFS.BFSRequire('fs');
51+
52+
fs.writeFileSync(
53+
'/extensions/ngryman.codesandbox-theme-0.0.1/themes/CodeSandbox-color-theme.json',
54+
JSON.stringify(codeSandboxTheme)
55+
);
56+
}
57+
58+
export function installCustomTheme(id: string, name: string, theme: string) {
59+
const packageJSON = {
60+
name: id,
61+
displayName: name,
62+
description: 'The Custom VSCode Theme',
63+
version: '0.4.1',
64+
publisher: 'CodeSandbox',
65+
license: 'SEE LICENSE IN LICENSE.md',
66+
repository: {
67+
type: 'git',
68+
url: 'https://github.com/sdras/night-owl-vscode-theme',
69+
},
70+
keywords: [],
71+
scripts: {
72+
publish: 'vsce publish',
73+
},
74+
galleryBanner: {
75+
color: '#061526',
76+
theme: 'dark',
77+
},
78+
engines: {
79+
vscode: '^1.17.0',
80+
},
81+
categories: ['Themes'],
82+
contributes: {
83+
themes: [
84+
{
85+
label: name,
86+
uiTheme: 'vs-dark',
87+
path: './themes/custom-color-theme.json',
88+
},
89+
],
90+
},
91+
};
92+
93+
// @ts-ignore
94+
const fs = BrowserFS.BFSRequire('fs');
95+
const extName = `${id}-theme`;
96+
fs.mkdirSync(`/extensions/${extName}`);
97+
fs.writeFileSync(
98+
`/extensions/${extName}/package.json`,
99+
JSON.stringify(packageJSON)
100+
);
101+
102+
fs.mkdirSync(`/extensions/${extName}/themes`);
103+
fs.writeFileSync(
104+
`/extensions/${extName}/themes/custom-color-theme.json`,
105+
theme
106+
);
107+
}
108+
45109
/**
46110
* This auto installs an extension with a custom theme specified in preferences. People can select
47111
* it as "Custom Theme".
48112
*/
49113
export function initializeCustomTheme() {
50114
const customTheme = localStorage.getItem('settings.manualCustomVSCodeTheme');
51-
if (customTheme) {
52-
const packageJSON = {
53-
name: 'custom',
54-
displayName: 'Custom Theme',
55-
description: 'The Custom VSCode Theme',
56-
version: '0.4.1',
57-
publisher: 'CodeSandbox',
58-
license: 'SEE LICENSE IN LICENSE.md',
59-
repository: {
60-
type: 'git',
61-
url: 'https://github.com/sdras/night-owl-vscode-theme',
62-
},
63-
keywords: [],
64-
scripts: {
65-
publish: 'vsce publish',
66-
},
67-
galleryBanner: {
68-
color: '#061526',
69-
theme: 'dark',
70-
},
71-
engines: {
72-
vscode: '^1.17.0',
73-
},
74-
categories: ['Themes'],
75-
contributes: {
76-
themes: [
77-
{
78-
label: 'Custom Theme',
79-
uiTheme: 'vs-dark',
80-
path: './themes/custom-color-theme.json',
81-
},
82-
],
83-
},
84-
};
85115

86-
// @ts-ignore
87-
const fs = window.BrowserFS.BFSRequire('fs');
88-
fs.writeFileSync(
89-
'/extensions/custom-theme/package.json',
90-
JSON.stringify(packageJSON)
91-
);
92-
fs.mkdirSync('/extensions/custom-theme/themes');
93-
fs.writeFileSync(
94-
'/extensions/custom-theme/themes/custom-color-theme.json',
95-
JSON.parse(customTheme)
96-
);
116+
if (customTheme) {
117+
installCustomTheme('custom', 'Custom Theme', customTheme);
97118
}
119+
120+
installCustomTheme(
121+
'codesandbox-black',
122+
'CodeSandbox Black',
123+
JSON.stringify(codeSandboxBlackTheme)
124+
);
98125
}

‎packages/app/src/app/pages/Sandbox/Editor/Navigation/elements.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ export const Container = styled.div`
1717
display: flex;
1818
flex-direction: column;
1919
width: 3.5rem;
20+
border-right: 1px solid ${theme['activityBar.border'] || 'transparent'};
2021
flex: 0 0 3.5rem;
2122
height: 100%;
2223
color: ${theme[`activityBar.inactiveForeground`] ||

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/WorkspaceItem/elements.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@ import ExpandIcon from 'react-icons/lib/md/keyboard-arrow-down';
44
export const ChildContainer = styled.div<{ disabled?: boolean }>`
55
position: relative;
66
margin: 0;
7-
padding: 0;
7+
padding-top: 0.5rem;
8+
padding-bottom: 1.75rem;
89
height: 100%;
10+
border-top: 1px solid
11+
${props => props.theme['sideBar.border'] || props.theme.background};
912
1013
${({ disabled }) =>
1114
disabled &&
@@ -34,13 +37,15 @@ export const ItemHeader = styled.div`
3437
display: flex;
3538
align-items: center;
3639
position: relative;
37-
padding: 0.25rem 0.75rem;
40+
41+
border-top: 1px solid ${props =>
42+
props.theme['sideBar.border'] || props.theme.background};
43+
padding: 0.5rem 0.75rem;
3844
box-sizing: border-box;
3945
vertical-align: middle;
4046
height: 2rem;
4147
margin: 0;
42-
margin-top: 0.5rem;
43-
font-size: 0.875rem;
48+
font-size: 13px;
4449
color: ${props => (props.theme.light ? '#636363' : props.theme.white)};
4550
cursor: pointer;
4651

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Files/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ export const FilesItem = () => {
1919
<span style={{ display: 'inline-block', width: '100%' }}>Explorer</span>{' '}
2020
{editActions}
2121
</ItemTitle>
22-
<Files setEditActions={setEditActions} />
22+
<div style={{ paddingBottom: '1.75rem' }}>
23+
<Files setEditActions={setEditActions} />
24+
</div>
2325
{!staticTemplate ? (
2426
<WorkspaceItem defaultOpen title="Dependencies">
2527
<Dependencies />

‎packages/app/src/app/pages/Sandbox/Editor/Workspace/items/NotOwnedSandboxInfo/NotOwnedSandboxInfo.tsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,11 @@ export const NotOwnedSandboxInfo = () => {
1515
return (
1616
<div style={{ marginTop: '1rem' }}>
1717
<Project />
18-
<WorkspaceItem
19-
actions={editActions}
20-
defaultOpen
21-
style={{ marginTop: '.5rem' }}
22-
title="Files"
23-
>
18+
<WorkspaceItem actions={editActions} defaultOpen title="Files">
2419
<Files setEditActions={setEditActions} />
2520
</WorkspaceItem>
2621
{!staticTemplate ? (
27-
<WorkspaceItem
28-
defaultOpen
29-
style={{ marginTop: '.5rem' }}
30-
title="Dependencies"
31-
>
22+
<WorkspaceItem defaultOpen title="Dependencies">
3223
<Dependencies />
3324
</WorkspaceItem>
3425
) : null}

‎packages/common/src/themes/codesandbox-black.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"tab.activeBackground": "#282A36",
5151
"tab.activeForeground": "#F8F8F2",
5252
"editor.background": "#151515",
53-
"editor.foreground": "#ffffff",
53+
"editor.foreground": "#999",
5454
"editor.hoverHighlightBackground": "#333",
5555
"editor.inactiveSelectionBackground": "#333",
5656

@@ -158,7 +158,7 @@
158158
"scrollbarSlider.hoverBackground": null,
159159
"sideBar.background": "#151515",
160160
"sideBar.border": "#242424",
161-
"sideBar.foreground": "#ffffff",
161+
"sideBar.foreground": "#999",
162162
"sideBarSectionHeader.background": "#151515",
163163
"sideBarSectionHeader.foreground": "#ffffff",
164164
"sideBarSectionHeader.border": "#242424",

‎packages/common/src/themes/codesandbox.json‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"type": "dark",
55
"colors": {
66
"activityBar.background": "#1C2022",
7+
"activityBar.border": "#111518",
78
"badge.background": "#374140",
89
"button.background": "#40A9F3",
910
"button.hoverBackground": "#66B9F4",
@@ -16,14 +17,14 @@
1617
"input.background": "#111518",
1718
"input.foreground": "#C0C0C0",
1819
"list.hoverBackground": "#37414050",
19-
"menu.background": "#111518",
20+
"list.focusBackground": "#24282A",
2021
"menu.selectionBackground": "#24282A",
21-
"menu.selectionForeground": "#40A9F3",
2222
"scrollbarSlider.activeBackground": "#374140",
2323
"scrollbarSlider.background": "#37414050",
2424
"sideBar.background": "#191d1f",
2525
"sideBar.border": "#111518",
26-
"statusBar.background": "#242424",
26+
"statusBar.background": "#1C2022",
27+
"statusBar.border": "#111518",
2728
"tab.activeBackground": "#1C2022",
2829
"tab.border": "#111518",
2930
"tab.inactiveBackground": "#111518",
@@ -35,7 +36,14 @@
3536
"editorHoverWidget.border": "#111518",
3637
"inputOption.activeBorder": "#66b9f4",
3738
"focusBorder": "#66b9f4",
38-
"peekViewEditor.background": "#111518"
39+
"peekViewEditor.background": "#111518",
40+
"menu.background": "#1C2022",
41+
"menu.foreground": "#C0C0C0",
42+
"menu.selectionForeground": "#ffffff",
43+
"menubar.selectionBackground": "#ffffff10",
44+
"menubar.selectionForeground": "#ffffff",
45+
"editorGroup.dropBackground": "#ffd3991f",
46+
"editorWarning.foreground": "#FFD399"
3947
},
4048
"tokenColors": [
4149
{

0 commit comments

Comments
 (0)