Readme is pretty now, info on translucency

This commit is contained in:
Vozer
2023-04-13 00:24:21 -05:00
committed by GitHub
parent 7bdbf67e72
commit 093d6e11a7
+54 -9
View File
@@ -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
<details>
<summary>Information on enabling translucency</summary>
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;
}
```
</details>
## Extra info
<details>
<summary>Information about accents, themes, emoji, fonts, and more!</summary>
* 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)
</details>
## Devs, Contributors, and other Creditors