Variables

📜 Variables (Non-Modules)

In order to modify any Flashcord Variable, you must add this at the end of your QuickCSS, below is an example of how it should look like:

@import url("https://sirio-network.com/flashcord/sid.css");

:root {
    /* Insert your variables here. Here is a valid example (that you aren't supposed to modify lol): */
    --FlashCore-Splash_Text: "I edited the Splash Text, \A I'M INVINCIBLE NOW MUHAHAHA!";
}

Flashcord variables will always have their default value next to their respective name in the code blocks.

The distinction between Variables and Module Variables is very important, modules are "features" of Flashcord that can be disabled or enabled (example: Horizontal Server Bar); This wiki page is a compilation of every variable that doesn't touch Flashcord Modules.

If you want to modify Flashcord's Modules, then check out 🏗️ The Flashcord Configurator which lets you have a full list of every single Flashcord Module and lets you disable or switch to a different one.

🎯 Primary Variables

These variables drastically change the look and feel of Flashcord when modified.

🚦Animation Control

As the name implies, these variables control the speed of animations in Flashcord, please note that they're different from transitions, animations cannot be controlled by the user depending on what they're doing. An example of an animation is the fading in of certain elements.

:root {
    --Flashcord-Animation_Multiplier: 1;
    --Flashcord-Animation_XFast: calc(var(--Flashcord-Animation_Multiplier, 1) * 62.5ms);
    --Flashcord-Animation_Fast: calc(var(--Flashcord-Animation_Multiplier, 1) * 125ms);
    --Flashcord-Animation_Normal: calc(var(--Flashcord-Animation_Multiplier, 1) * 250ms);
    --Flashcord-Animation_Slow: calc(var(--Flashcord-Animation_Multiplier, 1) * 500ms);
    --Flashcord-Animation_XSlow: calc(var(--Flashcord-Animation_Multiplier, 1) * 1s);
    --Flashcord-Animation_XTSlow: calc(var(--Flashcord-Animation_Multiplier, 1) * 2s);
    --Flashcord-Animation_XTXSlow: calc(var(--Flashcord-Animation_Multiplier, 1) * 4s);
}

🚥 Transition Control

This is very similar to animations, except the elements affected are those who get modified if the user is doing something specific. An example of a transition is the user hovering the channel list, causing it to slide to reveal itself.

:root {
    --Flashcord-Animation_Multiplier: 1;
    --Flashcord-Transition_XFast: calc(var(--Flashcord-Transition_Multiplier, 1) * 62.5ms);
    --Flashcord-Transition_Fast: calc(var(--Flashcord-Transition_Multiplier, 1) * 125ms);
    --Flashcord-Transition_Normal: calc(var(--Flashcord-Transition_Multiplier, 1) * 250ms);
    --Flashcord-Transition_Slow: calc(var(--Flashcord-Transition_Multiplier, 1) * 500ms);
    --Flashcord-Transition_XSlow: calc(var(--Flashcord-Transition_Multiplier, 1) * 1s);
}

👓 Blur Control

These variables controls if you're blind or not. Okay maybe not unfortunately, Flashcord isn't a cure for vision problems (unfortunately). An example of where blur is used is when you are hovering on a focused image. Flashcord's blurs are a major performance issue on really low-end systems, disable them by setting each variable to 0.

:root {
    --Flashcord-Blur_Multiplier: 1;
    --Flashcord-Blur_Heavy: calc(var(--Flashcord-Blur_Multiplier, 1) * 16px);
    --Flashcord-Blur_Normal: calc(var(--Flashcord-Blur_Multiplier, 1) * 8px);
    --Flashcord-Blur_Light: calc(var(--Flashcord-Blur_Multiplier, 1) * 4px);
    --Flashcord-Blur_Feather: calc(var(--Flashcord-Blur_Multiplier, 1) * 2px);
}

💥 General Variables

Theses are random variables that still drastically changes Flashcord's looks:

:root {
    --Flashcord-Font_Primary: "Roboto"; /* This font is used everywhere else in Flashcord */
    --Flashcord-Font_Monospace: "Fixedsys Excelsior";

    --Flashcord-UI_Border-Radius: 25px; /* This controls globally how rounded elements are */

    /* If you are using the Chat_Notification-Static Module, you may change the following values to change the colors of the mention/unread circle. */
    --Flashcord-Channel_Notification-Mention_Color: rgba(255,0,0,0.5);
    --Flashcord-Channel_Notification-Unread_Color: rgba(0,0,255,0.5);

    /* If you are using the Guild_Notification-Static Module, you may change this variable to change the color of the unread server glow. */
    --Flashcord-Guild_Notification-Color: #0000FF;

    /* If you find the Server Unread Glow to be too small or big, you may change its size with this variable. */
    --Flashcord-Guild_Notification-Size: 4px;

    /* Every single embeded image, gif, video and etc. all have a slight shadow to help with visibility, you may change the size of the shadow here. */
    --Flashcord-Shadow_Size: 1px;
}

🎨 Color Variables

