@@ -10,6 +10,59 @@ import bodyImage from './images/update-css-variables-body.png';
1010
1111Welcome to the Storybook for ** CodeQL for Visual Studio Code** ! This Storybook contains stories for components and pages in the extension.
1212
13+ ### Switching themes
14+
15+ To switch between VSCode Dark+ and Light+ themes, you can make the following changes:
16+
17+ ``` diff
18+ diff --git a/extensions/ql-vscode/.storybook/manager.ts b/extensions/ql-vscode/.storybook/manager.ts
19+ --- a/extensions/ql-vscode/.storybook/manager.ts
20+ +++ b/extensions/ql-vscode/.storybook/manager.ts
21+ @@ -2,6 +2,6 @@ import { addons } from '@storybook/addons';
22+ import { themes } from '@storybook/theming';
23+
24+ addons.setConfig({
25+ - theme: themes.dark,
26+ + theme: themes.light,
27+ enableShortcuts: false,
28+ });
29+ diff --git a/extensions/ql-vscode/.storybook/preview.ts b/extensions/ql-vscode/.storybook/preview.ts
30+ --- a/extensions/ql-vscode/.storybook/preview.ts
31+ +++ b/extensions/ql-vscode/.storybook/preview.ts
32+ @@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
33+ // Allow all stories/components to use Codicons
34+ import '@vscode/codicons/dist/codicon.css';
35+
36+ - import '../src/stories/vscode-theme-dark.css';
37+ + import '../src/stories/vscode-theme-light.css';
38+
39+ // https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
40+ export const parameters = {
41+ @@ -19,14 +19,14 @@ export const parameters = {
42+ },
43+ - // Use a dark theme to be aligned with VSCode
44+ + // Use a light theme to be aligned with VSCode
45+ docs: {
46+ - theme: themes.dark,
47+ + theme: themes.light,
48+ },
49+ backgrounds: {
50+ - default: 'dark',
51+ + default: 'light',
52+ values: [
53+ {
54+ - name: 'dark',
55+ - value: '#1e1e1e',
56+ + name: 'light',
57+ + value: '#ffffff',
58+ },
59+ ],
60+ }
61+ ```
62+
63+ You will need to restart Storybook to apply the theme change to the Storybook UI. The preview frame should update
64+ automatically.
65+
1366### Writing stories
1467
1568To create new stories, copy an existing story in the ` src/stories ` directory and modify it to use your component or page. Please note that
@@ -29,7 +82,7 @@ for the WebView UI Toolkit can be found [here](https://microsoft.github.io/vscod
2982
3083### Updating VSCode CSS variables
3184
32- The VSCode CSS variables that are injected into the Storybook preview are defined in the ` src/stories/vscode-theme.css ` file. They need to be
85+ The VSCode CSS variables that are injected into the Storybook preview are defined in the ` src/stories/vscode-theme-dark .css ` file. They need to be
3386updated manually if new variables are added to VSCode. It can also be updated if you would like to manually preview a different theme. To update
3487these variables, follow these steps:
3588
@@ -47,9 +100,11 @@ expand all CSS variables.
47100
48101<img src = { stylesImage } />
49102
50- 7 . Copy all variables to the ` src/stories/vscode-theme.css ` file.
103+ 7 . Copy all variables to the ` src/stories/vscode-theme-dark .css ` file.
511048 . Now, select the ` <body> ` element which is a direct child of the ` <html> ` element.
52- 9 . This time, you do not need to copy the variables. Instead, copy the styles on the ` <body> ` element to the ` src/stories/vscode-theme.css ` file.
105+ 9 . This time, you do not need to copy the variables. Instead, copy the styles on the ` <body> ` element to the ` src/stories/vscode-theme-dark .css ` file.
53106See the image below for which styles need to be copied.
54107
55108<img src = { bodyImage } />
109+
110+ The same process can also be followed for updating the ` src/stories/vscode-theme-light.css ` file, but make sure to select the ** Light+** theme.
0 commit comments