Вы помните бесконечное лето восьмидесятых? Гонка по морской трассе с открытым верхом, ветер в волосах и голова полна ночных грез?
Нет, я тоже не помню это, но с помощью этой экспериментальной темы мы можем туда попасть.
С версии 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.
Поскольку включение эффекта "glow" модифицирует основные файлы, VS Code будет расценивать это как повреждение "core", и при перезапуске вашего редактора вы можете видеть сообщение об ошибке. Вы можете безопасно игнорировать это сообщение или полностью удалить его с помощью расширения Fix VSCode Checksums.После установки расширения 'Fix VSCode Checksums' откройте палитру команд и выполните Fix Checksums: Apply
. Вам потребуется полностью перезапустить VSCode после выполнения команды; просто открытие без полной остановки может оказаться недостаточным.
Каждый раз, когда вы обновляете VS Code, вам потребуется повторить этот шаг, чтобы снова включить эффект "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 )