Add Material Theme

data/material-dark/Custom.css

@@ -0,0 +1,258 @@
+:root {
+    --messagebgcolor: rgb(33, 35, 38);
+    --embedbgcolor: rgb(21, 23, 25);
+    --mediaradius: calc(18px / 1.75);
+}
+
+.MessageBox__Base-sc-jul4fa-0 {
+    border-radius: 50px !important;
+    position: relative;
+    top: -10px;
+    width: 98%;
+    margin-left: 15px;
+}
+
+.sc-dmlqKv {
+    font-size: 110%;
+} 
+
+._sidebar_t7t23_39 {
+    max-width: 240px;
+}
+
+._contentcontainer_t7t23_62 {
+    min-width: 0px !important;
+    max-width: 1600px !important;
+    width: 80% !important;
+    margin-left: 10%;
+}
+
+.Container-sc-1d91xkm-1 {
+    border-radius: 18px;
+    box-shadow: hsl(0, 0%, 0%, 0.28) 0px 8px 24px;
+}
+
+._closeButton_t7t23_240 {
+    border: none !important;
+}
+
+._content_1avxi_40 {
+    font-weight: 500 !important;
+}
+
+._item_1avxi_1 {
+    transition: background-color .3s ease
+}
+
+.ServerSidebar__ServerList-sc-1lca5oe-1 {
+    background: var(--primary-background);
+    scrollbar-width: none;
+}
+
+.SidebarBase__GenericSidebarList-sc-1dma6vq-2 {
+    background: var(--primary-background);
+    scrollbar-width: none;
+}
+
+.SidebarBase__GenericSidebarBase-sc-1dma6vq-1 {
+    background: var(--primary-background);
+}
+
+.MemberList__ListCategory-sc-1bwlier-0 {
+    background: var(--primary-background);
+}
+
+.MessageBase-sc-1s9ehlg-0 {
+    background-color: rgb(33, 35, 38);
+    border-radius: 18px;
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+    margin-left: 78px;
+    margin-right: 10px;
+}
+
+.MessageBase__MessageInfo-sc-1s9ehlg-1 {
+    left: -75px;
+    position: relative;
+}
+
+.MessageBase__MessageInfo-sc-1s9ehlg-1:not(:has(time)) {
+    left: -50px;
+    width: 40px;
+    height: 40px;
+}
+
+.MessageBase__MessageInfo-sc-1s9ehlg-1 > div {
+    width: 50px;
+}
+
+.MessageBase__MessageContent-sc-1s9ehlg-2 {
+    left: -30px;
+}
+
+.MessageBase-sc-1s9ehlg-0:has(.MessageBase__MessageInfo-sc-1s9ehlg-1 time) {
+    border-radius: 0 0 18px 18px;
+}
+
+.MessageBase-sc-1s9ehlg-0:has(.MessageBase__MessageInfo-sc-1s9ehlg-1 time) .sc-jJEKmz {
+    position: relative;
+    left: -36.25px;
+}
+
+.MessageBase-sc-1s9ehlg-0:has(.MessageBase__MessageInfo-sc-1s9ehlg-1 time) .sc-iBPTik {
+    right: -40px;
+}
+
+.MessageBase-sc-1s9ehlg-0:not(:has(.MessageBase__MessageInfo-sc-1s9ehlg-1 time)) .sc-iBPTik {
+    right: -26.75px;
+}
+
+.sc-iBPTik {
+    box-shadow: hsl(0, 0%, 0%, 0.28) 0px 8px 24px;
+    background: rgb(45, 48, 52);
+    border: none;
+    border-radius: 16px;
+}
+
+.MessageBase-sc-1s9ehlg-0:has(.MessageBase__MessageInfo-sc-1s9ehlg-1 time):before, .MessageBase-sc-1s9ehlg-0:has(.MessageBase__MessageInfo-sc-1s9ehlg-1 time):after {
+    content: " ";
+    position: relative;
+    width: 0;
+    height: 0;
+    top: calc(18px / 1.15 * -1);
+    background-color: transparent;
+    border: calc(18px / 2.3) solid transparent;
+    border-bottom-color: var(--messagebgcolor);
+    pointer-events: none;
+    transition: 250ms cubic-bezier(0.4, 0, 0.2, 1) border-color;
+}
+
+.MessageBase-sc-1s9ehlg-0:has(.MessageBase__MessageInfo-sc-1s9ehlg-1 time):before {
+    left: -2px;
+    border-left-color: var(--messagebgcolor);
+}
+
+.MessageBase-sc-1s9ehlg-0:has(.MessageBase__MessageInfo-sc-1s9ehlg-1 time):after {
+    right: -16px;
+    border-right-color: var(--messagebgcolor);
+}
+
+.MessageEditor__EditorBase-sc-133d9pc-0 {
+    position: relative;
+    left: -37px;
+}
+
+.MessageReply__ReplyBase-sc-utzx7-0 {
+    position: relative;
+    left: 18px;
+}
+
+.EmbedInvite__EmbedInviteBase-sc-154n8c6-0 {
+    background-color: var(--embedbgcolor);
+    border-radius: var(--mediaradius);
+}
+
+.MessageBase-sc-1s9ehlg-0:has(.MessageBase__MessageInfo-sc-1s9ehlg-1 time) .Grid-sc-iv0lk8-0, .MessageBase-sc-1s9ehlg-0:has(.MessageBase__MessageInfo-sc-1s9ehlg-1 time) ._embed_dxa3n_1, .MessageBase-sc-1s9ehlg-0:has(.MessageBase__MessageInfo-sc-1s9ehlg-1 time) .EmbedInvite__EmbedInviteBase-sc-154n8c6-0, .MessageBase-sc-1s9ehlg-0:has(.MessageBase__MessageInfo-sc-1s9ehlg-1 time) .sc-hKgJUU {
+    position: relative;
+    left: -35px;
+}
+
+._attachment_197qa_1 {
+    background: var(--embedbgcolor) !important;
+    border-radius: var(--mediaradius);
+}
+
+._actions_iu4oa_1 {
+    background: transparent;
+}
+
+.ReplyBar__Base-sc-d2l7w7-0 {
+    position: relative;
+    top: -10px;
+    background: transparent;
+}
+
+.TypingIndicator__Base-sc-1jama4m-0 {
+    top: -10px;
+    width: 97.5%;
+}
+
+.TypingIndicator__Base-sc-1jama4m-0 > div {
+    background-color: var(--primary-background);
+    backdrop-filter: blur(0px) !important;
+    z-index: 1;
+}
+
+.MessageArea__Area-sc-1q4cka6-0 {
+    width: 98%;
+    margin-bottom: 15px;
+}
+
+.JumpToBottom__Bar-sc-v9kqir-0.gILwrq {
+    display: flex;
+    top: 5px;
+    border-radius: 0 0 0 0;
+    z-index: 2;
+    justify-content: center; 
+    align-items: center;
+}
+
+.JumpToBottom__Bar-sc-v9kqir-0.gILwrq > div {
+    border-radius: 50px;
+    height: 52px;
+    width: 40%;
+    width: max-content;
+}
+
+.JumpToBottom__Bar-sc-v9kqir-0.ggHcXn {
+    display: flex;
+    top: -75px;
+    border-radius: 0 0 0 0;
+    z-index: 2;
+    justify-content: right;
+    align-items: right;
+}
+
+.JumpToBottom__Bar-sc-v9kqir-0.ggHcXn > div {
+    border-radius: 15px;
+    min-width: 80px !important;
+    width: max-content;
+    height: 56px;
+    margin-right: 20px;
+    background-color: var(--accent);
+    color: rgb(255, 255, 255);
+}
+
+.JumpToBottom__Bar-sc-v9kqir-0.ggHcXn .right {
+    flex-direction: row-reverse;
+}
+
+.JumpToBottom__Bar-sc-v9kqir-0.gILwrq .right > span, .JumpToBottom__Bar-sc-v9kqir-0.ggHcXn > div > div:not(.right) {
+    display: none;
+}
+
+.JumpToBottom__Bar-sc-v9kqir-0 .StyledIconBase-ea9ulj-0 {
+    width: 36px;
+    height: 36px;
+}
+
+.ButtonItem-sc-1ixnesa-0, ._item_1avxi_1 {
+    border-radius: 21px;
+}
+
+.Button-sc-wdolxy-0 {
+    border-radius: 18px;
+    background-color: var(--accent);
+    height: 36px;
+}
+
+.Button-sc-wdolxy-0.jMjzeh {
+    background-color: transparent;
+}
+
+.Actions-sc-1d91xkm-4 {
+    background: var(--secondary-header)
+}
+
+._item_1avxi_1[data-active=true] {
+    background-color: color-mix(in srgb, var(--accent) 35%, transparent);
+}

data/material-dark/Preset.toml

@@ -0,0 +1,45 @@
+slug = "material-dark"
+name = "Material Dark"
+creator = "netpa"
+description = "A theme based on Google's Material Design"
+tags = ["Material", "Google", "Dark", "Blue"]
+version = "1.0.0"
+
+[variables]
+light = false
+accent = "#557be2"
+background = "#0e0f11"
+foreground = "#F6F6F6"
+
+block = "#2D2D2D"
+message-box = "#27272a"
+mention = "#303d5f"
+
+success = "#65E572"
+warning = "#FAA352"
+error = "#F06464"
+hover = "#2b2d31"
+
+[variables.scrollbar]
+thumb = "#d1d1d1"
+track = "transparent"
+
+[variables.primary]
+background = "#151619"
+header = "#151619"
+
+[variables.secondary]
+background = "#4D4D4D"
+foreground = "#848484"
+header = "#151619"
+
+[variables.tertiary]
+background = "#4D4D4D"
+foreground = "#848484"
+
+[variables.status]
+online = "#43b683"
+away = "#F39F00"
+busy = "#F84848"
+streaming = "#977EFF"
+invisible = "#A5A5A5"