Giter Site home page Giter Site logo

slippinggittys-discord-themes / surcord Goto Github PK

View Code? Open in Web Editor NEW
71.0 3.0 49.0 7.87 MB

A Discord Theme inspired by macOS & Human Interface Guidelines.

License: MIT License

CSS 16.02% SCSS 83.98%
betterdiscord-theme discord-theme powercord-theme beautifuldiscord-theme betterdiscord-css discord-css powercord-css beautifuldiscord-css

surcord's Introduction

surCord

Hello. Again.

screenshot

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 or Vencord themes folder
    • Copy the text in the file, and paste it in Openasar's quick CSS text field

Browser

Temporary Icon Fix w/ Experiments

image

Translucenty

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.