Тема SynthWave '84 для VS Code

Вы помните бесконечное лето восьмидесятых? Гонка по морской трассе с открытым верхом, ветер в волосах и голова полна ночных грез?

Нет, я тоже не помню это, но с помощью этой экспериментальной темы мы можем туда попасть.

Эта цветовая схема вдохновлена музыкой и оформлением альбомов современных групп Synthwave, таких как FM-84, Timecop 1983 и The Midnight. В связи с этим я также взял значительное влияние из отличной ретро-стилизованной работы Джеймса Уайта (проверьте его работу, она просто великолепна).

Но...почему?

Я был ребенком в восьмидесятых, но большую часть своей юности я сильно не любил эти воспоминания, считая их слишком старомодными. Однако, перебирая фотографии за последние несколько лет, я начал ценить то время и хотел бы немного его отметить.

Аналогично, в мире современного веб-разработки, где есть шейдеры, React и WebGL, легко забыть, что основы действительно хороши. Поэтому эта тема обращается к основам — без магии шейдеров. Без облачных потоковых Webgl-рендерингов. Только чистый CSS:

Установка

Чтобы начать, установите основную тему из VS Marketplace. Это правильный способ использования Synthwave '84 каждый день. Если вы хотите активировать эффекты свечения, вам потребуется выполнить некоторые дополнительные шаги для запуска этого режима.

VS Code сам по себе не поддерживает текстовые эффекты, поэтому свечение является экспериментальным. Оно может содержать ошибки, хотя и выглядит круто, но не предназначено для длительного использования.

Если вы решаете использовать эффекты свечения, делайте это на свой страх и риск. Наденьте свои солнцезащитные очки. Здесь будет появляться (лазерный) дракон.### Чтобы включить световое пятно Установите этот отличный плагин, который позволяет вам загружать пользовательские CSS и JS из VS Marketplace. Пожалуйста, внимательно прочитайте руководство ReadMe по правилам использования данного расширения перед продолжением установки. Найдите файл synthwave84.css либо в директории установки этого расширения Visual Studio Code, либо непосредственно из репозитория GitHub. В качестве альтернативы, если вы хотите обновить внешний вид без эффекта свечения текста, можно использовать файл synthwave84-noglow.css. Скопируйте выбранный вами CSS-файл на ваш компьютер, например, в папку пользователя. Скопируйте путь к файлу и добавьте его в файл settings.json вашего VS Code. На Mac это может выглядеть примерно так:

{
  "vscode_custom_css.imports": [
    "file:///Users/{ваш_пользователь}/synthwave84.css"
  ]
}

На Windows это может выглядеть следующим образом:

{
  "vscode_custom_css.imports": [
    "file:///C:/Users/{ваш_пользователь}/synthwave84.css"
  ]
}

Важно: Убедитесь, что вы включили протокол файла в пути, то есть file://.

Откройте палитру команд с помощью Ctrl + Shift + P или Shift + ⌘ + P и выберите "Включить пользовательский CSS и JS". Это откроет запрос на перезапуск, и после перезапуска свет должен засиять :).На этом этапе VS Code может отобразить сообщение о том, что он поврежден; это вызвано расширением пользовательского CSS & JS и не связано с этой темой. Как указано в инструкциях по установке этого расширения, вы можете нажать "Не показывать снова", чтобы закрыть диалоговое окно.## Обновления Каждый раз, когда вы обновляете VS Code, вам потребуется повторить этот шаг, чтобы заново включить пользовательский CSS и JS. Аналогично, при обновлении темы вам также потребуется скопировать обновленный CSS в выбранное вами место.

Это менее чем идеально, но до тех пор, пока VS Code не добавит возможность использования пользовательского CSS нативно, это, к сожалению, единственный вариант.

Отключение свечения и удаление

Эффект свечения начался как шутка и никогда не был предназначен для длительной работы. Если вы хотите отключить его, вы можете сделать это в любое время, открыв палитру команд с помощью Ctrl + Shift + P или Shift + ⌘ + P и выбрав "Отключить пользовательский CSS".

Если вы решите полностью поменять тему, вам также потребуется отключить пользовательский CSS таким образом. Вы также можете захотеть удалить путь к файлу из вашего settings.json.

Шрифт

Я не включил шрифт в эту версию, поскольку знаю, что это очень личное предпочтение. Шрифт, который я использую (тот, который виден на изображении выше), это Fira Code, который я рекомендую, если вы поклонник ligatures.## Совместимость Эта тема все еще находится в процессе разработки. Я в основном работаю с HTML & CSS, JS, React и Elixir, поэтому, хотя эти наборы языков должны выглядеть хорошо, могут возникнуть проблемы для других языков. Я буду работать над добавлением более широкой поддержки по мере возможности. Если вы заметили что-то явно неправильное, создайте задачу, и я постараюсь ее исправить как можно скорее.

Внесение вклада

Мне очень приятно рассмотреть любые вклады в этот темплейт. Перед тем как делать какие-либо изменения, пожалуйста, прочитайте руководство по внесению вклада.## Благодарности Наконец, без потрясающей работы Sarah Drasner мне было бы невозможно создать это. Её руководство по оформлению тем для CSS Tricks оказалось огромной помощью при разработке этого темплейта 🙏

Аналогично, хочу поблагодарить Wes Bos за его классический темплейт Cobalt2. Его описание помогло мне понять, как упаковать этот проект для публичного использования 👍

Если вам кажется, что этот темплейт слишком ярок, то я рекомендую Horizon или City Lights для схожего, но более сдержанного, ретро-стиля. Оба они прекрасны.

Изображение городской панорамы от Unsplash