Expanding Pocillo

Themes
1

Working on theming a lot of stuff to match Pocillo, posting below

2

Visual Studio Code

Visual Studio Code is a famous code editor used by many of us by Microsoft. I’ve themed Pocillo for it, but don’t have a DevOps account so I’m not making this an installable extension.

Instead, install it manually. First, choose a viable colorscheme. “Dracula.min” works the best with pocillo VSC instead of the default: https://marketplace.visualstudio.com/items?itemName=ashrafhadden.dracula-dot-min. After this, open your settings.json file. To do so, open preferences (Ctrl Comma), then click the {} icon on the top, or image if you have a newer version (click WHILE IN THE PREFERENCES TAB). You should have a file looking something like:

{
    // Some stuff here
}

Change it to

{
 // some stuff here
"workbench.colorCustomizations": {
        "window.activeBorder": "#22252D",
        "window.inactiveBorder": "#313642",
        "dropdown.background": "#22252D",
        "selection.background": "#22252D",
        "editor.background": "#22252D",
        "panel.background": "#22252D",
        "panelInput.border": "#22252D",
        "terminal.background": "#22252D",
        "terminal.border": "#22252D",
        "terminal.foreground": "#d3dfee",
        "terminalCursor.foreground": "#508Ed3",
        "terminal.ansiBlue": "#508Ed3",
        "terminal.ansiBlack": "#22252D",
        "terminal.ansiCyan": "#41e0ee",
        "terminal.ansiGreen": "#75f060",
        "terminal.ansiMagneta": "#a243d1",
        "activityBar.background": "#22252D",
        "activityBar.foreground": "#dbe4ff",
        "activityBar.inactiveForeground": "#8e94a7",
        "activityBarBadge.background": "#508Ed3",
        "statusBar.background": "#22252D",
        "editorPane.background": "#22252D",
        "tab.activeBackground": "#22252D",
        "tab.inactiveBackground": "#22252D",
        "tab.activeForeground": "#d6eaff",
        "tab.inactiveForeground": "#8693a1",
        "tab.activeBorder": "#508Ed3",
        "editorGroup.emptyBackground": "#22252D",
        "editorGroupHeader.tabsBackground": "#22252D",
        "editorLineNumber.foreground": "#508Ed3",
        "button.background": "#22252D",
        "sideBar.background": "#22252D",
        "sideBar.foreground": "#d4e5f8",
        "breadcrumb.background": "#22252D"
    }
}

Which should be enough to achieve this result, assuming you’re using Pocillo and the Global Menu (and my new favorite font, jetbrains mono):

image
image1919×1199 560 KB

3

Discord theme

This is not allowed by the Discord ToS, however it’s still awesome and thousands of users use modded themes, so :man_shrugging:. Get a CSS applier like BetterDiscord or BeautifulDiscord, and add this CSS:

/**
 * @name DiscPocillo
 * @author codic#3754
 * @version 1.0.0
 * @description Pocillo theme for Discord
*/

@import url("https://gibbu.github.io/BetterDiscord-Themes/FrostedGlass/base.css");
@import url('https://monstrousdev.github.io/themes/addons/user-tags.css');
@import url('https://fonts.googleapis.com/css?family=Product+Sans:300,400,500,600,700,800,900&display=swap');
 
/* Old Windows titlebar - remove this @import if you wish to use default titlebar */
@import url("https://gibbu.github.io/BetterDiscord-Themes/addons/windows-titlebar.css");



:root {
--BG-image: url('https://i.imgur.com/ltL6GQa.png');
--BG-image-blur: 0px;
--BG-serverlist-brightness: 0;
--BG-left-brightness: 0;
--BG-right-brightness: 0;
--BG-popout-brightness: 0;
--BG-tint-colour: 255, 51, 159;
--BG-tint-brightness: 0;
--BG-gradient-one: 76,143,214;
--BG-gradient-two: 76,143,214;
--BG-gradient-direction: -150deg;
--BG-window-padding: 0px;
--BG-window-roundness: 3px;
--BG-left-right-split: 0;
--BG-font: 'Product Sans';
}

The font this uses is Product Sans, which is only for personal use. If you want Noto Sans, change it to Noto Sans in the second to last line. Then replace

@import url('https://fonts.googleapis.com/css?family=Product+Sans:300,400,500,600,700,800,900&display=swap');

With

@import url('https://fonts.googleapis.com/css?family=Noto+Sans:300,400,500,600,700,800,900&display=swap');

With product sans, here’s how it looks:

image
image1918×1199 595 KB

With Noto Sans:

image
image1919×1199 660 KB

Remove the second to last line completely to use Discord’s default font

4

@fossfreedom is it fine if some of these become part of Pocillo officially?
I will also make standalone themes for terminal emulators like Tilix (so users can use another GTK theme but use the Pocillo colorscheme)

5

Sure. How would people know and apply these “extensions/addons” ? Would they be shipped in each of the 6 pocillo theme variants?

6

Hmmm…
for the ones I have, slim variants would be useless. I could make light variants for them, though :stuck_out_tongue:
would only require some changes. Not sure how they’d be distributed