Prerequisites

• Install git (Check with git --version in your terminal)
• Install npm - Look for the "Download Node.js and npm" button (Check with npm --v in your terminal)
• A GitHub account

The first Pull Request is always the hardest! If you're getting stuck on a step, feel free to reach out to me and I'll help walk you through where you're getting tripped up!

Basic Navigation in the Terminal

The following commands will help get you started with navigating through the terminal.

pwd - Shows the current directory you are in. Abbreviation for “Present Working Directory”
ls (dir for windows) - Lists the contents of the current directory
cd .. - Navigate to the directory above your current location
cd {directory} - Navigate to the designated directory. This can be an absolute path or relative path.

None of these commands alter anything, so feel free to try them out and become comfortable with them. You’ll be using them a lot.

Setup

1. Navigate your browser to https://github.com/12vanblart/color-themes
2. Click the "Fork" button in the top right
3. Once GitHub is done forking the repository, click the "Clone or Download" button and copy the url in the dialog box.
4. Open your terminal & navigate to a directory where you're okay adding the project's directory (When you run the next command, it will create a folder in your current location).
5. Run git clone url_copied_from_step_3 - this creates a copy of my repository in your directory
6. Run cd ./color-themes to open the project directory
7. Run git checkout -b yourBranchName, but replace yourBranchName with whatever you want to call your branch
8. Run npm install to install the project dependencies
9. If you use VS Code, run code . to open the directory in Code. If not, open your editor/IDE of choice and open the color-themes folder.
10. Run npm run serve to spin up a local copy of the app. (You can stop this at any point by pressing Ctrl + c and answering y to "Would you like to terminate the batch job?")
11. Open your web browser of choice and navigate to localhost:8080

At this point, you should see the same thing as on themes.tvanblargan.com.

Adding a theme

There are two files that you will need to update to add a new theme - src/assets/themes.css and src/components/ThemePicker.vue. These files were created when you used the git clone command above. Don't worry if you don't know any Vue, the changes you need to make to that file won't be anything too intense!

Editing ThemePicker.vue

In this file, you'll see a list of <Theme> components starting on line 28. Add a new line after all existing <Theme>'s as follows:

<Theme theme-name="your-theme-name" display-name="Your Theme Name" contributor="githubUsername"/>

replacing your-theme-name with the class name (see Editing themes.css below), Your Theme Name with whatever you want your theme's name to display as on the option list, and githubUsername with your GitHub username.

Editing themes.css

On line 15, you'll want to copy in the following (make sure your theme is at the top of the file after the comments end):

.your-theme-name {
  --primary: #fff;
  --secondary: #fff;
  --accent: #fff;
  --link: #fff;
  --text: #fff;
}

You'll update your-theme-name to be whatever you want your theme's class to be called (check that there isn't already a theme with your chosen name!).

Next, update the #fff's to be your colors of choice. If you're not sure where to start picking colors, I recommend playing around with Pallettte

Once you select your theme, saving themes.css will update localhost instantly without needing to reselect your new theme!

Requirements for accepted PR's

Note that each time a theme is selected, the A11y card's values are recalculated and updated to reflect the contrast ratio between various theme colors. In order for your theme to be approved, each of these numbers needs to be greater than or equal to 4.5 (WCAG AA Compliant).

Committing your changes

Once you're happy with your theme and it's passing the contrast requirements, you'll want to save your changes so they can be added to the live site and everyone can see your awesome theme!

To do this, head back into your terminal and use Ctrl + C to stop the local server (type y and press enter when prompted to "Terminate batch job (Y/N)?"). Then we're going to run the following commands:

1. git add * -- This tells git you want to add all altered files to the commit
2. `git commit -m "Add theme your-theme-name" -- This saves your changes as a point that can be added to GitHub.
3. git push --set-upstream origin yourBranchName (enter username/password if prompted) -- This uploads your commit to GitHub!

Making the Pull Request!

Now head to github.com and navigate to your forked repository (github.com/yourUserName/color-themes) and select the "Pull Requests" tab, then push the "New Pull request" button.

1. Once the page loads, you'll want to make sure the dropdowns on the left are base repository: 12vanblart/color-themes and base: master and the options selected on the right are head repository: yourUserName/color-themes and compare: yourBranchName.
2. Click "Create Pull Request" and fill in the details
3. Click "Create Pull Request" to submit your theme for review!

Closing Thoughts

Now you know enough to go make some PR's on the cool projects out there like this one from Emma:

or this one from Brittany (which has excellent documentation & issues for getting started!):

One last note

Thank you so much to Natalie for proofreading and bouncing around ideas about wording for this post!

natalie stroudFollow

accessibility architect. assistive technology engineering grad student. Pearl Jam's biggest fan.