feat: add vscode themes support

software-mansion · Jan 11, 2025 · e4fcf05 · e4fcf05
1 parent 3838dc8
commit e4fcf05
Show file tree

Hide file tree

Showing 15 changed files with 271 additions and 22 deletions.
diff --git a/packages/vscode-extension/package.json b/packages/vscode-extension/package.json
@@ -113,6 +113,16 @@
           ],
           "description": "Controls location of the IDE panel. Due to vscode API limitations, when secondary side panel is selected, you need to manually move the IDE panel to the secondary side panel. Changing this option closes and reopens the IDE."
         },
+        "RadonIDE.themeType": {
+          "type": "string",
+          "scope": "window",
+          "default": "vscode",
+          "enum": [
+            "vscode",
+            "built-in"
+          ],
+          "description": "Controls the theme of the IDE panel. If you encounter any issues, please report them. And set this to 'built-in' to use the built-in theme."
+        },
         "RadonIDE.showDeviceFrame": {
           "type": "boolean",
           "scope": "window",
@@ -452,7 +462,7 @@
     "typecheck": "tsc --noEmit",
     "format": "prettier --write --list-different src",
     "build:tests": "tsc --project tsconfig.test.json",
-    "test": "npm run build:extension-code && npm run build:webview && npm run build:tests && vscode-test",
+    "test": "npm run build:extension-code && npm run build:webview && npm run build:tests && vscode-test",  
     "preinstall": "cd ../vscode-js-debug && git submodule update --init && npm install && npm exec tsc"
   },
   "devDependencies": {

diff --git a/packages/vscode-extension/src/common/WorkspaceConfig.ts b/packages/vscode-extension/src/common/WorkspaceConfig.ts
@@ -1,8 +1,10 @@
 export type PanelLocation = "tab" | "side-panel" | "secondary-side-panel";
+export type ThemeType = 'vscode' | 'built-in';
 
 export type WorkspaceConfigProps = {
   panelLocation: PanelLocation;
   showDeviceFrame: boolean;
+  themeType: ThemeType;
 };
 
 export interface WorkspaceConfigEventMap {

diff --git a/packages/vscode-extension/src/panels/WorkspaceConfigController.ts b/packages/vscode-extension/src/panels/WorkspaceConfigController.ts
@@ -6,6 +6,7 @@ import {
   WorkspaceConfigProps,
   WorkspaceConfigEventMap,
   WorkspaceConfigEventListener,
+  ThemeType,
 } from "../common/WorkspaceConfig";
 import { getTelemetryReporter } from "../utilities/telemetry";
 
@@ -19,6 +20,7 @@ export class WorkspaceConfigController implements Disposable, WorkspaceConfig {
     this.config = {
       panelLocation: configuration.get<PanelLocation>("panelLocation")!,
       showDeviceFrame: configuration.get<boolean>("showDeviceFrame")!,
+      themeType: configuration.get<ThemeType>("themeType")!,
     };
 
     this.configListener = workspace.onDidChangeConfiguration((event: ConfigurationChangeEvent) => {
@@ -30,6 +32,7 @@ export class WorkspaceConfigController implements Disposable, WorkspaceConfig {
       const newConfig = {
         panelLocation: config.get<PanelLocation>("panelLocation")!,
         showDeviceFrame: config.get<boolean>("showDeviceFrame")!,
+        themeType: config.get<ThemeType>("themeType")!,
       };
 
       if (newConfig.panelLocation !== this.config.panelLocation) {

diff --git a/packages/vscode-extension/src/webview/components/DeviceSelect.css b/packages/vscode-extension/src/webview/components/DeviceSelect.css
@@ -15,7 +15,7 @@
   border: 0px solid transparent;
   border-radius: 18px;
   gap: 5px;
-  background-color: var(--swm-device-select-background);
+  background-color: var(--swm-device-select-trigger);
   color: var(--swm-device-select-trigger-text);
   user-select: none;
   width: var(--swm-device-select-width);
@@ -48,6 +48,7 @@
   border-radius: 18px 18px 0 0;
   padding-top: 4px;
   max-height: var(--radix-select-content-available-height);
+  box-shadow: var(--swm-backdrop-shadow);
 }
 
 .device-select-viewport {
@@ -127,6 +128,7 @@
 }
 .device-select-rich-item-icon-selected {
   background-color: var(--swm-device-icon-background-selected);
+  color: var(--swm-device-icon-selected);
 }
 
 .device-select-label {

diff --git a/packages/vscode-extension/src/webview/components/IconButtonWithOptions.css b/packages/vscode-extension/src/webview/components/IconButtonWithOptions.css
@@ -1,5 +1,5 @@
 .dropdown-arrow {
-  color: var(--swm-button);
+  color: var(--swm-icon-button);
   position: absolute;
   left: 0;
   right: 0;

diff --git a/packages/vscode-extension/src/webview/components/SettingsDropdown.tsx b/packages/vscode-extension/src/webview/components/SettingsDropdown.tsx
@@ -22,7 +22,7 @@ interface SettingsDropdownProps {
 }
 
 function SettingsDropdown({ project, isDeviceRunning, children, disabled }: SettingsDropdownProps) {
-  const { panelLocation, update } = useWorkspaceConfig();
+  const { panelLocation, themeType, update } = useWorkspaceConfig();
   const { openModal } = useModal();
   const { movePanelToNewWindow, reportIssue } = useUtils();
   const { telemetryEnabled } = useTelemetry();
@@ -145,6 +145,32 @@ function SettingsDropdown({ project, isDeviceRunning, children, disabled }: Sett
               <div className="dropdown-menu-item-content">Report Issue</div>
             </span>
           </DropdownMenu.Item>
+          <DropdownMenu.Sub>
+            <DropdownMenu.SubTrigger className="dropdown-menu-item">
+              <span className="codicon codicon-layout" />
+              Theme
+              <span className="codicon codicon-chevron-right right-slot" />
+            </DropdownMenu.SubTrigger>
+            <DropdownMenu.Portal>
+              <DropdownMenu.SubContent
+                className="dropdown-menu-subcontent"
+                sideOffset={2}
+                alignOffset={-5}>
+                <DropdownMenu.Item
+                  className="dropdown-menu-item"
+                  onSelect={() => update("themeType", 'vscode')}>
+                  VScode theme
+                  {themeType === 'vscode' && <span className="codicon codicon-check right-slot" />}
+                </DropdownMenu.Item>
+                <DropdownMenu.Item
+                  className="dropdown-menu-item"
+                  onSelect={() => update("themeType", 'built-in')}>
+                  Built in theme
+                  {themeType === 'built-in' && <span className="codicon codicon-check right-slot" />}
+                </DropdownMenu.Item>
+              </DropdownMenu.SubContent>
+            </DropdownMenu.Portal>
+          </DropdownMenu.Sub>
           {telemetryEnabled && <SendFeedbackItem />}
         </DropdownMenu.Content>
       </DropdownMenu.Portal>

diff --git a/packages/vscode-extension/src/webview/components/shared/Button.css b/packages/vscode-extension/src/webview/components/shared/Button.css
@@ -10,6 +10,7 @@
   border: 0px solid transparent;
   border-radius: 10px;
   color: var(--swm-button);
+  background-color: var(--swm-button-background);
   transition: all 200ms 0ms ease-in-out;
   user-select: none;
   gap: 8px;

diff --git a/packages/vscode-extension/src/webview/components/shared/IconButton.css b/packages/vscode-extension/src/webview/components/shared/IconButton.css
@@ -10,7 +10,7 @@
   background: none;
   border: 0px solid transparent;
   border-radius: 36px;
-  color: var(--swm-button);
+  color: var(--swm-icon-button);
   transition: all 200ms 0ms ease-in-out;
   flex-shrink: 0;
 }
@@ -22,12 +22,13 @@
 }
 
 .icon-button:hover {
-  background-color: var(--swm-button-hover);
+  color: var(--swm-icon-button-hover);
+  background-color: var(--swm-icon-button-hover-background);
 }
 
 .icon-button:active {
-  color: var(--swm-button-active);
-  background-color: var(--swm-button-active-background);
+  color: var(--swm-icon-button-active);
+  background-color: var(--swm-icon-button-active-background);
   transform: scale(0.9);
 }
 

diff --git a/packages/vscode-extension/src/webview/components/shared/RadioGroup.css b/packages/vscode-extension/src/webview/components/shared/RadioGroup.css
@@ -33,7 +33,7 @@ button {
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: var(--swm-popover-background);
+  background-color: var(--swm-radio-group-indicator);
 }
 
 .radio-group-label {

diff --git a/packages/vscode-extension/src/webview/components/shared/SearchSelect.css b/packages/vscode-extension/src/webview/components/shared/SearchSelect.css
@@ -35,7 +35,7 @@
 .matches-container {
   height: 200px;
   overflow: auto;
-  border: 2px solid var(--deep-link-history-border);
+  border: 2px solid var(--swm-button-background);
   border-radius: 4px;
   display: flex;
   flex-direction: column;

diff --git a/packages/vscode-extension/src/webview/components/shared/SwitchGroup.css b/packages/vscode-extension/src/webview/components/shared/SwitchGroup.css
@@ -15,13 +15,13 @@
 .switch-root {
   width: var(--switch-width);
   height: var(--switch-height);
-  background-color: var(--swm-switch-root-disabled);
+  background-color: var(--swm-switch-root-background);
   border-radius: 9999px;
   position: relative;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .switch-root[data-state="checked"] {
-  background-color: var(--navy-light-60);
+  background-color: var(--swm-switch-root-background-checked);
 }
 
 .switch-thumb {

diff --git a/packages/vscode-extension/src/webview/providers/WorkspaceConfigProvider.tsx b/packages/vscode-extension/src/webview/providers/WorkspaceConfigProvider.tsx
@@ -18,21 +18,29 @@ type WorkspaceConfigContextType = WorkspaceConfigProps & {
 const WorkspaceConfigContext = createContext<WorkspaceConfigContextType>({
   panelLocation: "tab",
   showDeviceFrame: true,
-  update: () => {},
+  update: () => { },
+  themeType: 'vscode',
 });
 
 export default function WorkspaceConfigProvider({ children }: PropsWithChildren) {
   const [config, setConfig] = useState<WorkspaceConfigProps>({
     panelLocation: "tab",
     showDeviceFrame: true,
+    themeType: 'vscode',
   });
 
   useEffect(() => {
-    workspaceConfig.getConfig().then(setConfig);
-    workspaceConfig.addListener("configChange", setConfig);
+    function watchConfigChange(e: WorkspaceConfigProps) {
+      document.body.setAttribute("data-use-code-theme", `${e.themeType === "vscode"}`);
+
+      setConfig(e);
+    }
+
+    workspaceConfig.getConfig().then(watchConfigChange);
+    workspaceConfig.addListener("configChange", watchConfigChange);
 
     return () => {
-      workspaceConfig.removeListener("configChange", setConfig);
+      workspaceConfig.removeListener("configChange", watchConfigChange);
     };
   }, []);