GitPod.io Content Support

[serenafangirl]

how do I do it on gitpod.io?

[serenafangirl]

btw im on chromebook

[Unthrottled]

Looks like it is available in the extension marketplace.

https://user-images.githubusercontent.com/15972415/136630306-bb6cdd57-976f-466c-a06e-594422481ff9.mp4

However, looks like installing content doesn't work, so that may need to be looked into.

[justalemon]

Shouldn't this be on the doki-theme-vscode repo?

[SakuraKitsunee]

i have the same issue the sticker and wallpaper will not showup im trying to use Sakurajima Mai dark theme for both

[SakuraKitsunee]

sticker and wallapaper

[Unthrottled]

@SakuraKitsunee Will close this issue once the problem is solved.

[SakuraKitsunee]

oh okay!

[SakuraKitsunee]

how is the progress going with this topic?

[Unthrottled]

I haven't looked into what it might take yet, but I might have some time to take a peek over my extended weekend. I just got to be able to find where gitpod's vscode's css is hiding.

[SakuraKitsunee]

oh ok, thanks for the update!

[Unthrottled]

@SakuraKitsunee

I was able to fix it locally (I ran a gitpod vscode server container, and installed assets), and it worked!

Unfortunately, I tried to do the same in the real gitpod, and it didn't work.... I don't think the process has access to write changes to the vscode server installation.

I won't leave you empty handed though. Where there is a will there is a way. The color scheme still works, we just need assets.

Steps to get assets:

1. Install Stylus browser extension
2. Write a new style using this css
   Assets CSS

/* ==UserStyle==
@name           Empty @name replaces the default template - 12/30/2021, 3:41:42 PM
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    A new userstyle
@author         Me
==/UserStyle== */
@-moz-document domain("gitpod.io") {

    /** START BACKGROUND STUFF **/
    [id="workbench.parts.editor"] .split-view-view .editor-container .editor-instance > .monaco-editor .overflow-guard > .monaco-scrollable-element > .monaco-editor-background {
        background: none;
    }

    [id="workbench.parts.editor"] .split-view-view .editor-container .editor-instance > .monaco-editor .overflow-guard > .monaco-scrollable-element::before,
    .overflow-guard,
    .tab,
    /* settings UI */
    .settings-editor > .settings-body .settings-toc-container,
    /* end settings UI */
    .tabs-container,
    .monaco-pane-view,
    .composite.title,
    /* welcome window */
    .editor-container,
    button.getting-started-category,
    /* end welcome window */
    div.header,
    /* extensions header */
    .content,
    .monaco-select-box,
    .pane-header,
    .minimap-decorations-layer,
    .xterm-cursor-layer,
    .decorationsOverviewRuler,
    .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-breadcrumbs .breadcrumbs-control,
    .ref-tree,
    /* find usages */
    .head,
    /* find usages */
    .monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions,
    .welcomePageFocusElement,
    /* welcome screen */
    .terminal-outer-container/* Terminal outer edge */
    {
        background-image: url('https://doki.assets.unthrottled.io/backgrounds/wallpapers/transparent/essex_dark.png') !important;
        background-position: right !important;
        background-attachment: fixed !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
    }

    /*settings UI */
    .monaco-list.list_id_1 .monaco-list-rows,
    /* source control diff editor */
    .lines-content.monaco-editor-background,
    /* output panel */
    .overflow-guard > .margin,
    .overflow-guard > .margin > .margin-view-overlays,
    .monaco-workbench .part.panel > .content .monaco-editor .monaco-editor-background,
    /* debugger panel */
    [id="workbench.panel.repl"] * {
        background-color: transparent !important;
    }

    .quick-input-widget {
        backdrop-filter: blur(5px) !important;
    }

    .monaco-breadcrumbs {
        background-color: #00000000 !important;
    }

    [id="workbench.view.explorer"] .monaco-list-rows,
    [id="workbench.view.explorer"] .pane-header,
    [id="workbench.view.explorer"] .monaco-pane-view,
    [id="workbench.view.explorer"] .split-view-view,
    [id="workbench.view.explorer"] .monaco-tl-twistie,
    [id="workbench.view.explorer"] .monaco-icon-label-container,
    .explorer-folders-view > .monaco-list > .monaco-scrollable-element > .monaco-list-rows,
    .show-file-icons > .monaco-list > .monaco-scrollable-element > .monaco-list-rows,
    .extensions-list > .monaco-list > .monaco-scrollable-element > .monaco-list-rows,
    /* Welcome Page */
    .monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories > .gettingStartedCategoriesContainer > .header,
    .monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideCategories .getting-started-category/* end welcome page */
    {
        background-color: #00000000 !important;
        background-image: none !important;
        border: none !important;
    }

    .monaco-icon-label-container {
        background: none !important;
    }

    .monaco-workbench .part.editor > .content {
        background-image: url('https://doki.assets.unthrottled.io/backgrounds/wallpapers/transparent/essex_dark.png') !important;
        background-position: right;
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-size: cover;
        content: '';
        z-index: 9001;
        width: 100%;
        height: 100%;
        opacity: 1;
    }
    /** END BACKGROUND STUFF **/
    /** START STICKER STUFF **/
    body > .monaco-workbench > .monaco-grid-view > .monaco-grid-branch-node > .monaco-split-view2 > .split-view-container::after,
    body > .monaco-workbench > .monaco-grid-view > .monaco-grid-branch-node > .monaco-split-view2 > .monaco-scrollable-element > .split-view-container::after {
        background-image: url('https://doki.assets.unthrottled.io/stickers/vscode/azurLane/essex/dark/essex_dark.png');
        content: '';
        pointer-events: none;
        position: absolute;
        z-index: 9001;
        width: 100%;
        height: 100%;
        background-position: 100% 97%;
        background-repeat: no-repeat;
        opacity: 1;
    }

    /* Makes sure notification shows on top of sticker */
    .notifications-toasts {
        z-index: 9002 !important;
    }

    /* glass pane to show sticker */
    .notification-toast {
        backdrop-filter: blur(2px) !important;
    }
}

3. Update the URLs to the assets you want to use, feel free to use my cdn (you can find all assets here, or you can use your own so you can have your own custom images .
4. Apply the custom style
5. ???
6. Profit!

https://user-images.githubusercontent.com/15972415/147790900-ffe93698-2772-4013-931d-72cdbb2cae76.mp4

I'll add some documentation to a new release, that detects when it cannot write, and point to some instructions like this that can be used as a work around.