Closed RadNotRed closed 2 years ago
i've updated the colors a bit, wait for the change to show and if you still dont like it you can: fork this repo, go info ./src/support/betterdiscord/compiled.css and remove the warning
I would just remove the whole part before / Colored User Connections / right?
the lighter colored sidebar is definitely less appealing to me, the near pitch black was the reason I chose amoled-cord over others.
Yeah thats my same reasoning, it just looks like other "amoledcord" themes now in my opinion
hmmm.. ill make some more adjustments soon to make it more appealing.
How would i go about compiling a theme, I edited the compiled.css file
are you using powercord or betterdiscord
betterdiscord
/**
* @name AMOaLED-Cord
* @version 1.1.1
* @description A theme that's nice on your eyes.. lights out baby!
* @author LuckFire#4800
*
* @website https://github.com/LuckFire
* @source https://github.com/LuckFire/amoled-cord/tree/main/src
**/
@import url('YOUR_IMPORT_URL');
:root {
/* --------- BASE THEME --------- */
--blurple-replace: #7289DA;
--background-primary: rgb(8, 8, 8);
--background-secondary: rgb(5, 5, 5);
--background-secondary-alt: rgb(15, 15, 15);
--background-tertiary: black;
--background-accent: rgb(15, 15, 15);
--background-floating: black;
--userarea-background: var(--background-tertiary);
--header-primary: #fff;
--header-secondary: #b9bbbe;
--elevation-low: 0 1px 0 rgba(40, 40, 50, 0.2), 0 1.5px 0 rgba(60, 60, 70, 0.05), 0 2px 0 rgba(40, 40, 50, 0.05);
--elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
--channels-default: #969696;
--channeltextarea-background: rgb(25, 25, 25);
--guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
--activity-card-background: #0f0f0f;
--interactive-normal: #b9bbbe;
--interactive-hover: #dcddde;
--interactive-active: #fff;
--interactive-muted: rgb(75, 75, 75);
--background-modifier-hover: rgba(50, 50, 50, 0.16);
--background-modifier-active: rgba(50, 50, 50, 0.24);
--background-modifier-selected: rgba(50, 50, 50, 0.32);
--background-modifier-accent: hsla(0, 0%, 100%, 0.06);
--text-link: #00b0f4;
--text-normal: #dcddde;
--text-muted: #969696;
--deprecated-panel-background: #292b2f;
--deprecated-card-bg: rgba(32, 34, 37, 0.6);
--deprecated-card-editable-bg: rgba(32, 34, 37, 0.3);
--deprecated-store-bg: #36393f;
--deprecated-quickswitcher-input-background: #72767d;
--deprecated-quickswitcher-input-placeholder: hsla(0, 0%, 100%, 0.3);
--deprecated-text-input-bg: rgba(0, 0, 0, 0.1);
--deprecated-text-input-border: rgba(0, 0, 0, 0.3);
--deprecated-text-input-border-hover: #040405;
--deprecated-text-input-border-disabled: #202225;
--deprecated-text-input-prefix: #dcddde;
--background-accent-1: rgb(15, 15, 15, 0.1);
--background-accent-3: rgb(15, 15, 15, 0.3);
--background-floating-2: rgba(0, 0, 0, 0.2);
}
replace the import with the compiled source you edited
I need would need something like radnotred.github.io//src/support/betterdiscord/compiled.css page for that right
you can do that too, you have to enable github pages for that to work
otherwise, just use https://raw.githubusercontent.com/RadNotRed/amoled-cord/main/src/support/betterdiscord/compiled.css
I would delete this part right Because after i deleted that, the theme just doesnt work
z-index: 1005;
content: "Your version of AMOLED-Cord is out of date. \a\aPlease head over to https://github.com/LuckFire/amoled-cord and redownload the theme.";
white-space: pre-wrap;
position: absolute;
right: 15px;
bottom: 15px;
max-width: 285px;
padding: 15px 0 15px 80px;
border-radius: 5px;
border-left: 4px solid #ed4245;
font-weight: 500;
color: var(--text-normal);
background: rgba(25, 25, 25);
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZWQ0MjQ1IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNNC40NyAyMWgxNS4wNmMxLjU0IDAgMi41LTEuNjcgMS43My0zTDEzLjczIDQuOTljLS43Ny0xLjMzLTIuNjktMS4zMy0zLjQ2IDBMMi43NCAxOGMtLjc3IDEuMzMuMTkgMyAxLjczIDN6TTEyIDE0Yy0uNTUgMC0xLS40NS0xLTF2LTJjMC0uNTUuNDUtMSAxLTFzMSAuNDUgMSAxdjJjMCAuNTUtLjQ1IDEtMSAxem0xIDRoLTJ2LTJoMnYyeiIvPjwvc3ZnPg==);
background-repeat: no-repeat;
background-size: 55px;
background-position: 12px center;
}
#app-mount .scrollerBase-289Jih.disableScrollAnchor-3V9UtP::-webkit-scrollbar-thumb,
#app-mount .scrollerBase-289Jih.auto-Ge5KZx::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
}
#app-mount .scrollerBase-289Jih.disableScrollAnchor-3V9UtP::-webkit-scrollbar-track,
#app-mount .scrollerBase-289Jih.auto-Ge5KZx::-webkit-scrollbar-track {
background-color: var(--background-modifier-accent);
}
#app-mount .scrollerBase-289Jih.thin-1ybCId::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
}
#app-mount .rolesList-22qj2L::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
}
#app-mount .spoilerText-3p6IlD {
background-color: rgba(255, 255, 255, 0.15);
}```
nevermind im just really dumb and i forgot to turn on the theme............
thanks for your help
here, just use this:
/**
* @name AMOaLED-Cord
* @version 1.1.1
* @description A theme that's nice on your eyes.. lights out baby!
* @author LuckFire#4800
*
* @website https://github.com/LuckFire
* @source https://github.com/LuckFire/amoled-cord/tree/main/src
**/
:root {
/* --------- BASE THEME --------- */
--blurple-replace: #7289DA;
--background-primary: rgb(8, 8, 8);
--background-secondary: rgb(5, 5, 5);
--background-secondary-alt: rgb(15, 15, 15);
--background-tertiary: black;
--background-accent: rgb(15, 15, 15);
--background-floating: black;
--userarea-background: var(--background-tertiary);
--header-primary: #fff;
--header-secondary: #b9bbbe;
--elevation-low: 0 1px 0 rgba(40, 40, 50, 0.2), 0 1.5px 0 rgba(60, 60, 70, 0.05), 0 2px 0 rgba(40, 40, 50, 0.05);
--elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);
--channels-default: #969696;
--channeltextarea-background: rgb(25, 25, 25);
--guild-header-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
--activity-card-background: #0f0f0f;
--interactive-normal: #b9bbbe;
--interactive-hover: #dcddde;
--interactive-active: #fff;
--interactive-muted: rgb(75, 75, 75);
--background-modifier-hover: rgba(50, 50, 50, 0.16);
--background-modifier-active: rgba(50, 50, 50, 0.24);
--background-modifier-selected: rgba(50, 50, 50, 0.32);
--background-modifier-accent: hsla(0, 0%, 100%, 0.06);
--text-link: #00b0f4;
--text-normal: #dcddde;
--text-muted: #969696;
--deprecated-panel-background: #292b2f;
--deprecated-card-bg: rgba(32, 34, 37, 0.6);
--deprecated-card-editable-bg: rgba(32, 34, 37, 0.3);
--deprecated-store-bg: #36393f;
--deprecated-quickswitcher-input-background: #72767d;
--deprecated-quickswitcher-input-placeholder: hsla(0, 0%, 100%, 0.3);
--deprecated-text-input-bg: rgba(0, 0, 0, 0.1);
--deprecated-text-input-border: rgba(0, 0, 0, 0.3);
--deprecated-text-input-border-hover: #040405;
--deprecated-text-input-border-disabled: #202225;
--deprecated-text-input-prefix: #dcddde;
--background-accent-1: rgb(15, 15, 15, 0.1);
--background-accent-3: rgb(15, 15, 15, 0.3);
--background-floating-2: rgba(0, 0, 0, 0.2);
}
@import url("https://luckfire.github.io/theme-source/src/css-compile/ThemeSource-Compiled.css");
@import url("https://nyri4.github.io/Discolored/main.css");
@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");
#app-mount .scrollerBase-289Jih.disableScrollAnchor-3V9UtP::-webkit-scrollbar-thumb,
#app-mount .scrollerBase-289Jih.auto-Ge5KZx::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
}
#app-mount .scrollerBase-289Jih.disableScrollAnchor-3V9UtP::-webkit-scrollbar-track,
#app-mount .scrollerBase-289Jih.auto-Ge5KZx::-webkit-scrollbar-track {
background-color: var(--background-modifier-accent);
}
#app-mount .scrollerBase-289Jih.thin-1ybCId::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
}
#app-mount .rolesList-22qj2L::-webkit-scrollbar-thumb {
background-color: rgba(255, 255, 255, 0.2);
}
#app-mount .spoilerText-3p6IlD {
background-color: rgba(255, 255, 255, 0.15);
}
/* Colored User Connections */
.connectedAccount-36nQx7 {
background-color: transparent;
border: none;
}
.connectedAccount-36nQx7 .connectedAccountNameInner-1phBvE::after {
content: "";
position: absolute;
border-radius: 2px;
border: solid 1px transparent;
margin-left: -40px;
height: 46px;
width: 260px;
}
.connectedAccount-36nQx7 .connectedAccountVerifiedIcon-3aZz_K .flowerStar-1GeTsn path {
fill: rgba(255, 255, 255, 0.25);
}
.connectedAccount-36nQx7 .connectedAccountVerifiedIcon-3aZz_K .childContainer-1wxZNh {
margin-top: 1px;
}
.connectedAccount-36nQx7 .connectedAccountIcon-3P3V6F,
.connectedAccount-36nQx7 .connectedAccountName-f8AEe2,
.connectedAccount-36nQx7 .connectedAccountNameInner-1phBvE span,
.connectedAccount-36nQx7 .connectedAccountNameInner-1phBvE + .anchor-3Z-8Bb {
z-index: 1;
}
.connectedAccount-36nQx7 .connectedAccountIcon-3P3V6F {
margin-left: 2px;
}
[alt="GitHub Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #181b1f;
border-color: #d9dadb;
}
[alt="Twitch Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #3A2E5E;
border-color: #563194;
}
[alt="Steam Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #171a21;
border-color: #2a475e;
}
[alt="Spotify Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #2C523E;
border-color: #1ED760;
}
[alt="Twitter Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #266994;
border-color: #1DA1F2;
}
[alt="Reddit Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #7D442A;
border-color: #FF6314;
}
[alt="YouTube Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #772528;
border-color: #EE0F0F;
}
[alt="Battle.net Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #264659;
border-color: #009AE4;
}
[alt="Xbox Live Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #394E31;
border-color: #5DC21E;
}
[alt="Facebook Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #14223d;
border-color: #3A5998;
}
[alt="League of Legends Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #424491;
border-color: #676AE6;
}
[alt="Skype Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #106d8f;
border-color: #00AAE8;
}
[alt="GitLab Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #6E4330;
border-color: #FC6D26;
}
[alt="Minecraft Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #693037;
border-color: #EE303D;
}
[alt="osu! Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #5F3E51;
border-color: #EE65A2;
}
[alt="discord.bio Logo"] + .connectedAccountNameInner-1phBvE::after {
background: #3d4870;
border-color: #7289da;
}
/* USRBG Support */
.userPopout-3XzG_A .header-2BwW8b {
transform: translateZ(0);
}
.userPopout-3XzG_A .wrapper-3t9DeA::after {
content: "";
position: fixed;
top: 0 !important;
left: 0 !important;
width: 100%;
height: 100%;
z-index: -1;
pointer-events: none;
opacity: 0.5;
background-size: cover;
background-repeat: no-repeat;
background-position: var(--user-popout-position) center;
background-image: var(--user-background);
}
.root-SR8cQa > div:not(.body-3ND3kc) {
transform: translateZ(0);
}
.root-SR8cQa > div:not(.body-3ND3kc) .header-QKLPzZ .wrapper-3t9DeA::after {
content: "";
position: fixed;
top: 0 !important;
left: 0 !important;
width: 100%;
height: 100%;
opacity: 0.5;
z-index: 0 !important;
pointer-events: none;
background: var(--user-background) center/cover no-repeat;
}
.root-SR8cQa > div:not(.body-3ND3kc) .header-QKLPzZ .wrapper-3t9DeA svg {
z-index: 1;
position: relative;
}
.root-SR8cQa > div:not(.body-3ND3kc) .headerInfo-30uryT, .root-SR8cQa > div:not(.body-3ND3kc) .tabBarItem-1b8RUP, .root-SR8cQa > div:not(.body-3ND3kc) .activity-1ythUs {
z-index: 1;
position: relative;
}
/* Color Filled Roles */
#app-mount .role-2irmRk {
position: relative;
overflow: hidden;
border: 0;
z-index: 0;
padding: 5px;
}
#app-mount .role-2irmRk .roleCircle-3xAZ1j::after {
content: "";
position: absolute;
background: inherit;
z-index: -1;
width: 100%;
height: 100%;
left: 0;
opacity: 0.25;
}
#app-mount .role-2irmRk.addButton-pcyyf6 {
background-color: rgba(125, 125, 125, 0.25);
}
/* Light Theme Warning */
html.theme-light #app-mount::after {
content: "You need to have dark theme enabled for this theme to work properly. To enable it, go into Settings -> Appearance";
background: var(--background-tertiary);
/* Container color */
position: fixed;
z-index: 5;
right: 0;
bottom: 0;
display: flex;
align-items: center;
max-width: 225px;
line-height: normal;
padding: 15px 0 15px 60px;
margin-right: 10px;
margin-bottom: 10px;
border-left: 2px solid #F04747;
border-radius: 2px;
color: rgba(255, 255, 255, 0.65);
/* Text Color */
background-image: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMSAyMWgyMkwxMiAyIDEgMjF6bTEyLTNoLTJ2LTJoMnYyem0wLTRoLTJ2LTRoMnY0eiIvPjwvc3ZnPg==");
background-repeat: no-repeat;
background-size: 35px;
background-position: 10px center;
}
/* AMOLED-Cord Watermark */
.titleBar-AC4pGV.typeWindows-1za-n7::after {
content: "";
position: absolute;
pointer-events: none;
background: url('data:image/svg+xml;utf8,<svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="moon" class="svg-inline--fa fa-moon fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="white" d="M279.135 512c78.756 0 150.982-35.804 198.844-94.775 28.27-34.831-2.558-85.722-46.249-77.401-82.348 15.683-158.272-47.268-158.272-130.792 0-48.424 26.06-92.292 67.434-115.836 38.745-22.05 28.999-80.788-15.022-88.919A257.936 257.936 0 0 0 279.135 0c-141.36 0-256 114.575-256 256 0 141.36 114.576 256 256 256zm0-464c12.985 0 25.689 1.201 38.016 3.478-54.76 31.163-91.693 90.042-91.693 157.554 0 113.848 103.641 199.2 215.252 177.944C402.574 433.964 344.366 464 279.135 464c-114.875 0-208-93.125-208-208s93.125-208 208-208z"></path></svg>') center/100% no-repeat;
width: 16px;
height: 16px;
left: 5px;
top: 3px;
}
.titleBar-AC4pGV .wordmark-2iDDfm svg {
width: 0;
}
.titleBar-AC4pGV .wordmark-2iDDfm::after {
content: "AMOLED-Cord";
position: absolute;
font-family: "Fredoka One";
background: white;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 13px;
font-weight: 550;
top: 5px;
left: 25px;
width: 135px;
}
oh nvm kek
oops sorry for making you do that lol
oh, and also, the @ place is fully gray on both versions for me
thanks for pointing that out, ill be sure to theme it in the new version.
also a good note: please know that i will not be maintaining the old version of it, so anything broken will be up to you to fix sadly.
all good, ill might end up using the new theme if the colors get adjusted to be a little bit darker
i'm currently in the process of doing that, so be sure to check back soon (probably later today, it'll take a while to change literally everything)
ill make sure to do so, thanks for making the awesome themes have a nice day
atm this is what i have, please give any feedback that you have
thats much better than what it is currently, I do think that the background should stay at #080808 like the original, because it allows to see the fully black role colors as well but that's just my opinion on it full black works perfectly fine
pushed the change with different colors, please check it out and tell me what you think
Colors here do not work (check marks and x's)
here doesn't work either
they are much better than before though
that stuff should be fixed now
Highlighting doesnt work when you hover over a message
fixed as well
all good now, ill lyk if anything else is wrong
awesome
found one
fixed
this part is still bugged for me
it'll take a bit to update probably since it's using an import
all good, and im not sure if this is right (the role color background) i dont remember how it looked on v1
also, would this bottom bit be possible to be made black, it feels out of place being that color
Unreads box broken (mentions is fine..?)
this part as well, might be one of my custom CSS though
Unreads box broken (mentions is fine..?)
fixed
also, would this bottom bit be possible to be made black, it feels out of place being that color
put the below in your quick css cause i made that change because some people rather have it noticeable
.panels-j1Uci_ {
background-color: var(--background-base);
}
this part as well, might be one of my custom CSS though
this is most definitely on your end
this is most definitely on your end
all good thanks
ffs github
pfft
the colors are very much better now! good job
Is there a way to just go back to v1 coloring where it was all black and not this black-gray stuff