Giter Site home page Giter Site logo

minidiscordthemes / systemcolor Goto Github PK

View Code? Open in Web Editor NEW
5.0 0.0 0.0 1.47 MB

Recolours Discord based on your system colour.

License: MIT License

CSS 1.73% JavaScript 0.74% SCSS 97.54%
discord discord-theme vencord vencord-theme betterdiscord betterdiscord-theme replugged replugged-theme

systemcolor's Introduction

SystemColor Discord Theme

Buy me a coffee on ko-fi Vencord/BetterDiscord GitHub downloads Replugged GitHub downloads Total repository size

Recolours Discord based on your system colour.

Dark mode Light mode
SystemColor in blue with dark mode SystemColor in blue with light mode
SystemColor in brown with dark mode SystemColor in brown with light mode
SystemColor in green with dark mode SystemColor in green with light mode

Installation

Vencord (recommended)

Local

  1. Download SystemColor.theme.css:
  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/SystemColor/SystemColor.theme.css

BetterDiscord does not currently detect your system color, however this theme can still be used and customised with a manually set color.

  1. Download SystemColor.theme.css:
  2. Place the file in the themes folder:
    • Settings > BetterDiscord > Themes > Open Themes Folder
  3. Toggle on the theme card.

BetterDiscord does not currently detect your system color, however this theme can still be used and customised with a manually set color.

Automatic

  1. Click to install:

Manual

  1. Download net.saltssaumure.SystemColor.asar:
  2. Place the file in the themes folder:
    • Settings > Replugged > Themes > Open Themes Folder
  3. Click Load Missing Themes and toggle on the theme card.

Customisation

SystemColor customised with background image

Customised screenshot snippet
.theme-dark {
    --systemcolor-base: #f4f0f8a8;
    --systemcolor-bg-image: url(https://discord.com/assets/68691bc51a5e2da8e8cf.svg);
}
Variable name Description Valid values Default value (Vencord) Default value (Other)
--systemcolor-base Base colour Any colour. var(--os-accent-color) cyan
--systemcolor-bg-image Background image Any image or none. linear-gradient(...) linear-gradient(...)
--systemcolor-bg-blur Background blur Any length. 0px 0px

Vencord

Local

  1. Open Themes Folder in Settings > Vencord > Themes > Local Themes
  2. Open SystemColor.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-27 of SystemColor.theme.css.
  3. Edit the variable values.

BetterDiscord

  1. Open Settings > BetterDiscord > Themes.
  2. Click the pencil icon on this theme.
  3. Edit the variable values and save changes.

Replugged

  1. Enable Automatically Apply Quick CSS in Settings > Replugged > General.
  2. Open Settings > Replugged > Quick CSS.
  3. Copy and paste lines 15-27 of SystemColor.theme.css.
  4. Edit the variable values and save.

License

MIT License

  • TL;DR;NAL: Do whatever you want with this theme, just include the original license.

Questions or suggestions?

systemcolor's People

Contributors

saltssaumure avatar

Stargazers

 avatar  avatar  avatar  avatar

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.