We'd love to expand our themes with new, cool ones! If you have a fancy theme in mind or would like to see and design new themes, here are simple instructions on how to get started. (Here are the currently available themes.)
Requesting a theme
Open an issue describing your new theme. If possible, include an image. It can be a theme from another README card project.
Indicate in the issue if you want someone else to add the theme.
Open a Pull Request containing your changes. Please also include a screenshot of your new theme in the PR.
themes.set() example:
// the theme name should be snake_casethemes.set("theme_name",{backgroundColor: "#ffffff",// the background color of the cardborderColor: "#ffffff",// the border color of the cardtitleColor: "#ffffff",// the title colorbadgeColor: "#ffffff",// the background color of the badges});
Additional context
Please follow the structure of the code and make sure the spacing and formatting is consistent.
The theme will not display correctly in THEMES.md until it is deployed, but you can test it locally. Your added theme will be available when your PR is merged.
Be sure to check the previously added themes to see if a similar (or identical) theme already exists.
This issue should remain open, please do not mark it as fixed.
Describe the feature
In the project's README, we have a screenshot of the project's website. It would be great to replace it with a short GIF, so everyone could see a better preview of the project.
What should happen while playing the GIF:
Change the title to Demo Website
Select a good-looking dark theme from the dropdown
Add one or two badges (it's the little + under the Line 1 )
Click on the Generate button and wait until the preview changes
Here's a little checklist:
In the README, the screenshot is replaced with the GIF and is exactly in the same position
The GIF is uploaded in the docs/ folder and referred from there in the README
The GIF is cropped, so only the site's main content is visible
Additional context
We are open to every idea. Feel free to give us any suggestions in the comment section, or by opening a new issue.
Describe the bug
The save button remains disabled until the text for the label and icon surpasses 4 characters. This behavior prohibits technologies like Git, Lit, etc. from being added as badges.
To Reproduce
Steps to reproduce the behavior:
Go to 'Line 1'
Click on '+' to add badge
Type 'Lit' on Icon and Badge label, and add any color (#324FFF for the Lit logo, for example)
Save button remains disabled
Expected behavior
Save button is enabled, able to save the badge
// the theme name should be snake_casethemes.set("theme_name",{backgroundColor: "#ffffff",// the background color of the cardborderColor: "#ffffff",// the border color of the cardtitleColor: "#ffffff",// the title colorbadgeColor: "#ffffff",// the background color of the badges});
Additional context:
If possible, include a screenshot from your theme when you open the PR to make the reviewer's job easier.
Please follow the structure of the code.
Note
The theme won't show up correctly in the README until it's deployed, but you can test it locally. There is a shell script under the scripts/ folder, which helps you test it. Make sure you run it from the root folder.
In our README, there is a GIF of the project's website. We would like to replace this GIF with a better-quality one. Also, the website has been updated with minor changes and we would like to show it off as well.
What should happen while recording the GIF
Change the title to Demo Website
Choose a nice dark theme from the drop-down menu
Add one or two badges (it's the little + below the Line 1 )
Click on the Generate button and wait until the preview changes. Make sure you wait 0.5-1 second after the card has generated itself so we can see the result.
Of course, you can include more actions to show off the site's features.
Checklist
In the README, the old GIF is replaced with the new one and is exactly in the same position.
The GIF is uploaded to the docs/ folder and referenced from there in the README.
The GIF is cropped so that only the main content of the page is visible.
The GIF is high quality and everything is clearly readable.
Additional context
We are open to any ideas. Feel free to make suggestions in the comments section or by opening a new topic.
If you want to start working on this task, please write a comment so I can assign you this issue.
thank you for building this project. I was really enthusiastic when I saw this project and I would like to create a tech-stack-card for my profile. Unfortunatly, simple icons does not include all icons I would like to add (e.g. Seaborn). To handle this, I used custom .svg files from their website and added them to the card.
Depending on the file, the whole card did not show.