1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/mirrors-synthwave-vscode

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
README.md 13 КБ
Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История
Отправлено 12.03.2025 22:18 2d96be3

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

Логотип Synthwave '84 над городским пейзажем

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

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

С версии v0.1.0, внешние расширения больше не требуются для активации эффекта свечения!

Насыщенный цветами текст

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

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

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

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

Установка

Сначала установите базовую тему из VS Marketplace. Это способ ежедневного использования Synthwave '84. Если вы хотите включить экстремальные 80-е световые эффекты, вам потребуется выполнить некоторые дополнительные шаги для запуска их.### Предупреждение VS Code сам по себе не поддерживает текстовые эффекты, поэтому световые эффекты являются экспериментальными. Вероятно, будут возникать ошибки, и хотя они выглядят великолепно, они не предназначены для длительного использования. Для активации световых эффектов расширение должно модифицировать внутренние файлы VS Code, поэтому будьте осторожны при использовании. Если возникают проблемы, вы можете отключить световые эффекты следуя указанным ниже шагам. Если вы не можете запустить VS Code, проблему можно решить переустановкой VS Code.Если вы решаете использовать эффект свечения, будьте готовы принять риск. Наденьте свои солнцезащитные очки. Здесь могут быть (лазерные) драконы.

Включение свечения

С версии v0.1.0 внешние расширения больше не требуются для активации свечения.

Во-первых, если вы используете Windows, вам может потребоваться запустить VS Code с правами администратора. Для пользователей Linux и Mac Code не должен быть установлен в недоступной для записи папке, и у вас должны быть права на запись.

Если вы использовали Synthwave до версии v0.1.0, вы, скорее всего, использовали расширение Custom CSS и JS для включения свечения. Перед активацией Neon Dreams вам следует отключить предыдущий метод. Вы можете это сделать, нажав Ctrl + Shift + P или Shift + ⌘ + P и выбрав "Отключить Custom CSS и JS".

Чтобы активировать свечение, установите ваш текущий цветовой темплейт на Synthwave '84 — начиная с версии v0.1.0 свечение активируется только при выборе базовой темы. Откройте палитру команд с помощью Ctrl + Shift + P или Shift + ⌘ + P и выберите "Активировать Neon Dreams". Вам будет предложено перезапустить Code, после чего свет должен засиять :).

Примечание: В целях упрощения процесса установки и минимизации проблем, связанных с обновлением, новая версия Synthwave '84 больше не использует пользовательский CSS-файл. Если вы использовали модифицированную версию темы, вы все еще можете использовать её с помощью предыдущего Custom CSS и JS метода.#### Настройка яркости свечения В вашем файле settings.json добавьте ключ:

"synthwave84.brightness": 0.45

Значение должно быть вещественным числом от 0 до 1, где 0.0 полностью прозрачно. По умолчанию яркость составляет 0.45. Чтобы избежать переутомления глаз, рекомендуется избегать использования более высоких значений яркости длительное время.

Для просмотра изменений вам потребуется повторно выполнить функцию активации. Откройте палитру команд с помощью Ctrl + Shift + P или Shift + ⌘ + P и выберите Активировать Neon Dreams.

Примечание: Изменение яркости в настоящее время влияет только на прозрачность свечения, текст остаётся белым (это может измениться в будущих обновлениях). Если вы хотите отключить эффект свечения, но сохранить обновление шрифтов, см. ниже.#### Активация обновлений шрифтов редактора, но отключение свечения В вашем файле settings.json добавьте ключ:

"synthwave84.disableGlow": true

Для просмотра изменений вам потребуется повторно выполнить функцию активации. Откройте палитру команд с помощью Ctrl + Shift + P или Shift + ⌘ + P и выберите Активировать Neon Dreams.

Удаление предупреждения о корRUPTИРОВАННОМ состоянии и [неподдерживаемого] из панели заголовков

Поскольку включение эффекта "glow" модифицирует основные файлы, VS Code будет расценивать это как повреждение "core", и при перезапуске вашего редактора вы можете видеть сообщение об ошибке. Вы можете безопасно игнорировать это сообщение или полностью удалить его с помощью расширения Fix VSCode Checksums.После установки расширения 'Fix VSCode Checksums' откройте палитру команд и выполните Fix Checksums: Apply. Вам потребуется полностью перезапустить VSCode после выполнения команды; просто открытие без полной остановки может оказаться недостаточным.

Обновления

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

Отключение эффекта "glow" и удаление расширения

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

Шрифт

Я не включил шрифт в эту версию, так как знаю, что это очень личный выбор. Шрифт, который я использую (как показано на изображении выше), — это Fira Code, который я рекомендую тем, кто является поклонником ligatures.

Совместимость

Этот темплейт всё ещё находится в стадии разработки. Я преимущественно работаю с HTML & CSS, JS, React и Elixir, поэтому, хотя эти наборы языков должны выглядеть хорошо, могут возникнуть проблемы для других языков. Я буду работать над добавлением более широкой поддержки по мере возможности. Если вы заметили какие-либо явные проблемы, создайте задачу, и я постараюсь её исправить как можно скорее.## Вклад Я действительно рад принимать любой вклад в этот шаблон. Перед тем как делать изменения, пожалуйста, прочитайте руководство по вкладу.

Благодарность

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

Аналогично, я хотел бы поблагодарить Wes Bos за его классический шаблон Cobalt2. Его README помог мне понять, как упаковать этот хаос для общественного использования 👍Если этот шаблон слишком ярок, то я рекомендую Horizon или City Lights для схожего, но более скромного, ретро вида. Оба они очень красивы.

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

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1
https://api.gitlife.ru/oschina-mirror/mirrors-synthwave-vscode.git
git@api.gitlife.ru:oschina-mirror/mirrors-synthwave-vscode.git
oschina-mirror
mirrors-synthwave-vscode
mirrors-synthwave-vscode
master