日本語の説明 / 中文的解释 (The translation was done using DeepL)

⧉ Contents

• ⧉ Contents
• ⧉ Installation
• ⧉ Personalization
  • Font
  • Extensions needed to get the same look
    • Recommended settings
    • Tips Recommended settings
  • About the background of the screenshot (No support)
    • The extension "Background-cover" is used
    • Rewrite directly by yourself
      • Settings File Locations
      • About rewriting contents
• ⧉ Creating the theme
  • 🕮 闇って優しい感じなの？(Is the darkness kind feeling?)
• ⧉ License

⧉ Installation

1. Open the Extensions sidebar in VS Code.
   Next, search for the "Kindfeeling" theme.
   icon for expansions
2. Click Install.
3. Open the Extensions sidebar in VS Code.
   icon for manage
4. Select Color Theme and choose a "Kindfeeling".
5. Enjoy ! 😊

⧉ Personalization

Font

• Introducing 源ノ角ゴシック Source Han Code JP
• GitHub adobe-fonts/source-han-code-jp
• 🗛 Download directly Fonts version 2.011R(OTF, OTC)

Extensions needed to get the same look

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

Recommended settings

• Add or change VS Code settings.

  {
    "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,
  }

Tips Recommended settings

• It is convenient to create a .vscode folder in the root folder of each project and add the code in the settings.json file.

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

• How to specify a terminal as Bash and open it in the same folder as the source.
  Please adjust the location of the bash.exe to your environment.

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

About the background of the screenshot (No support)

• Images used for screenshots are stored in the images folder.

The extension "Background-cover" is used

1. We recommend adjusting the opacity from 0.5 at first.

2. Customize the "Background-cover".

3. Rewrite "FileDom.js" and set the image display standard to the lower right.

4. File location : ~\.vscode/extensions\manasxx.background-cover-2.2.3\out\FileDom.js.

5. See here for the location of the file.

6. About rewriting contents. Add the lines marked with "*(asterisk)".

   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*/
     `;
   }

Rewrite directly by yourself

Settings File Locations

Depending on your platform, the settings file is located here:

• 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

About rewriting contents

1. Please backup "workbench.desktop.main.css" first.

2. Add code to the end of the file.

3. We recommend adjusting the opacity from 0.5 at first.

4. Change the image and location specified in "background-image" according to your environment.

   • In the following example, the "images" folder is created in the "Visual Studio Code" folder on Windows, and images are saved.

   • Useful for portable environments.

   /*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*/

⧉ Creating the theme

🕮 闇って優しい感じなの？(Is the darkness kind feeling?)

The text is in Japanese.

Let me just introduce the conclusion.
It's better to use a warm color light theme with the same brightness of the screen as the room or as dark as possible.

⧉ License

𝐌𝐈𝐓 𝐋𝐢𝐜𝐞𝐧𝐬𝐞 © 𝓐𝓻𝓸𝓶𝓪𝓽𝓲𝓫𝓾𝓼