Skip to content

Commit

Permalink
Don't force background color when in editor-theme mode (#950)
Browse files Browse the repository at this point in the history
This PR makes the IDE panel adapt the background color depending on its
position when in editor-theme mode.

Previously, we'd always use background color that was set to the editor
background. However, depending on whether the panel is rendered in
editor on in side-panel, the built-in panels have different background
colors. This is particularily important in case of side-panel, where in
many themes there's no delimited between the editor and side-panel, so
the only way to distinguish where the panel starts is by its background
color.

Before (no visual indicator when there the panel starts):
<img width="1701" alt="image"
src="https://github.com/user-attachments/assets/8ff35bbd-eeac-4deb-a866-5fc9a7674259"
/>
After (background defins the panel threshold):
<img width="1701" alt="image"
src="https://github.com/user-attachments/assets/a55fa119-a204-46d9-a2b7-908726c067c8"
/>

### How Has This Been Tested: 
1. Test switching between editor theme and Radon theme across different
themes and in tab + side-panel modes:

<img width="1701" alt="image"
src="https://github.com/user-attachments/assets/652e6f33-2654-4ad3-856b-d941759f3f4c"
/>
<img width="1701" alt="image"
src="https://github.com/user-attachments/assets/9d5132be-bf1c-41fa-87f4-becf59d35975"
/>
<img width="1701" alt="image"
src="https://github.com/user-attachments/assets/0f0ecdb8-ac74-4c0b-990a-40dfc6b65aee"
/>
<img width="1701" alt="image"
src="https://github.com/user-attachments/assets/a55fa119-a204-46d9-a2b7-908726c067c8"
/>
  • Loading branch information
kmagiera authored Feb 11, 2025
1 parent 0a3f5b1 commit c3fcd87
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion packages/vscode-extension/src/webview/styles/theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -494,7 +494,7 @@ body[data-use-code-theme="true"] {
--deep-link-history-query-match-color: var(--swm-button-background);

--swm-active-item: var(--vscode-list-activeSelectionForeground);
--swm-preview-background: var(--vscode-editor-background);
--swm-preview-background: none;

--swm-default-text: var(--vscode-foreground);
--swm-marked-text: var(--vscode-editor-findMatchHighlightBackground);
Expand Down

0 comments on commit c3fcd87

Please sign in to comment.