English Description / 中文的解释 (翻訳はDeepLを使用しました)

⧉ 目次（Contents）

⧉ 目次（Contents）
⧉ インストール方法
⧉ 自分の好みにカスタマイズしましょう
⧉ テーマを作成するにあたって
- 🕮 闇って優しい感じなの？(Is the darkness kind feeling?)
⧉ ライセンス

⧉ インストール方法

サイドバーから拡張機能アイコンを押してメニューを開きます。
次に検索窓から"Kindfeeling"と検索します。
拡張機能のアイコン
Installボタンを押します。
サイドバーから管理アイコンを押してメニューを開きます。
管理のアイコン
配色テーマを選択して、"Kindfeeling"を選びます。
楽しんでください! 😊

⧉ 自分の好みにカスタマイズしましょう

使用フォント

フォントの解説源ノ角ゴシック Source Han Code JP
GitHub adobe-fonts/source-han-code-jp
🗛 ダウンロード Fonts version 2.011R(OTF, OTC)

拡張機能を使ってさらに見た目を変更しましょう

Marketplace	VScode
Bracket Pair Colorizer 2
indent-rainbow
Highlight
Background-cover
Kitty Time =(＾● ⋏ ●＾)= ෆ 😺

オススメの設定

VS Codeの設定を変更します。

{
  "editor.cursorStyle": "line",
  "editor.cursorWidth": 3,
  "editor.renderWhitespace": "boundary",
  "editor.minimap.side": "left",
  "editor.minimap.maxColumn": 40,
  "editor.minimap.renderCharacters": false,
  "editor.minimap.showSlider": "always",
  // extension "bracket-pair-colorizer-2"
  "bracket-pair-colorizer-2.colors": [
    "Green",
    "Red",
    "Blue",
    "Orange"
  ],
  // Highlight
  "highlight.regexFlags": "gi",
  "highlight.decorations": {
    "rangeBehavior": 3
  },
  "highlight.regexes": {
    "( {1,})[\\r?\\n]": [ // Space at the end of the line
      {
        "backgroundColor": "#FFC0F0",
        "borderColor": "#FF0086",
        "borderWidth": "1px",
        "borderStyle": "solid",
      }
    ],
    "(?<=\\S)( {2,})(?=\\S)": [ // Two or more spaces between characters
      {
        "borderColor": "#FF0086",
        "borderWidth": "1px",
        "borderStyle": "none none dashed none",
      }
    ],
    "(　)": [ // full-width space
      {
        "backgroundColor": "#FFC0F0",
        "borderColor": "#FF0086",
        "borderWidth": "1px",
        "borderStyle": "solid",
      }
    ],
    "([！"＃＄％＆'（）＝～｜'｛＋＊｝［］＜＞？＿－＾￥＠「；：」・])": [ // full-width sign
      {
        "borderColor": "#FF0086",
        "borderWidth": "1px",
        "borderStyle": "solid",
      }
    ],
  },
  "highlight.maxMatches": 250,
}

こんな設定もあります

各プロジェクトのルートフォルダーに .vscode フォルダーを作成しフォルダー内にsettings.jsonファイルを作成、以下のコードを追加するとプロジェクト毎に見た目を変更できます。

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#F0F0F0",
    "titleBar.activeForeground": "#101010",
    "activityBar.background": "#9B4A4A",
    "activityBar.foreground": "#FFFFFF",
  },
}

ターミナルをBashにして、開いているソースと同じフォルダーで開く方法。
bash.exeの場所はご利用の環境に合わせてください。

  {
    "terminal.integrated.shell.windows": "${env:windir}\\system32\\cmd.exe",
    "terminal.integrated.shellArgs.windows": [
      "/c",
      "cd /d ${fileDirname}",
      "& c:\\Git\\bin\\bash.exe"
    ],
  }

スクリーンショットの背景について (No support)

スクリーンショットに使用されている画像は、images フォルダーに保存されています。

拡張機能 "Background-cover" を使う場合

画像の不透明度（opacity）は最初0.5くらいがオススメです。
"Background-cover" の設定を直接変更します。
"FileDom.js" を変更して表示する画像の基準となる位置を左下にします。
ファイルの場所 : ~\.vscode/extensions\manasxx.background-cover-2.2.3\out\FileDom.js.
拡張機能のフォルダーはこちらを参照してください。

「*（アスタリスク）」の行を追加します。

getCss() {
  // ???????
  let opacity = this.imageOpacity;
  opacity = opacity <= 0.1 ? 0.1 : opacity >= 1 ? 1 : opacity;
  opacity = 0.79 + (0.2 - ((opacity * 2) / 10));
  let imagePath = this.imagePath.replace(/\\/g, '/');
  return `
  /*ext-${this.extName}-start*/
  /*ext.${this.extName}.ver.${version_1.default}*/
  body{
    background-size:cover;
    background-repeat: no-repeat;
    opacity:${opacity};
    background-image:url('${imagePath}');
*   background-position: right bottom;
*   resize: both;
  }
  /*ext-${this.extName}-end*/
  `;
}

拡張機能を使わずに自分で書き換える場合

設定ファイルの場所

使用するOSごとに設定ファイルの場所を確認してください。

Windows
\Visual Studio Code\Resource\app\out\vs\workbench\workbench.desktop.main.css
macOS
\Visual Studio Code.app\Contents\Resource\app\out\vs\workbench\workbench.desktop.main.css
Linux
\Visual Studio Code\resources\app\out\vs\workbench\workbench.desktop.main.css

設定ファイルを書き換えます

最初にファイル"workbench.desktop.main.css" のバックアップをしましょう。
ファイルの末尾に以下の設定を追加しましょう。
画像の不透明度（opacity）は最初0.5くらいがオススメです。
background-imageで指定する画像の場所は、自分の環境に合わせて変更します。
- 以下の例では、Windowsの「Visual Stdio Code」フォルダー内に「images」フォルダーを作成し、画像を保存しています。
- 以下の例ではポータブル環境向けにフォルダーを指定しています。
```
/*backgroundCover-start*/
body{
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.5;
  background-image: url('../../../../../background-images/angel_wings.png');
  background-position: right bottom;
  resize: both;
}
/*backgroundCover-end*/
```