vscodethemes / web Goto Github PK

View Code? Open in Web Editor NEW

732.0 5.0 34.0 4.64 MB

Search and preview themes from the VS Code Marketplace.

Home Page: https://vscodethemes.com

License: MIT License

TypeScript 77.01% JavaScript 0.91% CSS 22.08%

cloudflare-workers remix theme vscode

web's Introduction

Search and preview themes from the Visual Studio Marketplace.

This repository contains the source code for vscodethemes.com, built with Remix and Cloudflare Workers.

How it Works

VS Code Themes scans the Visual Studio Marketplace and maintains a searchable database of themes.

In order for a theme to show up on the website:

A description must exist in the extension's manifest
Themes must be .json (.tmTheme files are not supported)

Missing a theme? Open an issue.

Color Search

You can search for themes matching a color using the query string:

For a full list of supported color formats check out the test suite.

Creating a Theme

Here are some helpful links if you'd like to create your own theme:

Contributing

Development requires access to private packages. If you're interested in contributing let's chat! You're welcome to open an issue or send an email to [email protected].

History

Helping you discover new themes since 2018:

Version 1: February 2018 (Reddit)
Version 2: July 2018 (Medium)
Version 3: April 2022

web's People

Contributors

Stargazers

Watchers

web's Issues

Make theme rotator swipeable on mobile

https://twitter.com/michaeldgrahams/status/1021533923740770304

Fix rotator animation

The out transition appears to not be working anymore.

Extension Query Parameters

Hi,

I am developing a app that will generate a RSS feed of all the latest extension being published on on the VSCode marketplace.

When I look at your file vscodethemes/backend/jobs/scrapeExtensions.ts,
I seen that you have a bunch of filters setup:

  const query = {
    filters: [
      {
        criteria: [
          // Not sure what this does and doesn't affect results.
          { filterType: 8, value: 'Microsoft.VisualStudio.Code' },
          // Not sure what this does and doesn't affect results.
          { filterType: 10, value: 'target:"Microsoft.VisualStudio.Code"' },
          // Not sure what this does but does filter out records.
          { filterType: 12, value: '5122' },
          { filterType: 5, value: 'Themes' },
        ],
        direction: 2, // Not sure what this does.
        pageSize: 100,
        pageNumber: page,
        sortBy: 4, // Sorts by most downloads.
        sortOrder: 0,
      },
    ],
    flags: 914, // Settings flags to 914 will return the github link.
  }

How did you figure those out (how do you know sortBy:4 is equivalent to sort by most downloads)? Do you have a documentation you could point me too?

Thanks for helping me out!

Frontend CDN

Put a CDN in front of the heroku app.

Need to cache based on cookie values for language settings:
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Cookies.html

Fix header and modal contrast

In b79309e I switched to using color js. There doesn't seem to enough contrast in the header, especially the search field. Or maybe I'm just more blind today—I should reduce the transparency.

Side scroll the slider

Improves mobile experience, would be nice on desktop too.

Niketa theme is now Allegory

First, I want to thank you for the inclusion of my theme Niketa

I changed the direction and I cloned the old code to https://github.com/selfrefactor/allegory-theme which means that the link https://vscodethemes.com/search?q=niketa displays incorrect link. BTW feel free to check the screens of the new Niketa theme https://github.com/selfrefactor/niketa-theme as there are 7 light themes that you might find good enough for inclusion.

Incorrect active tab color

Probably needs to default to editorGroupHeader.tabsBackground not the default background color for dark themes.

Use publisherName and extensionName as id

Currently using repositoryOwner + repositoryName. Repository ownership is not verified on extension publish. Some forks of popular extensions still have the original extension's repository URLs. This causes forks to override the forked theme.

ie. markskelton.one-dark-pro-italic overrides zhuangtongfa.Material-theme

Support workspaces

https://github.com/will-stone/plastic

Theme preview svg endpoint

IMO it would be so cool to be able to include a link/embed/screenshot from here directly on the README/vscode marketplace theme page. Now there is a little bit of a chicken and egg problem at the start, but... 😄

Old themes are showing up

I recognized on my theme https://vscodethemes.com/e/TobiasTimm.raiju that old themes are still showing up. I've removed all variants except Raiju and Raiju - Next

Twitter image broken

Twitter doesn't seem to like screenshot.png for some reason.

Types overhaul

The types package has gotten messy.

Use https://github.com/gcanti/io-ts for runtime validation? Pretty sure we wouldn't need the static / runtime distinction anymore.

https://lorefnon.tech/2018/03/25/typescript-and-validations-at-runtime-boundaries/

Remove trailing commas

Some themes have trailing commas, which throws and error with JSON.parse

Documentation

Convert scripts to shell

cd infrastructure/env-$CI_BRANCH
terraform-apply

Favorites

