Skip to content

Commit

Permalink
Migrate theme from MiniDiscordThemes/Snippets
Browse files Browse the repository at this point in the history
  • Loading branch information
Saltssaumure committed Jun 20, 2024
1 parent 35dd4ed commit ae6350b
Show file tree
Hide file tree
Showing 27 changed files with 315 additions and 75 deletions.
1 change: 1 addition & 0 deletions .github/workflows/css.yml
Original file line number Diff line number Diff line change
Expand Up @@ -34,3 +34,4 @@ jobs:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_branch: deploy
publish_dir: "./"
enable_jekyll: true
20 changes: 20 additions & 0 deletions DiscordReimagined.theme.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/**
* @name Discord Reimagined
* @author Saltssaumure
* @authorLink https://github.com/Saltssaumure
* @description Based on 'Discord Re-imagined (Concept)' by Concept Central: https://www.youtube.com/watch?v=7gyZyg3jC2w.
* @license MIT
* @version 1.1
* @invite uy8nKQVatp
* @source https://github.com/MiniDiscordThemes/DiscordReimagined
* @donate https://ko-fi.com/saltssaumure
*/

@import url("https://minidiscordthemes.github.io/DiscordReimagined/reimagine.min.css");

/* See https://github.com/MiniDiscordThemes/DiscordReimagined#customisation for customisation settings. */
:root {
--reimagine-channellist-width: 360px;
--reimagine-header-height: 60px;
--reimagine-server-size: 54px;
}
83 changes: 47 additions & 36 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[screenshot]: https://minidiscordthemes.github.io/Template/preview/preview.avif
[light]: https://minidiscordthemes.github.io/Template/preview/light.avif
[dark]: https://minidiscordthemes.github.io/Template/preview/dark.avif
[preview]: https://minidiscordthemes.github.io/DiscordReimagined/preview/preview.png
[previewColor]: https://minidiscordthemes.github.io/DiscordReimagined/preview/preview-systemcolor.png
[SystemColor]: https://github.com/MiniDiscordThemes/SystemColor

[css-color]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
[css-length]: https://developer.mozilla.org/en-US/docs/Web/CSS/length
Expand All @@ -14,40 +14,38 @@
[shield-donate]: https://img.shields.io/badge/Donate-ko--fi-orange?style=flat-square&logo=kofi&logoColor=orange
[ko-fi]: https://ko-fi.com/saltssaumure "Buy me a coffee!"

[shield-css-dl]: https://img.shields.io/github/downloads/MiniDiscordThemes/Template/Template.theme.css?color=purple&label=Downloads&style=flat-square
[shield-asar-dl]: https://img.shields.io/github/downloads/MiniDiscordThemes/Template/net.saltssaumure.Template.asar?color=purple&label=Downloads&style=flat-square
[shield-repo-size]: https://img.shields.io/github/repo-size/MiniDiscordThemes/Template?label=Repository&style=flat-square "Total size"
[shield-css-dl]: https://img.shields.io/github/downloads/MiniDiscordThemes/DiscordReimagined/DiscordReimagined.theme.css?color=purple&label=Downloads&style=flat-square
[shield-asar-dl]: https://img.shields.io/github/downloads/MiniDiscordThemes/DiscordReimagined/net.saltssaumure.DiscordReimagined.asar?color=purple&label=Downloads&style=flat-square
[shield-repo-size]: https://img.shields.io/github/repo-size/MiniDiscordThemes/DiscordReimagined?label=Repository&style=flat-square "Total size"

[github]: https://github.com/MiniDiscordThemes/Template
[issues]: https://github.com/MiniDiscordThemes/Template/issues
[license]: https://github.com/MiniDiscordThemes/Template/blob/main/LICENSE
[.theme.css]: https://github.com/MiniDiscordThemes/Template/blob/main/Template.theme.css
[github]: https://github.com/MiniDiscordThemes/DiscordReimagined
[issues]: https://github.com/MiniDiscordThemes/DiscordReimagined/issues
[license]: https://github.com/MiniDiscordThemes/DiscordReimagined/blob/main/LICENSE
[.theme.css]: https://github.com/MiniDiscordThemes/DiscordReimagined/blob/main/DiscordReimagined.theme.css

