PurpleOnyx
Purple Accented NewUI Onyx Compact
2
Live preview
Full Discord interface with this theme applied — powered by ThemePreview.
Screenshot
1
/**2
* @name PurpleOnyx3
* @author Zacam4
* @version 2.0.95
* @description Purple Accented NewUI Onyx Compact6
* @authorId 949334552587837447
* @source https://github.com/Zacam/BetterDiscord/tree/main/PurpleOnyx8
*/9
10
@import url("https://zacam.github.io/BetterDiscord/PurpleOnyx/css/PurpleOnyx.css");11
12
/* Plugins Customizations */13
@import url("https://zacam.github.io/BetterDiscord/PurpleOnyx/css/PurpleOnyx-Full.css");14
/* Lite Theme - PurpleOnyx Only15
* @import url("https://zacam.github.io/BetterDiscord/PurpleOnyx/css/PurpleOnyx-Lite.css");16
*/17
18
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');19
20
:root, .theme-midnight {21
/* Purple Onyx NewUI */22
--font-primary: ";Spectral";, serif, ";Noto Color Emoji";;23
--font-display: ";Spectral";, serif, ";Noto Color Emoji";;24
--font-code: ";DejaVuSansM Nerd Font Mono";, ";DejaVu Sans Mono";, ";Consolas";, monospace;25
--oPur-21: rgba(164,128,226,0.21);26
--oPur-32: rgba(164,128,226,0.32);27
--oPur-42: rgba(164,128,226,0.42);28
--oPur-64: rgba(164,128,226,0.64);29
--oPur-84: rgba(164,128,226,0.84);30
--oPurple: rgb(164,128,226);31
--app-frame-border: var(--oPur-42);32
--background-brand: var(--oPur-64);33
--background-modifier-selected: var(--oPur-32);34
--badge-background-brand: var(--oPur-64);35
--border-active: var(--oPur-64);36
--border-normal: var(--oPur-42);37
--border-strong: var(--oPur-84);38
--border-subtle: var(--oPur-32);39
--brand-10a: rgba(164,128,226,0.15);40
--brand-300: var(--oPur-64);41
--brand-500: var(--oPur-84);42
--checkbox-background-selected-default: var(--oPur-64);43
--checkbox-background-selected-hover: var(--oPur-42);44
--control-brand-foreground: var(--oPur-84);45
--control-overlay-primary-background-default: var(--oPur-32);46
--control-overlay-primary-background-hover: var(--oPur-42);47
--control-overlay-primary-border-default: var(--border-normal);48
--control-overlay-primary-border-hover: var(--border-active);49
--control-overlay-primary-text-default: var(--text-default);50
--control-overlay-primary-text-hover: var(--text-default);51
--control-primary-background-hover: var(--oPur-64);52
--custom-channel-textarea-text-area-height: 32px;53
--info-help-foreground: rgb(164,128,226);54
--input-border-default: var(--oPur-32);55
--input-border-hover: var(--oPur-42);56
--input-border-active: var(--oPur-64);57
--mention-foreground: rgb(164,128,226);58
--message-highlight-background-default: rgba(164,128,226,0.15);59
--message-mentioned-background-default: rgba(164,128,226,0.05);60
--message-mentioned-background-hover: rgba(164,128,226,0.05);61
--modal-horizontal-padding: 12px;62
--modal-vertical-padding: 8px;63
--modal-width-medium: fit-content;64
--progressbar-indicator-background: var(--oPur-64);65
--radio-background-selected-default: var(--oPur-64);66
--spoiler-hidden-background: rgba(164,128,226,0.11);67
--spoiler-hidden-background-hover: var(--oPur-32);68
--text-brand: var(--oPur-84);69
--text-link: var(--oPur-84);70
--__current--spoiler-background-color: var(--oPur-32);71
--__spoiler-background-color--revealed: var(--oPur-21);72
}73
74
@keyframes marquee {75
0% { -webkit-transform: translateX(100%); }76
100% { -webkit-transform: translateX(-100%); }77
}