Making your own Color Schemes

Diskette is a theme made by vozy (SlippingGitty) based on notheme.

We recommend using quickcss from your favorite discord mod to edit the css inside the codeblocks here.

Making your own Color Scheme

/* Background Colors */
:root {
  --projectCabBackground: rgb(0, 0, 0);
  --projectCabBackground2: var(--projectCabBackground);
  --projectCabTextBackground: var(--projectCabBackground);
  --projectCabTitleBar: var(--projectCabBackground);
  --projectCabHover: var(--accent-focused);
}

/* Accents */
:root {
  --accent: rgb(0, 255, 221);
  --accent-hover: rgb(124, 124, 124, 0.977);
  --accent-selected: rgb(49, 49, 49);
  --accent-focused: rgb(49, 49, 49);
  --borders: rgb(200, 65, 200) 1px solid;
  --bordersH: rgb(255, 85, 255);
  --bordersW: rgb(200, 65, 200);
}

Each one of these variables controls different elements in this theme. These variables are separated and commented into two categories, that being "Background Colors", and "Accents".

• Background Colors control the background

• Accent colors control the colors of icons, borders, and selected and hovered elements.

In this CSS code block above, we have some of our variables being aliased into other variables.

This means that when we change the color for --projectCabBackground, we are changing the colors of all the variables to that same color as well.

Here is what the above code block gives us.

Let's go back to the text block.

You can change the top variable --projectCabBackground to whatever you like, like so:

and it'll end up like this

Now lets change some of the accent variables.

• --accent controls the accent color.

• respectively, the rest of --accent- variables speak for themselves

• --borders controls the border colors, and --bordersH controls the color of the borders when hovered over.

Here's what our theme looks like now

Window Borders

This is something that users are allowed to enable on their own ends from the Diskette.theme.css file, regardless if this is something your Color Scheme includes or not.

Right now, this feature is available only for clients that feature the "Windows Title Bar", e.g. official client on Windows, Vesktop on Linux

If your Color Scheme supports this, you'll get a result like this

Color Schemes with this border will have the --bordersW variable in their .css file, typically organized under /* Accents */.

• --bordersW variable must have a color (HEX/RGBA/"color").
• border: must include var(--bordersW), followed by the border type and how thick it is.
  • in example:

/* Accents */
:root {
  --accent: rgb(0, 255, 221);
  --accent-hover: rgba(8, 0, 56, 0.977);
  --accent-selected: rgb(18, 0, 83);
  --accent-focused: rgb(29, 0, 46);
  --borders: rgb(200, 65, 200) 1px solid;
  --bordersH: rgb(255, 85, 255);
  --bordersW: rgba(200, 65, 200); 
}

/* Window Border for Windows */
.platform-win body::before {
  border: var(--bordersW) 2px solid;
  border-radius: 1px;

/* The following can generally be ignored, feel free to play with this if you want.
 This basically just keeps the border where it should be. */
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 9999;
  visibility: var(--showBorder, visible);
}

How to change the text colors?

use the following variables

/* replace "red" with your desired color */
.theme-dark {
    --text-normal: red;
    --text-muted: red;
    --interactive-active: red;
    --interactive-hover: red;
    --interactive-muted: red;
    --interactive-normal: red;
    --header-primary: red;
    --header-secondary: red;
    --channels-default: red;
    --channel-icon: red;
    --input-placeholder-text: red;
    --channel-text-area-placeholder: red;
}