[release-bd]: https://betterdiscord.app/theme/?id=000 "BetterDiscord store page"
[release-rp]: https://replugged.dev/store/net.saltssaumure.Template "Replugged store page"
[release-css-gh]: https://github.com/MiniDiscordThemes/Template/releases/latest/download/Template.theme.css "Get latest release"
[release-asar-gh]: https://github.com/MiniDiscordThemes/Template/releases/latest/download/net.saltssaumure.Template.asar "Get latest release"
[release-rp]: https://replugged.dev/store/net.saltssaumure.DiscordReimagined "Replugged store page"
[release-css-gh]: https://github.com/MiniDiscordThemes/DiscordReimagined/releases/latest/download/DiscordReimagined.theme.css "Get latest release"
[release-asar-gh]: https://github.com/MiniDiscordThemes/DiscordReimagined/releases/latest/download/net.saltssaumure.DiscordReimagined.asar "Get latest release"

# Template Discord Theme
# Discord Reimagined Theme
[![Buy me a coffee on ko-fi][shield-donate]][ko-fi]
[![CSS GitHub downloads][shield-css-dl]][release-css-gh]
[![Asar GitHub downloads][shield-asar-dl]][release-asar-gh]
[![Total repository size][shield-repo-size]][github]

***A template Discord theme for multiple client mod support.***
***A theme based on [Discord Re-imagined (Concept)](https://www.youtube.com/watch?v=7gyZyg3jC2w) by Concept Central.***

![Template applied to Discord][screenshot]

| Light mode | Dark mode |
| :---------------------------: | :-------------------------: |
| ![Template light mode][light] | ![Template dark mode][dark] |
| Default | [With SystemColor][SystemColor] |
| :------------------------------------------------: | :-------------------------------------------------: |
| ![DiscordReimagined with default colours][preview] | ![DiscordReimagined with SystemColor][previewColor] |

## Installation

### [BetterDiscord][BetterDiscord]
<details><summary>Click to expand</summary>

1. Download `Template.theme.css`:
1. Download `DiscordReimagined.theme.css`:
- [BetterDiscord store][release-bd]
- [GitHub][release-css-gh]
2. Place the file in the themes folder:
Expand All @@ -62,7 +60,7 @@
1. Click to install:
- [Replugged store][release-rp]
#### Manual
1. Download `net.saltssaumure.Template.asar`:
1. Download `net.saltssaumure.DiscordReimagined.asar`:
- [GitHub][release-asar-gh]
2. Place the file in the themes folder:
- `Settings` > `Replugged` > `Themes` > `Open Themes Folder`
Expand All @@ -73,28 +71,24 @@
<details><summary>Click to expand</summary>

#### Local
1. Download `Template.theme.css`:
1. Download `DiscordReimagined.theme.css`:
- [BetterDiscord store][release-bd]
- [GitHub][release-css-gh]
2. Place the file in the themes folder:
- `Settings` > `Vencord` > `Themes` > `Local Themes` > `Open Themes Folder`
3. Click `Load missing Themes` and toggle on the theme card.
#### Online
1. Paste the link in `Settings` > `Vencord` > `Themes` > `Online Themes`:
- `https://minidiscordthemes.github.io/Template/Template.theme.css`
- `https://minidiscordthemes.github.io/DiscordReimagined/DiscordReimagined.theme.css`
</details>

## Customisation

| Variable | Description | Valid values | Default value |
| ------------------ | ------------------------------ | ------------------------------- | ------------- |
| `--temp-bg-color` | Background colour | Any [colour][css-color]. | `#000` |
| `--temp-bg-height` | Background height | Any [length][css-length]. | `100vh` |
| `--temp-scanline` | &#9936; Moving scanline on/off | `block` (on) or `none` (off). | `block` |
| `--temp-flicker` | &#9888; Screen flicker on/off | `flicker` (on) or `none` (off). | `none` |

- &#9936; This effect is performance-intensive.
- &#9888; This is a fast flickering effect and may not be suitable for those with photosensitive epilepsy.
| Variable | Description | Valid values | Default value |
| ------------------------------- | ------------------ | ------------------------- | ------------- |
| `--reimagine-channellist-width` | Channel list width | Any [length][css-length]. | `360px` |
| `--reimagine-header-height` | Header height | Any [length][css-length]. | `60px` |
| `--reimagine-server-size` | Server size | Any [length][css-length]. | `54px` |

### BetterDiscord
<details><summary>Click to expand</summary>
Expand All @@ -109,7 +103,7 @@

1. Enable `Automatically Apply Quick CSS` in `Settings` > `Replugged` > `General`.
2. Open `Settings` > `Replugged` > `Quick CSS`.
3. Copy and paste lines 15-20 of [`Template.theme.css`][.theme.css].
3. Copy and paste lines 15-20 of [`DiscordReimagined.theme.css`][.theme.css].
4. Edit the variable values and save.
</details>

Expand All @@ -118,17 +112,34 @@

#### Local
1. `Open Themes Folder` in `Settings` > `Vencord` > `Themes` > `Local Themes`
2. Open `Template.theme.css` with your favourite text editor.
2. Open `DiscordReimagined.theme.css` with your favourite text editor.
3. Edit the variable values and save.
#### Online
1. `Enable Custom CSS` in `Settings` > `Vencord` > `Vencord` and click `Open QuickCSS File`.
2. Copy and paste lines 15-20 of [`Template.theme.css`][.theme.css].
2. Copy and paste lines 15-20 of [`DiscordReimagined.theme.css`][.theme.css].
3. Edit the variable values.
</details>

## License
This theme is licensed under the [MIT license][license].

## Credits
### Sources
- [Discord Re-imagined (Concept)](https://www.youtube.com/watch?v=7gyZyg3jC2w) by Concept Central

### Themes
[hsl]: https://github.com/DiscordStyles/HorizontalServerList
[clw]: https://github.com/MiniDiscordThemes/Snippets/blob/main/themes/ChannelListWidth
[msb]: https://github.com/MiniDiscordThemes/Snippets/blob/main/themes/MinimalSearchbar
[mt]: https://github.com/MiniDiscordThemes/Snippets/blob/main/themes/ModTitle
[mdt]: https://github.com/MiniDiscordThemes
[s]: https://github.com/Saltssaumure

- [HorizontalServerList][hsl] by [DiscordStyles](https://github.com/DiscordStyles) ([Gibbu](https://github.com/Gibbu)) - MIT license
- [ChannelListWidth][clw] by [MiniDiscordThemes][mdt] ([Saltssaumure][s]) - MIT license
- [MinimalSearchbar][msb] by [MiniDiscordThemes][mdt] ([Saltssaumure][s]) - MIT license
- [ModTitle][mt] by [MiniDiscordThemes][mdt] ([Saltssaumure][s]) - MIT license

## Questions or suggestions?
- Post [an issue][issues] on GitHub.
- Post in `#theme-support` on [my support server][discord].
21 changes: 0 additions & 21 deletions Template.theme.css

This file was deleted.

19 changes: 11 additions & 8 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -1,20 +1,23 @@
{
"id": "net.saltssaumure.Template",
"name": "Template",
"description": "A template theme for multiple client mod support.",
"id": "net.saltssaumure.DiscordReimagined",
"name": "Discord Reimagined",
"description": "Based on 'Discord Re-imagined (Concept)' by Concept Central: https://www.youtube.com/watch?v=7gyZyg3jC2w. See GitHub for customisation options.",
"author": {
"name": "Saltssaumure",
"discordID": "134142022092062720",
"github": "Saltssaumure"
},
"version": "1.0.0",
"version": "1.1.1",
"updater": {
"type": "store",
"id": "net.saltssaumure.Template"
"id": "net.saltssaumure.DiscordReimagined"
},
"license": "MIT",
"type": "replugged-theme",
"main": "scss/temp.scss",
"source": "https://github.com/MiniDiscordThemes/Template",
"image": ["https://minidiscordthemes.github.io/Template/preview/preview.avif"]
"main": "scss/reimagine-replugged.scss",
"source": "https://github.com/MiniDiscordThemes/DiscordReimagined",
"image": [
"https://minidiscordthemes.github.io/DiscordReimagined/preview/preview.png",
"https://minidiscordthemes.github.io/DiscordReimagined/preview/preview-systemcolor.png"
]
}
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"name": "template-discord-theme",
"version": "1.0.0",
"description": "A template Discord theme for multiple client mod support.",
"repository": "github:MiniDiscordThemes/Template",
"name": "discordreimagined-discord-theme",
"version": "1.1.1",
"description": "A Discord theme based on 'Discord Re-imagined (Concept)' by Concept Central: https://www.youtube.com/watch?v=7gyZyg3jC2w.",
"repository": "github:MiniDiscordThemes/DiscordReimagined",
"author": "Saltssaumure <[email protected]>",
"license": "MIT",
"private": true,
Expand Down
Binary file added preview/preview-systemcolor.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added preview/preview.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions scss-compile.config.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
/** @type {import('bd-scss/lib/config').Config} */
export default {
meta: {
name: "Template" /* The official name of your theme. */,
scss: "temp" /* The name of your base scss file. */,
repo: "Template" /* The name of your theme repository. */,
name: "Discord Reimagined" /* The official name of your theme. */,
scss: "reimagine-replugged" /* The name of your base scss file. */,
repo: "DiscordReimagined" /* The name of your theme repository. */,
version: "dev" /* The version of your theme. */
}
};
6 changes: 6 additions & 0 deletions scss/_mixins.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@mixin hoist {
position: relative;
top: calc(-1 * var(--channellist-header-height));
height: calc(100% + var(--channellist-header-height));
z-index: 100;
}
6 changes: 6 additions & 0 deletions scss/abstract/_font.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@import url("https://fonts.googleapis.com/css2?family=Noto+Emoji&family=Wix+Madefor+Display:[email protected]&display=swap");

:root {
--font-primary: "gg sans", "Noto Emoji", sans-serif;
--font-display: "Wix Madefor Display", "Noto Emoji", sans-serif;
}
9 changes: 9 additions & 0 deletions scss/abstract/_scrollbar.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
// Scrollbar
.auto_c49869 {
&:not(:hover) {
&::-webkit-scrollbar-thumb,
&::-webkit-scrollbar-track {
background-color: transparent;
}
}
}
2 changes: 2 additions & 0 deletions scss/abstract/index.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@forward "./font";
@forward "./scrollbar";
50 changes: 50 additions & 0 deletions scss/concrete/_channellist.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
@import url("https://minidiscordthemes.github.io/Snippets/ChannelListWidth/main.css");

// Channel sidebar
.sidebar_a4d4d9 {
$side-margin: 12px;

// Server name
.name_fd6364 {
font-family: var(--font-display);
}

// Channels
.scrollerBase_eed6a8 {
padding-left: $side-margin;
padding-right: $side-margin !important;

// Unread pips
.unread_d8bfb3 {
border-radius: var(--radius-xs);
width: 8px;
}

// Channel icons
@at-root .iconContainer_d8bfb3 {
order: 1;
margin-right: 0;

@at-root .containerDefault_f6f816.selected_f6f816 &,
.containerDefault_f6f816:hover & {
display: none;
}
}
}

// User panel
.panels_a4d4d9 {
border-radius: 8px;
overflow: hidden;
margin: 0 $side-margin 24px;

.container_b2ca13 {
background-clip: padding-box;

// Name
.title_d1da5f {
font-family: var(--font-display);
}
}
}
}
Loading

0 comments on commit ae6350b

Please sign in to comment.