diff --git a/docs/THEMES.md b/docs/THEMES.md
index 6abb11771a17..5408b14f5bc5 100644
--- a/docs/THEMES.md
+++ b/docs/THEMES.md
@@ -7,16 +7,15 @@
### Forking Monkeytype
-First you will have to make a personal copy of the Monkeytype repository, also known as "forking". Go to the [Monkeytype repo](https://github.com/monkeytypegame/monkeytype/) and then click the "fork" button.
+First, you will need to make a personal copy of the Monkeytype repository, also known as "forking." Go to the [Monkeytype repo](https://github.com/monkeytypegame/monkeytype/) and then click the "fork" button.
## Creating Themes
-After you have forked the repository you can now add your theme. Create a CSS file in `./frontend/static/themes/`. Call it whatever you want but make sure that it is all lowercase and replace spaces with underscores. It should look something like this:
-`theme_name.css`.
+After you have forked the repository, you can now add your theme. Create a CSS file in `./frontend/static/themes/`. Name it whatever you want, but make sure that it is all lowercase and replace spaces with underscores. It should look something like this: `theme_name.css`.
-Then add this code to your file:
+Then, add this code to your file:
```css
:root {
@@ -30,14 +29,13 @@ Then add this code to your file:
--error-extra-color: #ffffff;
--colorful-error-color: #ffffff;
--colorful-error-extra-color: #ffffff;
- }
+}
```
Here is an image showing what all the properties correspond to:
-Change the corresponding hex codes to create your theme.
-Then, go to `./packages/schemas/src/themes.ts` and add your new theme name at the _end_ of the `ThemeNameSchema` enum. Make sure to end the line with a comma.
+Change the corresponding hex codes to create your theme. Then, go to `./packages/schemas/src/themes.ts` and add your new theme name at the **end** of the `ThemeNameSchema` enum. Make sure to end the line with a comma.
```typescript
export const ThemeNameSchema = z.enum([
@@ -45,9 +43,10 @@ export const ThemeNameSchema = z.enum([
"80s_after_dark",
...
"your_theme_name",
+]);
```
-Then, go to `./frontend/src/ts/constants/themes.ts` and add the following code to the _end_ of the `themes` object near to the very end of the file:
+Next, go to `./frontend/src/ts/constants/themes.ts` and add the following code to the **end** of the `themes` object near the very end of the file:
```typescript
export const themes: Record> = {
@@ -58,14 +57,14 @@ export const themes: Record> = {
subColor: "#ffffff",
textColor: "#ffffff",
},
-}
+};
```
Make sure the name you put matches the name of the file you created (without the `.css` file extension). Add the text color and background color of your theme to their respective fields.
### Committing Themes
-Once you have created your theme(s), you now need to create a pull request to the main Monkeytype repository. Go to the branch where you created your new theme on GitHub. Then make sure your branch is up to date. Once it is up to date, click "contribute".
+Once you have created your theme(s), you now need to create a pull request to the main Monkeytype repository. Go to the branch where you created your new theme on GitHub. Ensure your branch is up to date. Once it is up to date, click "contribute."
Update branch:
@@ -73,9 +72,10 @@ Update branch:
Create a pull request:
-Add some screenshots of your theme to the pull request. Click "create pull request" and if it gets approved then your new theme is available on Monkeytype for everyone to enjoy.
+Add some screenshots of your theme to the pull request. Click "create pull request," and if it gets approved, your new theme will be available on Monkeytype for everyone to enjoy.
## Theme Guidelines
Make sure your theme follows the [Theme guidelines](./CONTRIBUTING.md#theme-guidelines).
+Use Control + Shift + M to toggle the tab key moving focus. Alternatively, use Esc then Tab to move to the next interactive element on the page.