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. Screenshot showing location of the fork button on GitHub. ## 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: Screenshot showing the page elements controlled by each color property -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: Screenshot showing how to update the fork to match the main Monkeytype repository @@ -73,9 +72,10 @@ Update branch: Create a pull request: Screenshot showing how to create a pull request to the main Monkeytype repository -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.