diff --git a/README.md b/README.md index b263c39..3b81ada 100644 --- a/README.md +++ b/README.md @@ -5,23 +5,66 @@ ## How to use -#### Learn how to use [BeautifulDiscord](https://github.com/leovoel/BeautifulDiscord), [Powercord](https://github.com/powercord-org/powercord), [Goosemod](https://goosemod.com/), or [BetterDiscord](https://github.com/rauenzi/BetterDiscordApp). Browser users should look into [Stylus](https://github.com/openstyles/stylus). +### Discord App -* BetterDiscord/BeautifulDiscord users can download [surCord.theme.css](https://raw.githubusercontent.com/SlippingGitty/surCord/main/surCord.theme.css) and either - * Inject the CSS file with BeautifulDiscord - * Place in the BetterDiscord themes folder -* Replugged/Powercord users - * Open a terminal in the themes folder and type `git clone https://github.com/SlippingGitty/surCord/` -* Stylus - * Head [here](https://github.com/SlippingGitty/surCord/raw/main/surCord.user.css) to install. +* BetterDiscord, Vencord, and Openasar users can grab the [surCord.theme.css](hhttps://raw.githubusercontent.com/SlippingGittys-Discord-Themes/surCord/main/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 + * [![](https://img.shields.io/badge/install%20with-stylus-006666?style=flat-square)](https://github.com/SlippingGittys-Discord-Themes/surCord/raw/main/surCord.user.css) + +## Vencord & Translucenty + +
+Information on enabling translucency + +Albeit not out of the box, (and very much intentionally so), this theme supports translucency in some areas. + +![image](https://user-images.githubusercontent.com/76500838/231657975-018e1649-0cb0-4d3f-ad74-5698e305dc76.png) + +### You can achieve the same look by doing as follows: + +* Go to Settings > Vencord, then toggle "Enable Translucent Window". + +![image](https://user-images.githubusercontent.com/76500838/231659229-4f261d16-304e-4904-b9f5-88478ab2fe89.png) + +* 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](https://user-images.githubusercontent.com/76500838/231659909-ba832307-aca5-48a2-a800-9927a0f6a132.png) + +### Extra info + * You can adjust the oppacity and colors by pasting & messing with these varriables + + ```css + +.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](https://cdn.discordapp.com/attachments/816373850647953439/984177819204603924/unknown.png) for surCord by navigating to `/src/_theming.scss` and [uncommenting **>>>one<<<**](https://github.com/SlippingGittys-Discord-Themes/surCord/blob/main/src/_theming.scss) 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 by navigating to `/src/_modules.scss` and uncommenting `@import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/EmojiReplace/base/Apple.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)* @@ -34,6 +77,8 @@ to use **San Fransisco Display Bold**. *(Or specify your own weight, 100-900; bo Chromium browsers shall be fine by default on any recent version. ![stylus setting](/assets/stylussettingneeded.png) +
+ ## Devs, Contributors, and other Creditors