Understanding vscode (3)

Time:2019-11-8

In the previous article, I introduced the running process of vscode from the entry file to the rendering process. Today, let’s take a look at the workbench by implementing dark mode

Take a look at the renderings first. This article only introduces the logic implementation. The specific UI is not discussed

Understanding vscode (3)

In my opinion, there are two themes used to implement the dark mode. Actually, vscode provides the dark mode API. But it is troublesome Because the actual scene I encounter personally does not need to let users switch themes. So I chose two themes to switch to realize pseudo dark mode

From workbench.tsstartupStart. Here vscode will render the UI we see. So we can add two functions to workbench.tsstartupDarkModeButtonandchangeThemeHandleRespectively responsible for button rendering and switching theme logic

private startupDarkModeButton(instantiationService: IInstantiationService) {
        const node = document.createElement("input");
        node.id = "dark-mode-button";
        node.style.backgroundColor = "blue";
        node.value = "dark mode";
        node.type = "checkbox";
        node.style.height = "26px";
        node.style.width = "100px";
        node.style.color = "#ffffff";
        //I'll just add it to the body... This article only discusses the implementation
        document.body.insertBefore(node, document.getElementById('monaco-parts-splash'))
        
        node.onchange = async () => {
            this.changeThemeHandle(instantiationService, node);
        }
}
private changeThemeHandle(instantiationService: IInstantiationService, checkbox: HTMLInputElement) {
    const themeIDs: string[] = [
        //Normal theme
        "vs thenikso-github-plus-theme-themes-github-plus-theme-json",
        //Dark mode theme
        "vs-dark vscode-theme-defaults-themes-dark_vs-json"
    ];
   
    //Invokefunction is mainly to obtain servicesaccessor
    instantiationService.invokeFunction((accessor: ServicesAccessor) => {
        const workbenchThemeService: IWorkbenchThemeService = accessor.get(IWorkbenchThemeService);
        
        //Switch theme       
        workbenchThemeService.setColorTheme(BELLCODE_THEMES[Number(el.checked)], undefined)
    })
}

Then instartupCall ourstartupDarkModeButtonFunction to mount our little buttons

startup(): IInstantiationService {
        try {

            // Configure emitter leak warning threshold
            setGlobalLeakWarningThreshold(175);

            // ARIA
            setARIAContainer(document.body);

            // Services
            const instantiationService = this.initServices(this.serviceCollection);

            instantiationService.invokeFunction(async accessor => {
                const lifecycleService = accessor.get(ILifecycleService);
                const storageService = accessor.get(IStorageService);
                const configurationService = accessor.get(IConfigurationService);

                // Layout
                this.initLayout(accessor);

                // Registries
                this.startRegistries(accessor);

                // Context Keys
                this._register(instantiationService.createInstance(WorkbenchContextKeysHandler));

                // Register Listeners
                this.registerListeners(lifecycleService, storageService, configurationService);

                // Render Workbench
                this.renderWorkbench(instantiationService, accessor.get(INotificationService) as NotificationService, storageService, configurationService);

                // Workbench Layout
                this.createWorkbenchLayout();

                // Layout
                this.layout();
                
                // mount dark mode button
                this.startupDarkModeButton();
                
                // Restore
                try {
                    await this.restoreWorkbench(accessor.get(IEditorService), accessor.get(IEditorGroupsService), accessor.get(IViewletService), accessor.get(IPanelService), accessor.get(ILogService), lifecycleService);
                } catch (error) {
                    onUnexpectedError(error);
                }
            });

            return instantiationService;
        } catch (error) {
            onUnexpectedError(error);

            throw error; // rethrow because this is a critical issue we cannot handle properly here
        }
    }

In the simple two functions, we basically realize the topic switching. What if I write some components like my rendering Tomorrow we’ll talk about how to extend the vscode UI. If you think the content of every day’s article is too simple, you can send me a private message if you have any questions Make a little progress every day

Recommended Today

The use of progressbarcontrol, a progress bar control of devexpress – Taking ZedGraph as an example to add curve progress

scene WinForm control – devexpress18 download installation registration and use in vs: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/100061243 When using ZedGraph to add curves, the number of curves is slower if there are many cases. So in the process of adding curve, the progress needs to be displayed, and the effect is as follows     Note: Blog home page:https://blog.csdn.net/badao_liumang_qizhi […]