diff --git a/src/_chat.scss b/src/_chat.scss index e1f0692..25addca 100644 --- a/src/_chat.scss +++ b/src/_chat.scss @@ -127,3 +127,24 @@ backdrop-filter: blur(10px); .emptyChannelIcon-1YdEz2 { background-color: var(--accent); } + +/* Reply Highlight */ + +#app-mount { + .message-2CShn3 { + margin-left: 5px; + border-radius: vaR(--accent-focused); // ARG, MATEY! :KarenPirate: + &::before { + border-radius: 6px; + } + &.replying-eZ7p5z, &.ephemeral-2nDdnn { + background-color: var(--accent-focused); + &::before { + background-color: var(--accent); + } + &:hover { + background-color: var(--accent-focused); + } + } +} +} \ No newline at end of file diff --git a/src/_friends.scss b/src/_friends.scss index fa40cb2..a4841f4 100644 --- a/src/_friends.scss +++ b/src/_friends.scss @@ -15,7 +15,7 @@ box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.483); border: 1px solid rgb(78, 78, 81); border-radius: 5px; - background: rgb(40, 38, 42); + background: var(--surCordFriends); margin-bottom: 13px; margin-top: 13px; padding-left: 10px; @@ -38,7 +38,7 @@ margin-right: 13px; } .peopleColumn-1wMU14 { - background: rgb(33, 31, 35); + background: var(--surcordFriendsBackground); } .theme-light { @@ -66,7 +66,7 @@ box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.483); border: 1px solid rgb(78, 78, 81); border-radius: 5px; - background: rgba(88, 84, 85, 0.276); + background: var(--surCordActiveNow); margin-bottom: 13px; margin-top: 13px; padding-left: 10px; diff --git a/src/_guilds.scss b/src/_guilds.scss index bd65eec..b2045f8 100644 --- a/src/_guilds.scss +++ b/src/_guilds.scss @@ -5,7 +5,7 @@ */ .theme-dark { .guilds-2JjMmN .scroller-3X7KbA, .wrapper-1_HaEi { - background-color: rgb(42, 40, 44); + background-color: var(--surCordGuilds); } .platform-osx .unreadMentionsIndicatorTop-2bTgUU .unreadMentionsBar-ZXXoOH, .unreadMentionsIndicatorBottom-3RJMnQ .unreadMentionsBar-ZXXoOH{ background: linear-gradient(rgb(44, 192, 90), rgb(45, 179, 87)) ; diff --git a/src/_index.scss b/src/_index.scss index 92dec85..f7c87a7 100644 --- a/src/_index.scss +++ b/src/_index.scss @@ -6,5 +6,5 @@ @use '_sidebars.scss'; @use '_flyouts.scss'; @use '_settings.scss'; -@use '_accents.scss'; +@use '_themeing.scss'; @use 'fixations'; diff --git a/src/_modules.scss b/src/_modules.scss index 220ea1a..ebebfd7 100644 --- a/src/_modules.scss +++ b/src/_modules.scss @@ -115,6 +115,9 @@ -webkit-box-shadow: none; cursor: var(--cursor); } +input[type='checkbox'] { + accent-color: var(--accent) +} #app-mount .container-2nx-BQ .slider-32CRPX, #app-mount .checkboxWrapper-2fDzaA .slider-32CRPX { display: none; } @@ -141,13 +144,13 @@ display:none; /* Color Pallete */ .theme-dark { - --background-tertiary: rgb(42, 40, 44); - --background-secondary: rgb(42, 40, 44); - --background-secondary-alt: rgb(42, 40, 44); - --background-primary: rgb(31, 30, 30); - --channeltextarea-background: rgb(30, 30, 30); + --background-tertiary: var(--surCordBackground2); + --background-secondary: var(--surCordBackground2); + --background-secondary-alt: var(--surCordBackground2); + --background-primary: var(--surCordBackground); + --channeltextarea-background: var(--surCordTextBackground); --background-accent: var(--accent); - --background-modifier-hover: rgb(65, 63, 66); + --background-modifier-hover: var(--surCordHover); --background-modifier-active: rgb(30, 30, 30); --background-modifier-selected: var(--accent-selected); --deprecated-card-bg: #12141f63; @@ -157,6 +160,8 @@ display:none; --toast-background: #000000 !important; --toast-header: #000000 !important; --toast-contents: #000000 !important; + --brand-experiment-500: var(--accent-selected); + --brand-experiment-560: var(--accent-selected); } .theme-light { @@ -176,6 +181,8 @@ display:none; --toast-background: #ffffff !important; --toast-header: #ffffff !important; --toast-contents: #ffffff !important; + --brand-experiment-500: var(--accent-selected); + --brand-experiment-560: var(--accent-selected); .clickable-ZD7xvu .icon-2xnN2Y, .linkButtonIcon-7rsZcu { color: var(--accent); @@ -200,6 +207,9 @@ display:none; text-transform: none; } +/* MWITTRIEN - EMOJIREPLACE - LICENCE https://github.com/mwittrien/BetterDiscordAddons/blob/master/LICENSE */ +/* Uncomment to enable Apple Emojis */ +//@import url(https://mwittrien.github.io/BetterDiscordAddons/Themes/EmojiReplace/base/Apple.css); /* Links */ :root { diff --git a/src/_themeing.scss b/src/_themeing.scss new file mode 100644 index 0000000..dcc7f8e --- /dev/null +++ b/src/_themeing.scss @@ -0,0 +1,161 @@ +/* +  ,、     ,、 ヾV'/ + r'ー》'´`⌒ヾ‐》,// + i  iミ ノ リハリ// + ! i゙瓦゚ ヮ゚ノ!'//| WARNING!!!! YOU CAN VERY EASILY FUCK SOMETHING UP IF YOU DONT OPEN YOUR EYE BALLS!!!! + !l! ! と.フリ{つ/ ! IF YOU WOULD LIKE TO CHANGE THE ACCENT OF THIS THEME, YOU CAN VERY EASILY DO SO BY +,,ノリ | v/_j_、 i!l i UNCOMMENTING ONE OF THE FOLLOWING COLORS. MAKE SURE ONLY >>>ONE<<< COLOR IS COMMENTED AT A TIME +..ゞノ  ~じ'フ~ル'ノ +*/ + +/* + /$$$$$$ /$$ + /$$__ $$ | $$ +| $$ \ $$ /$$$$$$$ /$$$$$$$ /$$$$$$ /$$$$$$$ /$$$$$$ +| $$$$$$$$ /$$_____/ /$$_____/ /$$__ $$| $$__ $$|_ $$_/ +| $$__ $$| $$ | $$ | $$$$$$$$| $$ \ $$ | $$ +| $$ | $$| $$ | $$ | $$_____/| $$ | $$ | $$ /$$ +| $$ | $$| $$$$$$$| $$$$$$$| $$$$$$$| $$ | $$ | $$$$/ +|__/ |__/ \_______/ \_______/ \_______/|__/ |__/ \___/ + */ + +/* Blue */ +:root { + --accent: rgb(26, 129, 251); + --accent-hover: rgba(26, 129, 251, 0.977); + --accent-selected: rgb(26, 129, 251, 0.612); + --accent-focused: rgb(26, 129, 251, 0.200); +} + + +/* Red +:root { + --accent: rgb(237, 60, 68); + --accent-hover: rgb(237, 60, 68, 0.977); + --accent-selected: rgb(237, 60, 68, 0.612); + --accent-focused: rgb(237, 60, 68, 0.200); + } +*/ + + +/* Yellow +:root { + --accent: rgb( 251, 192, 45); + --accent-hover: rgba( 251, 192, 45, 0.977); + --accent-selected: rgb(251, 192, 45, 0.612); + --accent-focused: rgb(251, 192, 45, 0.200); +} +*/ + + +/* Pink + :root { + --accent: rgb(248, 74, 156); + --accent-hover: rgba(248, 74, 156, 0.977); + --accent-selected: rgb(248, 74, 156, 0.612); + --accent-focused: rgb(248, 74, 156, 0.200); + }*/ + + + +/* Hatsune +:root { + --accent: rgb(0, 166, 166); + --accent-hover: rgb(255, 0, 128, 0.977); + --accent-selected: rgb(255, 0, 128, 0.612); + --accent-focused: rgb(255, 0, 128, 0.200); +}*/ + + +/* Dark +:root { + --accent: rgb(152,129,123) + --accent-hover: rgb(0,0,0); + --accent-selected: rgb(0,0,0); + --accent-focused: rgb(0, 0, 0, 0.200); +} +*/ + +/* Apple +:root { + --accent: rgba(14,157,219); + --accent-hover: rgba(251,185,56); + --accent-selected: rgba(246,129,41); + --accent-buttons: rgba(150,56,146); + --accent-focused: rgb(2150, 56, 146, 0.200); +} +.clickable-ZD7xvu .icon-2xnN2Y, .linkButtonIcon-7rsZcu { + color: rgb(224,54,60) !important; +} +.iconWrapper-2awDjA .icon-2xnN2Y { + color: rgba(96,189,78); +} +.stickerIcon-3Jx5SE { + color: var(--accent); +} +.icon-1d5zch { + color: rgba(96,189,78); +} +.contents-3ca1mk .button-2fCJ0o .button-3BaQ4X { + color: rgb(224,54,60); +} +.buttonWrapper-3YFQGJ { + color: var(--accent); +} +*/ + +/* + /$$$$$$$ /$$ /$$ +| $$__ $$ | $$ | $$ +| $$ \ $$ /$$$$$$ /$$$$$$$| $$ /$$ /$$$$$$ /$$$$$$ /$$$$$$ /$$ /$$ /$$$$$$$ /$$$$$$$ +| $$$$$$$ |____ $$ /$$_____/| $$ /$$/ /$$__ $$ /$$__ $$ /$$__ $$| $$ | $$| $$__ $$ /$$__ $$ +| $$__ $$ /$$$$$$$| $$ | $$$$$$/ | $$ \ $$| $$ \__/| $$ \ $$| $$ | $$| $$ \ $$| $$ | $$ +| $$ \ $$ /$$__ $$| $$ | $$_ $$ | $$ | $$| $$ | $$ | $$| $$ | $$| $$ | $$| $$ | $$ +| $$$$$$$/| $$$$$$$| $$$$$$$| $$ \ $$| $$$$$$$| $$ | $$$$$$/| $$$$$$/| $$ | $$| $$$$$$$ +|_______/ \_______/ \_______/|__/ \__/ \____ $$|__/ \______/ \______/ |__/ |__/ \_______/ + /$$ \ $$ + | $$$$$$/ + \______/*/ + +/* AMOLED Theme (Pitch Black by Vozer) +:root { +--surCordBackground: rgb(0, 0, 0); +--surCordBackground2: rgb(0,0,0); +--surCordTextBackground: rgb(7,7,8); +--surcordFriendsBackground: rgb(0, 0, 0); +--surCordFriends: rgb(7,7,8); +--surCordActiveNow: rgba(10, 10, 10); +--surCordGuilds: rgb(0,0,0); +--surCordTitleBar: rgb(0, 0, 0); +--surCordSearch: rgb(7,7,8); +--surCordHover: var(--accent-selected); +} */ + +/* AMOLED Theme + Contrast (Taken from AMOLED-Cord by LuckFire) +:root { + --surCordBackground: rgb(0, 0, 0); + --surCordBackground2: rgb(10,10,10); + --surCordTextBackground: rgb(7,7,8); + --surcordFriendsBackground: rgb(0, 0, 0); + --surCordFriends: rgb(7,7,8); + --surCordActiveNow: rgba(10, 10, 10); + --surCordGuilds: rgb(10,10,10); + --surCordTitleBar: rgb(10, 10, 10); + --surCordSearch: rgb(10,10,10); + --surCordHover: var(--accent-selected); + }*/ + + +/* Regular Theme (surCord by Vozer) */ + :root { + --surCordBackground: rgb(31, 30, 30); + --surCordBackground2: rgb(42, 40, 44); + --surCordTextBackground: rgb(30, 30, 30); + --surcordFriendsBackground: rgb(33, 31, 35); + --surCordFriends: rgb(40, 38, 42); + --surCordActiveNow: rgba(88, 84, 85, 0.276); + --surCordGuilds: rgb(42, 40, 44); + --surCordTitleBar: rgb(55, 53, 55); + --surCordSearch: rgb(53, 51, 55); + --surCordHover: rgb(65, 63, 66); + } diff --git a/src/_titlebar.scss b/src/_titlebar.scss index d9ae4d0..7786585 100644 --- a/src/_titlebar.scss +++ b/src/_titlebar.scss @@ -8,7 +8,7 @@ /* Title Bar */ .theme-dark { .container-ZMc96U.themed-Hp1KC_, .header-3OsQeK{ - background: rgb(55, 53, 55); + background: var(--surCordTitleBar); border-bottom: .5px solid black; } .communityInfoVisible-3zc5_s .header-3OsQeK, .communityInfoVisible-3zc5_s .header-3OsQeK:hover, .hasBanner-2IrYih .header-3OsQeK, .hasBanner-2IrYih .header-3OsQeK:hover { @@ -53,7 +53,7 @@ /* Search and other Text fields */ .theme-dark { .searchBar-jGtisZ, .searchBar-3TnChZ .searchBarComponent-3N7dCG, .inner-2pOSmK, .wrapper-n2dlvs, .searchBar-2M9mRP, .input-2z42oC { - background-color: rgb(53, 51, 55); + background-color: var(--surCordSearch); border-radius: 4px; border: 1px solid rgb(97, 96, 99); }