Understanding vscode (3)


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

            // ARIA

            // 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

                // Registries

                // Context Keys

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

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

                // Workbench Layout

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

            return instantiationService;
        } catch (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