LoginSignup
5
4

More than 3 years have passed since last update.

VScode初心者による背景模様替え

Last updated at Posted at 2019-03-21

前提

VScode全くの初心者が萌え背景を挿入した時の備忘録

使用した拡張機能

1.background
background

2.background-cover
background-cover

Code例

実際に設定したsettings.jsonを以下に記します。
最初背景のカラーを青系に統一して、
後半の文で萌え背景を投入しました

{
    "python.pythonPath": "C:\\Users\\ken\\Anaconda3\\pythonw.exe",
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
    "workbench.colorCustomizations": {
        "editor.background": "#14065083",
        "editor.foreground": "#dadae0",
        "editorGroup.border": "#e8e8f0",
        "editorLineNumber.foreground": "#6e6a6a",
        "editor.selectionBackground": "#1809ec",
        "errorForeground": "#f7f1f1",
        "editorCursor.background":"#333333"
        "editor.wordHighlightBackground":"#3abdce33"
        "editor.lineHighlightBackground":"#3abdce33"

        "input.background": "#08487c",
        "input.foreground":"#e4d7d7"
        "input.border": "#1d1847",
        "input.placeholderForeground": "#e4d7d7",

        "scrollbarSlider.background": "#5c5858",
        "scrollbarSlider.hoverBackground": "#302727",
        "scrollbar.shadow":"#0f044183"
        "scrollbarSlider.activeBackground":"#333333"

        "activityBar.background":"#0f044183",
        "activityBar.foreground": "#56e1fa",
        "activityBar.border": "#352f2f",

        "sideBar.background": "#14065083",
        "sideBar.foreground": "#e4d7d7", 
        "sideBar.border": "#352f2f", 
        "sideBarTitle.foreground": "#a39c9c",

        "editorGroupHeader.tabsBackground": "#14065083",
        "tab.activeBackground": "#14065083",
        "tab.activeForeground": "#e4d7d7",
        "tab.border": "#352f2f", 
        "tab.activeBorder": "#352f2f",
        "tab.inactiveBackground": "#14065083", 
        "tab.inactiveForeground": "#e4d7d7",
    }


    "backgroundCover.enabled": true , //一時的に非表示したい場合にfalseにする
    "backgroundCover.opacity": 0.3, //デフォの0.5だと薄暗い
    "backgroundCover.randomImageFolder": "C:/Users/"ユーザ名"/Desktop/Pictures/Favorite/",

    "background.enabled": true,

    "background.style": {
        "background-position": "100% 100%",
        "background-repeat": "no-repeat"
    },

    "background.useDefault": true,

    "background.customImages":["C:/Users/"ユーザ名"/Desktop/Pictures/Favorite/Haruhi_s.jpg"] 


}

結果

background_VScode.png

背景色を濃紺とし、background_coverで背景をハルヒにできました。
しかし、backgroundがデフォルトのままで変わっていません。
設定のExtensionにもうまく表示されていません。

Extensions_vs.png

今後

VScodeの初期設定はこの辺にしてPythonなど弄っていこうと思います。
NW屋なのでパブリッククラウドにも手を出したいですが。。

5
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4