nexpid / BunnyPlugins

A collection of all my awesome plugins for Bunny
https://bunny.nexpid.xyz/
Creative Commons Attribution 4.0 International
145 stars 16 forks source link

[Themes+] CSS-like theming #74

Closed nexpid closed 2 months ago

nexpid commented 6 months ago

why?

Why not

Would add support for BetterDiscord-like themes. Something like this

/**
 * @name Catppuccin Mocha
 * @description Soothing pastel theme for the high-spirited!
 * @author Catppuccin, nexpid <@853550207039832084>
 * @spec 2
*/

:root {
    /** - normal semantic color/raw color changing */
    --background-primary: #ababab;
    --primary-500: #696969;

    /** - custom variables */
    --chat-icon: url("https://cdn.nexpid.xyz/fumo.png");

    /** - user configurable variables maybe?? */

    /** @label Chat icon size */
    --chat-icon-size: 100%, min(50%), max(200%);
    /** - first argument is the default value, min() defines the min value, max() defines the max value */

    /** @label Custom chat icon enabled */
    --chat-icon-enabled: false;
}

/** - crazy! */
:root.dark {
    --background-primary: #000;
    --primary-500: #000;
}

/** - custom element styling woah!! */
View[ariaLabel="Direct messages"]:nth-child(1) {
    /** - to use if conditions, simply: CONDITION, IF, ELSE */
    source: var(--chat-icon-enabled), var(--chat-icon);
    tintColor: #f00;
    width: var(--chat-icon-size);
}

/** - use i18n!! */
Pressable[ariaLabel="{i18n-SEND_MESSAGE}"] {
    opacity: 0.5
}

this would require a SHIT ton of docs for because of how big css is