Skip to content

A Discord Theme inspired by macOS & Human Interface Guidelines.

License

Notifications You must be signed in to change notification settings

Brycero/surCord

 
 

Repository files navigation

surCord

Brycero fork

A fork of surCord with a darker theme, orange accent color and Horizontal Server Switcher.

screenshot

Usage

Vencord and BetterDiscord users can paste the raw file link https://git.brycero.com/surCord/surCord.theme.css into their themes settings. Alternatively, you can copy the contents of the surCord.theme.css file and paste it into your quick CSS settings.

Notes

  • Intended for use in the Windows client through Vencord.
  • Not tested on any other Discord client mods, your mileage will vary.
  • Not tested on macOS. Feel free to contribute any necessary changes.
  • No Vencord web support as of yet. I plan to update the surCord.user.css file with the necessary changes in the near future.

The original surCord readme is as follows:

How to use

Discord App

  • BetterDiscord, Vencord, and Openasar users can grab the surCord.theme.css file and either
    • Place the file in the BetterDiscord themes folder
    • Follow the instructions on Vencord's themes tab
    • Copy the text in the file, and paste it in Openasar's quick CSS text field
  • Replugged users can
    • Open a terminal in the themes folder and type git clone https://github.com/SlippingGittys-Discord-Themes/surCord

Browser

Translucenty (Addon offically maintained on macOS only)

Information on enabling translucency

Check out this issue if you use Windows. Mica for Everyone is known to play decently, but be very spotty.

Albeit not out of the box, (and very much intentionally so), this theme supports translucency in some areas.

image

You can achieve the same look on Vencord/macOS by doing as follows:

  • Go to Settings > Vencord, then toggle "Enable Translucent Window".

image

  • Assuming that the entire surCord.theme.css contents are in QuickCSS:
    • Paste @import url('https://slippinggittys-discord-Themes.github.io/surCord/src/fixations/additions/translucency.css'); underneath the source @import, as demonstrated so bellow

image

Extra info

  • You can adjust the oppacity and colors by pasting & messing with these varriables
.theme-dark {
 --background-tertiary: #2f31364b;
}

.theme-light {
 --background-tertiary: #ffffff1d;
}

Extra info

Information about accents, themes, emoji, fonts, and more!
  • You can very easily change the accent and theme color for surCord by navigating to /src/_theming.scss and uncommenting >>>one<<< of the accent colors and one of the background colors.

    BD and Stylus can uncomment these in surCord.theme.css / surCord.user.css

  • You can set surCord to use Apple's Emoji font

    • Navigate to /src/_modules.scss and uncomment @import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/EmojiReplace/base/Apple.css);
  • You can uncomment font-weight: bold !important; in your respective font sections
    to use San Fransisco Display Bold. (Or specify your own weight, 100-900; bold = 700)

    • BD: surCord.theme.css
    • Replugged/Powercord: /src/_font.scss
    • Stylus: surCord.user.css
  • Stylus users on Firefox have to be on version 102 or later and toggle "Patch CSP to allow style assets"
    Chromium browsers shall be fine by default on any recent version.

    stylus setting

Devs, Contributors, and other Creditors

See here.

About

A Discord Theme inspired by macOS & Human Interface Guidelines.

Resources

License

Stars

Watchers

Forks

Languages

  • SCSS 74.3%
  • CSS 25.7%