Favorite extensions while you browse before deciding which to install.

@NavyAdmiral
Great job on the website. Could we add Select for Compare option? Once 2 themes have been selected to compare, a modal view could open with blurred background and the two selected themes standing next to each other.

Page-slider broken on first load

Description

The page-slider button does nothing when first opening the site. I notice the console shows:

/_next/static/commons/main-57832e66e62ce5722976.js:1 Failed to load resource: the server responded with a status of 404 ()

Steps to reproduce

Open https://vscodethemes.com/ in an incognito window in Chrome
Hover over any of the theme sections to show the right-arrow button on the righthand side.
Click any of the right-arrow buttons.

What's expected to happen?

The themes row corresponding to the button slides towards the left.

What actually happens?

No noticeable effect. No console error.

Environment

macOS High Sierra 10.13.5
Chrome Version 67.0.3396.99 (Official Build) (64-bit)

Mobile

Shift sort by to fixed tabs on bottom
Fixed search bar on top (goes away when you scroll down)
Open in Marketplace
Icon shifts to the left (inside container gutter) to make it accessible while scrolling

The www -> naked domain redirect isn't working.

¯\(ツ)/¯

Grouping

One extension / repo can have many themes. This causes one author / repo to take over many pages.

Is this actually a problem?
How can we present a group of themes in the search while maintaining discover-ability?

https://www.algolia.com/doc/guides/ranking/distinct/?language=javascript#distinct-for-grouping

e2e tests

https://www.cypress.io?

View on Github link is broken

Display a notification icon in the previews

I was looking through the previews and thought, this "Dracular" theme looks pretty good.

I downloaded it and gave it a try but then I noticed a fatal flaw in it.

I could barely read the badge numbers!

It would be nice if the preview screens displayed a notification badge so that we know what the notification badge looks like on each theme.

Edge / IE 11 bugs

Amethyst Themes are not showing up

My Amethyst Themes are not showing up, and as far as I can tell it meets all the criteria.

Wasted space

There is a lot of wasted space on the page. It would be nice if the grid of themes would change with the windows size, so a lot more space can be utilized and a lot more themes can be shown per page.

Browser testing

Custom code previews

Allow users to preview their own code snippets?

https://www.reddit.com/r/vscode/comments/90y7uj/vscodethemes_update/e2u6y0d

https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-tokens-and-colors

Fitz Dark Italic theme not showing up

It is published in the marketplace and the package.json includes:

{
	...
	"repository": {
		"type": "git",
		"url": "https://github.com/sheafitzek/fitz-dark-italic-vscode-theme"
	},
	...
	"contributes": {
		"themes": [
			{
				"label": "Fitz Dark Italic",
				"uiTheme": "vs-dark",
				"path": "./themes/fitz-dark-italic-vscode-theme.json"
			}
		]
	},
	...
}

The theme definition is in .JSON format and both colors and tokenColors are defined.

Pagination

Theme mixer / builder

In Sublime or Atom, there are syntax highlight theme and ui theme. In VSCode there is only one. So we can't configure light ui theme with dark syntax directly, only one that theme author published (or you need to customize it manually).

We can extract UI colors, show mixed theme preview, and let user copy & paste colors to their setting. (even making an editor plugin to make pasting color to setting simpler)

But after all this should be done in VSCode. This solution is not quite good 😓

Checkbox

vscode-github-theme

https://github.com/thomaspink/vscode-github-theme/blob/master/themes/github.json

Search on every keystroke?

Hey, just saw this being shared on Twitter, and was really impressed with the site.

One thing I noticed is that the search is only done on keypress of enter, while usually in Algolia we can use search on every keypress (especially since now they are free with the QPS limit)

Did you use search on enter on purpose to limit the operations, not to go over the QPS limit or does it have another reason?

Have a nice day!

Improve syntax highlighting

Use prism instead of highlightjs

No themes found

"Didn't find any themes matching ___."
[Clear Search]

More languages

Update: I want to support more languages but it's going to cost more $$ (#148). Please suggest languages you'd like to see as I'll still only be able to support the most popular.

Some token colors not rendering correctly

This is more of an FYI than an urgent issue. The preview for my theme has a few token colors that are off:

line 1 document
- TM Scope: support.type
- renders: #ff1111
- should be: #f39c12 bold
- note: the top level support token in my theme is #ff1111 for my own debugging purposes
line 5 innerText
- TM Scope: meta.property.object.js
- renders: #f39c12
- should be: #fcf270
- note: #f39c12 is used in my theme, most notably for storage.type and variable.other scopes
line 5 ${ and }
- TM Scope: keyword.other
- renders: #20df20
- should be: #00ffff
- note: #20df20 is used in my theme, most notably for top level punctuation and meta.brace scopes, #00ffff is used for keyword.other and punctuation.definition.variable