These variables are automatically used for their respective Light/Dark themes (For example, --Flashcord-Text_Dark controls all the text's color in Dark Themes such as Terminal Mode)

:root {
    --Flashcord-Text_Light: rgba(0,0,0,0.95);
    --Flashcord-Text_Dark: rgba(255,255,255,0.95);
    --Flashcord-Text_Legacy: #FF69FF;
    --Flashcord-Accent_Light: rgba(0,155,255,0.5);
    --Flashcord-Accent_Dark: rgba(255,55,0,0.5);
    --Flashcord-Accent_Light-Heavy: rgba(0,155,255,1);
    --Flashcord-Accent_Dark-Heavy: rgba(255,55,0,1);
    --Flashcord-Background_Light: rgba(255,255,255,0.9);
    --Flashcord-Background_Dark: rgba(0,0,0,0.9);
    --Flashcord-Solid-Background_Light: white;
    --Flashcord-Solid-Background_Dark: black;
    --Flashcord-4Chan-Background_Light: #fffeed;
    --Flashcord-4Chan-Background_Dark: #000118;

    --Flashcord-Floating_Light: rgba(255,255,255,0.5);
    --Flashcord-Floating_Dark: rgba(0,0,0,0.5);
    --Flashcord-Heavy-Floating_Light: rgba(255,255,255,0.8);
    --Flashcord-Heavy-Floating_Dark: rgba(0,0,0,0.8);
}

🌅 Theme Specific Variables

These variables are responsable for modifying specific elements of the advanced Flashcord themes such as Custom Background Mode, Iridescent Light/Dark Mode (also called Bloat Mode) and Transparent Mode.

🖼️ Custom Background Mode

The Custom Background Mode is an advanced theme that lets you choose any background image you want, the following variables lets you change the image and also edit how blurry and dark it is. To edit the default background and the filter you must add this at the end of your QuickCSS:

:root {
    /* Replace the URL with the URL of your image, the URL must be in quotes. Below is the default value.
    Any image that can be opened in a web browser should work, this means that yes, GIFs and animated PNG/WEBP will work. */
    --Flashcord-Image_CBM-Light: url("https://sirio-network.com/flashcord/ressources/backgrounds/bgr-test.jpg");
    --Flashcord-Image_CBM-Dark: url("https://sirio-network.com/flashcord/ressources/backgrounds/hypernner.jpg");

    /* By default, the brightness value is 0.5 which is half as bright. Feel free to edit the brightness and blur values. */
    --Flashcord-Filter_CBM-Light: blur(8px) brightness(1);
    --Flashcord-Filter_CBM-Dark: blur(16px) brightness(0.5);
}

🌈 Iridescent Mode (ThemeHooker) [⚠️ HIGH-END SYSTEMS ONLY]

If your computer is worthy, then you may customize Iridescent Mode, the most unforgiving theme performance wise of Flashcord. It will also be unforgiving to your brain because it has a lot of variables.

:root {
    /* These variables control what animation and its duration it should use for the Background Sliding */
    --Flashcord-Background-Animation_Iridescent-Light: SNDL-Background_MvX;
    --Flashcord-Background-Animation_Iridescent-Dark: SNDL-Background_MvX;
    --Flashcord-Background-Animation-Duration_Iridescent-Light: 2s;
    --Flashcord-Background-Animation-Duration_Iridescent-Dark: 2s;

    /* These variables control what animation and its duration it should use for the Rainbow Effect */
    --Flashcord-Rainbow-Animation_Iridescent-Light: Flashcord-Iridescent_Light;
    --Flashcord-Rainbow-Animation_Iridescent-Dark: Flashcord-Iridescent_Dark;
    --Flashcord-Rainbow-Animation-Duration_Iridescent-Light: 2s;
    --Flashcord-Rainbow-Animation-Duration_Iridescent-Dark: 2s;

    /* These variables control how strong the blurring and brightness effect on the background is */
    --Flashcord-Filter_Iridescent-Light: blur(4px) brightness(1);
    --Flashcord-Filter_Iridescent-Dark: blur(4px) brightness(0.5);

    /* Controls the size of the background image, if you're using Iridescent Mode like a fancier CBM mode, then change these to "cover" to fit your image better. */
    --Flashcord-Image-Size_Iridescent-Light: 100vw;
    --Flashcord-Image-Size_Iridescent-Dark: 100vw;

    /* These variables set the background image, it works exactly the same as CBM mode. */
    --Flashcord-Image_Iridescent-Light: url("https://sirio-network.com/sbin/PSWave-Iridescent_Light.png");
    --Flashcord-Image_Iridescent-Dark: url("https://sirio-network.com/sbin/PSWave-Iridescent_Dark.png");

    /* These variables set the background image used in the "Control Panel". */
    --Flashcord-Image-Control_Iridescent-Light: url("https://sirio-network.com/flashcord/ressources/backgrounds/BasicGrid-White_Fast.gif");
    --Flashcord-Image-Control_Iridescent-Dark: url("https://sirio-network.com/flashcord/ressources/backgrounds/BasicGrid-Dark_Fast.gif");
}

Next Step: 🏗️ Flashcord Modules, or if you're in a hurry: 🤷 Broken Friends Tab