 日本語の説明
/
 中文的解释
( The translation was done using DeepL)
⧉ Contents
⧉ Installation
- Open the Extensions sidebar in VS Code.
Next, search for the "
Kindfeeling" theme.
 icon for expansions
- Click Install.
- Open the Extensions sidebar in VS Code.
 icon for manage
- Select Color Theme and choose a "
Kindfeeling".
- Enjoy ! 😊
⧉ Personalization
Font
Extensions needed to get the same look
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)
We recommend adjusting the opacity from 0.5 at first.
Customize the "Background-cover".
Rewrite "FileDom.js" and set the image display standard to the lower right.
File location : ~\.vscode/extensions\manasxx.background-cover-2.2.3\out\FileDom.js.
See here for the location of the file.
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
Please backup "workbench.desktop.main.css" first.
Add code to the end of the file.
We recommend adjusting the opacity from 0.5 at first.
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
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
𝐌𝐈𝐓 𝐋𝐢𝐜𝐞𝐧𝐬𝐞
©
𝓐𝓻𝓸𝓶𝓪𝓽𝓲𝓫𝓾𝓼
| |
