Hyblocker's Theme Helper

A simple plugin which exposes a few things to CSS so that themes can do cool stuff they couldn't do before. That's literally it; its nothing special because it doesn't have to be :D

Installation

Powercord

Clone to plugins directory using

git clone https://github.com/hyblocker/discord-theme-helper.git

BetterDiscord

Download the HyblockerThemeHelper.plugin.js file and drop it into your plugins folder.

Feature parity

Feature	Powercord	BetterDiscord
mouse position	✔	✔
mouse click position	✔	✔
user banner (Friends list)	✔	❌
user accent color (Friends list)	✔	❌

Usage (for theme developers)

Add the following to your CSS (for default values)

:root {
    /* live mouse position, useful for effects like reveal from microsoft's fluent design */
    --mouseX: 0px;
    --mouseY: 0px;
    /* mouse position during a click, stays in the same place until the mouse is released */
    --clickX: 0px;
    --clickY: 0px;
}

Then use the --mouseX and --mouseY CSS variables in your theme to access the mouse position.

Mouse position is relative to the element.

More documentation

For available CSS variables read Variables.md For new attributes which get added to the DOM read Attributes.md

Themes using this plugin

Pixelcord by Hyblocker :: Purely CSS based ripple Friends Grid by CorellanStoma :: User banners and profile colors

NB: Open an issue / PR to add your theme here!