/pios-discord-theme

A SUPERHOT piOS inspired Discord theme.

Primary LanguageSCSSGNU General Public License v3.0GPL-3.0

piOS Discord Theme

Buy me a coffee on ko-fi BetterDiscord GitHub downloads Replugged downloads Total size

A SUPERHOT piOS inspired Discord theme.

Dark mode Light mode
piOS dark mode applied to Discord piOS light mode applied to Discord

Installation

BetterDiscord

  1. Install BetterDiscord.
  2. Download the theme file:
  3. Place theme file in the themes folder:
    • Windows: %AppData%/BetterDiscord/themes
    • Mac: ~/Library/Application Support/betterdiscord/themes
    • Linux: ~/.config/BetterDiscord/themes

Replugged

  1. Install Replugged.
  2. Install the theme:

Vencord

  1. Install Vencord.
  2. Paste the following in Settings > Vencord > Themes:
    • https://saltssaumure.github.io/pios-discord-theme/piOS.theme.css

Customisation

  • Discord setting: Settings > App Settings > Appearance > Message Display.
Cosy mode Compact mode
Cosy mode Compact mode
Description Variable name Valid values Default value Demonstration
Glow hue --pios-glow-hue A number between 0 and 1. 1 (maximum brightness)
Glow intensity --pios-glow-intensity A number between 0 and 1. 1 (maximum brightness) 1 chat, icon / 0 chat, icon
Compact message spacing --pios-spacing A number 0 or above. 1 (default spacing) 1 spacing / 2.5 spacing
Colour accent hue --pios-accent-hue Any number. 0 (red) 270 (purple) colour picker, screenshot
Title bar text --pios-title-text Any quoted text. "piOS v2.1.01p" Screenshot
Scanline stripes on/off --crt-stripe block (on) or none (off). block Screenshot
⛐ Moving scanline on/off --crt-scanline block (on) or none (off). block Video
⚠ Screen flicker on/off --crt-flicker flicker (on) or none (off). none
Background colour --pios-background-color Any colour. #000000 (dark) / #FFFFFF (light)
Bright foreground colour --pios-bright-color Any colour. #FFFFFF (dark) / #000000 (light)
Middle foreground colour --pios-middle-color Any colour. #D3D3D3 (dark) / #696969 (light)
Dim foreground colour --pios-dim-color Any colour. #808080 (dark) / #A9A9A9 (light)
  • ⛐ This effect is performance-intensive.
  • ⚠ This is a fast flickering effect and may not be suitable for those with photosensitive epilepsy.

BetterDiscord

  1. Open Settings > BetterDiscord > Themes.
  2. Click the pencil icon on this theme.
  3. Edit the variable values and save changes.

Replugged

  1. Open Settings > Replugged > Quick CSS.
  2. Copy and paste lines 15-40 of piOS.theme.css.
  3. Edit the variable values and apply changes.

Vencord

Standard method

  1. Follow the instructions in Settings > Vencord > Themes.

Recommended method

  1. Open Settings > Vencord > Vencord.
  2. Toggle on Enable Custom CSS and click Open QuickCSS File.
  3. Copy and paste lines 15-40 of piOS.theme.css.
  4. Edit the variable values.

License

GNU General Public License v3.0

  • TL;DR;NAL: Do whatever you want with this theme, as long as you allow others to do the same with your version.

Questions or suggestions?