Custom Design VSCode

VSCode là gì ?

VSCode là viết tắt của Visual Studio Code là một ứng dụng được sử dụng để biên tập, viết mã lập trình website. VSCode hổ trợ hầu hết các ngôn ngữ lập trình hiện đại như HTML, CSS, Javascript, PHP.

Custom Design cho VSCode

VSCode nỗi bật với kho theme design vô cùng phong phú, nổi bật trong số đó là extension theme Dracula. Tuy nhiên với các theme có sẳng sẽ khó lòng đáp ứng được một trăm phần trăm thẩm mỹ của mỗi người. Vì vậy trong bài viết này mình sẽ hướng dẫn mọi người custom theme design của VSCode chỉ bằng một vài dòng code CSS.

Đầu tiên ta cần cài đặt và sử dụng extension Dracula, Dracula sẽ giúp chúng ta custom design sẳng sau đó ta chỉ việc sửa lại những thành phần mà ta chưa thích.

Sau khi cài đặt song, ta tiến hành cài đặt thêm một extenstion thứ hai đó là Custom CSS and JS Loaded. Đây là một extenstion cho phép chúng ta custom lại bất cứ thành phần nào trong VSCode mà ta muốn.

Sau khi tải song. Click vào biểu tượng bánh răng để vào setting.

Nhấn vào biểu tượng file để mở setting.json.

Tạo ra một file custom.css và dán đoạn code sau vào cuối file setting với đường link của file custom.css.

Trong file custom.css hãy dán đoạn CSS đã được custom sau vào.

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.active.tab-border-top>.tab-border-top-container {
        background-image: linear-gradient(to right, #11998F, #D13ABD, #EFBD8A);
        height: 3px;
    }
    .mtk10 {
        background-image: linear-gradient(45deg, #FF61D2, #FE908F);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: 700;
    }
    .mtk5 {
        background-image: linear-gradient(45deg, #11998F, #38EF7D);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-weight: 700;
    }
    .mtk8 {
        color: #EFDF62;
    }
    .monaco-list.list_id_1 .monaco-list-rows,
    .monaco-pane-view .pane>.pane-body,
    .monaco-breadcrumbs{
        background-color: #1e1f30!important;
    }
    .monaco-editor .margin,
    .monaco-list.list_id_5 .monaco-list-rows,
    .monaco-editor, .monaco-editor-background {
        background-color: #222438!important;
    }
    .mtk11 {
        color: #e9f284;
    }
    .monaco-workbench .part.editor>.content .editor-group-container>.title,
    .monaco-workbench .part.activitybar,
    .monaco-workbench .part>.composite.title,
    .monaco-pane-view .pane>.pane-header{
        background-color: #171825!important;
    }
    .monaco-workbench .part.titlebar{
        background-color: #0f0f18!important;
    }
    .monaco-editor .detected-link, .monaco-editor .detected-link-active {
        text-decoration: none;
        border-bottom: 4px dashed #EFDF62;
    }
    .mtk9 {
        background-image: linear-gradient(45deg, #05cdf7, #aeeffd);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }

Sau cùng nhấn tổ hợp phím "CTrl + Shift + P", tìm từ khóa "Enable Custom CSS and JS" và restart để tiến hành cập nhật CSS trong file custom vào hệ thông theme của VSCode.

Nếu bạn muốn tìm hiểu chuyên xâu hơn cách custom Design trong VSCode hãy thử xem video bên dưới, nó sẽ giải thích và giúp ích cho bạn.

Video hướng dẩn chi tiết cách custom design VSCode

Xem nhiều hơn tại kênh youtube Lùn Dev

VSCode là gì ?

Custom Design cho VSCode

Video hướng dẩn chi tiết cách custom design VSCode

Thank You

Contact Form