Dark-mode support

[bjones1]

The client only supports light mode, which means it doesn't work well for the default VS Code theme. Figure out how to provide dark mode.

[bjones1]

Some notes/hints on this:

• See Theming webview content for how to integrate VS Code themes into a webview.
• The Webview UI Toolkit for Visual Studio Code may or may not be helpful.
• The big barrier for themes: all of CodeChat's content is in an iframe. The iframe, by default, prevents styles from VS Code from passing through to the the CodeChat content inside the iframe. Instead, you'll need to use JavaScript to pass specific styles to the iframe's contents.
• By default, styles are cached on the webview and by the CodeChat Server. To get a change to CSS or JS files to be applied, you'll need to manually update the version number on these files. For example, if you changed splitter.js, also change <script src="/static/splitter.js?v=1"></script> to <script src="/static/splitter.js?v=2"></script>. (TODO item: auto-version this...)

[DisarmedRemo66]

1. Describes the feature you will add. In Visual Studio Code, the CodeChat client only has a light mode. Theme’s do not apply to CodeChat. The feature we will be adding will be either having an installed them also apply to the client or having whatever mode you pick for Visual Studio Code to also apply.

2. Defines which repository/repositories your code will be added to. The repositories we will be working in will be the CodeChat_System, but specifically between the CodeChat_Client.css and CodeChat_Client.html.

3. Specifies what libraries, languages, and interfaces your code must work with. Languages that will need to be used will be CSS and HTML by bouncing between the CodeChat_Client files. Details a series of steps you will follow to complete this feature.

4. Our first steps will be to begin working with the CSS and show that we can create changes in it. We will start small and add incremental changes while updating the version number so that we can test different settings changes in the CSS. Once we can effectively update the CSS and test it, we’ll begin making more substantial changes revolving around changing Code Chat’s theme and testing for discrepancies when using either dark mode or a high contrast theme setting.

5. Defines tests to show the feature works correctly. Some testing ideas will be to create code chat documents that use a wide variety of code chat features including titles, headers, bold, italics, etc. We can then test that our code holds up with no visual bugs that may be caused by different themes.

6. Outlines goals for scrum 1 and scrum 2. For Scrum 1, we feel that our goal should be to have a good understanding of working with the CSS and updating it to where we can accurately access our code changes when updating different theme aspects. This will mean that we will begin having to work with injecting code into the CSS using JavaScript to work with the iFrame that Code chat uses.

By Scrum 2, we will begin working on the task of incorporating theming into code chat and working through errors caused by these themes, such as the entire page becoming black but none of the characters changing to a more visible color such as white.

[bjones1]

This looks good. Some thoughts / ideas:

Essentially, I think you're creating another CodeChat_Client.css for dark mode. You could think of this as a set of themes -- light mode, dark mode, colorful, austere, etc. This brings up several things to think about:

• Naming. Given a set of themes, will you call these CodeChat_Client-light.css, CodeChat_Client-dark.css, or what naming convention do you propose? Or should themes be placed in a subdirectory, for themes that contain images / fonts / additional files?
• Selection. How would the user specify a theme? Some ideas:
  • In a GUI in the client -- click on a setting menu and select a theme. But what if you wanted a specific theme per project, and didn't want to manually change themes all the time?
  • On the server -- here, the theme could be added to the codechat_config.yaml file or something like that, allowing the server to set it. But what about non-project builds (single file mode) -- how does the theme get set?
  • Autodetect -- perhaps code could look at the HTML and try to decide if it's a light or dark theme? Sounds tricky, though.
• Detection: given a naming convention, it would be nice for the selection mechanism to look through what's there and present themes, instead of hard-coding the themes.
• Documentation. You need to write user-facing and developer-facing docs, explaining how themes work, how you implemented them, which of these options you chose, etc.

[DisarmedRemo66]

Here is documentation related to our Dark Mode WIP: Dark Mode Documentation.docx