unshittify-discord

UnShittify Discord

By @nak.kiwi (You can call me Nakki, feel free visit wy cozy website at nak.kiwi) :3

A personal project to fix the design mistakes and disalignments in the Discord app. If it’s unreadable, it’s by design, I didn’t want you to steal my secret sauce.

Disclaimer: This is a discord unoficcial theme, it is not affiliated with Discord in any way. If you are discord and wish for this to be taken down, please message me at hello@nak.kiwi

Installation
Use to Create Other Themes
Features
Known Issues
License

Installation (Vencord/BetterDiscord/Browser)

Option 1: Download Importer (Auto Update)

Download UnShittify.theme.css or UnShittifyRounded.theme.css and add it to your themes folder.

You won’t need both themes for rounded icons.

Option 2: Online Themes (Auto Update, no settings available)

Add the following line to your “Online Themes” imports:

https://mairiosipla.github.io/unshittify-discord/UnShittifySource.theme.css

And the following for rounded icons:

https://mairiosipla.github.io/unshittify-discord/RoundIconsSource.theme.css

[!NOTE]
You’ll need both themes for rounded icons.

Option 3 (For Bowsers using UserCSS extensions)

There are extra options: RoundIcons and RefreshedSeamlessChatBar Toggles.

Check out https://userstyles.world/style/21817

Option 4: Download Source (No Automatic Updates)

Download the raw CSS files:

And place them in your themes folder.

[!NOTE]
You’ll need both themes for rounded icons.

Use to Create Other Themes

Simply add this CSS at the top of your file:

@import url("https://mairiosipla.github.io/unshittify-discord/UnShittifySource.theme.css");

Optionally, you can also include rounded icons:

@import url("https://mairiosipla.github.io/unshittify-discord/RoundIconsSource.theme.css");

[!NOTE]
You’ll need both themes for rounded icons.

Features

Removed top bar and left it floating. The window can still be moved by nearing the mouse to the top of the window.
Adapted profile container to fit neatly under the rest of the users.
Aligned chat input field.
Optional round server and folder icons. (Read Installation for more info)
Server Icon Scaling (Read Settings for more info)

Settings

If using Installation methods 1 or 4, you can change the following settings by opening the theme.css file in a text editor:

/* SETTINGS */
:root {
	/* Right padding of the top bar */
	--top-bar-padding: 220px;
	/* Icon scale */
	--icon-scale: 1;

	/* NSPG911 Refreshed Seamless Chat Bar */
	/* Custom padding for the chat box */
	--rscb-chat-box-padding: 8px;
	/* Whether you want the chat to not move up and down when someone starts typing */
	--rscb-no-jump-chat: 0;
}

--top-bar-padding: The right padding of the top bar. This is the space between the top bar and the right side of the window. Default is 220px. You needn’t change this unless you modified the top bar width, perhaps by removing some icons.
--icon-scale: The scale of the icons. Default is 1. You can set this to any value you want, but I recommend keeping it between 1 and 1.3.
--rscb-chat-box-padding: The padding of the “user is typing” box. Default is 8px.
--rscb-no-jump-chat: Whether you want the chat to not move up and down when someone starts typing. Default is 0 (disabled). Set it to 1 to enable it.

Known Issues

The drag icon may fail to register events at some window sizes.

Contributing

As long as you run the code through Prettier and use tabs instead of spaces, you’re good to go. 😄 Just open a pull request.

Discord will sometimes change classes between versions, to keep old clients supported adding classes is preferred (instead of replacing them).

License

See LICENSE.md

Credits

Thanks to @nspc911 for the Refreshed Seamless Chat Bar, Provided under the following license:

MIT License

Copyright (c) 2024 NSPC911

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

This site is open source. Improve this page.