Better management of themes in vscode preview

[FelixLangot]

Hi, I just started using mystmd and I really love it. I had this idea that might be a detail, but I thought it would be cool to share: I am using mystmd on vscode which allows me to edit my documents and see it updating on vscode's simple browser almost instantly. I have a setting on my laptop that changes the theme from light to dark when the sun sets. I think it would be nice if the simple browser view of the myst document would adapt to this. I have seen that there is a toggle button to switch between light and dark, but each time I change something in my document it reloads the simple browser page and puts back the light theme. Do you think it would be possible to implement this? Thanks

[rowanc1]

So cool, glad you are enjoying it!
The theme is currently set in a cookie (so that it doesn't flicker on first load), so it is possible that isn't being respected in the vscode workflow.
Can you share a bit more about how you are using vscode, I haven't used the embedded browser and would be curious to try that method out on my side!

[FelixLangot]

I see! I'm going to try and make a small movie that shows my workflow.

Essentially so far I just have a basic myst project that I built following the website tutorials. I open this project in vscode. Then I open the built-in terminal and I initialise with "myst". I then open the markdown source file on the left side and the preview on the right side using the embedded browser. The standard way to do this would be to hit Shift+cmd+P (replace cmd by ctrl on windows I think) and type Simple Browser: Show, then type the address ([...]localhost[...]) in the popup. However, there is a way to make custom shortcuts that is quite handy in vscode which makes this a lot faster:
First you need to edit the tasks.json file. My tasks.json file only contains this one task so far:

{ 
    // See https://go.microsoft.com/fwlink/?LinkId=733558  
    // for the documentation about the tasks.json format  
    "version": "2.0.0",  
    "tasks": [  
        {  
            "label": "SimpleBrowser",  
            // "type": "shell",  
            "command": "${input:openSimpleBrowser}",  
            "problemMatcher": [],
    "presentation": {
        "panel": "new",  // This opens a new terminal panel for the task
        "group": "sidebar"  // This option is not officially supported and may not work as expected
    } 
        }  
    ],  
    "inputs": [  
        {  
            "id": "openSimpleBrowser",  
            "type": "command",  
            "command": "simpleBrowser.show",  
            "args": [  
                "http://localhost:3000"  
            ]  
        }  
    ]  
}  

Then you need to assign a keyboard shortcut to this task. To do so, you can hit Shift+cmd+P again then type Preferences: Open Keyboard shortcuts. Then find the command to run your custom task in the search bar, which should be "workbench.action.tasks.runTask". Then you can assign a keyboard shortcut to this task. This allows to simply hit the custom shortcut (for me Shift+option+B) that directly opens vscode's embedded browser on the address of the myst project. Let me know if you want to know more.