terabytetiger/color-themes

Vue.js App which allows for sampling color themes.

color-themes

This is a project to walk through the process of creating a Pull Request by contributing to a small open source site!

Learn about git - If you're new to git / GitHub, start here 👇

https://dev.to/tvanblargan/crash-course-git-lingo-1enj

Tutorial for submitting a theme - If you're new to submitting PR's, start here 👇

https://dev.to/12vanblart/make-your-first-pull-request-3iai

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Hacktoberfest Note

If your submitted theme doesn't meet WCAG standards, I'll be adding the Invalid tag to it until updated to an accessible theme.

color-themes's Issues

Add a "Copy Colors" button to Popper

Add a button to the bottom of the Popper popout to copy theme to clipboard.

I.e. Clicking this button while the default-light theme is selected would copy

.default-light {
  --primary: #351c4d;
  --secondary: #fff;
  --accent: #f5ab99;
  --link: #674672;
  --text: #351c4d;
}

Better Naming of "Change Theme"

Replace "Change Theme" with a better wording.

Make sure it implies clickable.

Submit a Theme!

This is a sticky request to help tag the repository as beginner friendly

If you're new to git and not sure how it works, check here: https://dev.to/tvanblargan/crash-course-git-lingo-1enj

If you're new to making pull requests, this will walk you through making a PR to this repository: https://dev.to/tvanblargan/make-your-first-pull-request-3iai

Welcome to Open Source!

Add margin to bottom of wrapper div

Add a margin-bottom of ~20-ish-px to the bottom of the wrapper div.

Replace PlaceKitten with Https alternative

Currently, the site is serving mixed content via the placekitten image example.

Addressing this will involve finding a similarly sized image that can be either served as a static asset, or pulled via https.

Better Spacing of Themes

It would be nice if the themes would center under the "Choose a new theme" banner.

I think this can be achieved in an accessible manner by wrapping the buttons in a div and using marign: auto