I, quite simply, want to create a legitimate dark mode them with darker text and a grayscale background, but I have no clue how to use the custom CSS on my own and even if I did, whatever the elements are supposed to be or whatever something something I don't know how to get the EDITABLE STYLISTIC ONES and whether to use, like, border-color or background-color or just color. Can I have some pointers here? I already searched around and the only thing I could find in the way of stylistic data values was some dude creating a "dark mode" theme, but it was only applicable to the forum page and the navbar. What am I supposed to do here? I'm on mobile so I can't use inspect element, and I even tried on my pc and had an EXTREMELY hard time finding anything useful, because I don't know CSS and HTML.
Topic: How do I know what classes to use in my custom CSS
Posted under General
you're just going to mess with colors and just want to do a dark mode, probably just use bloodlust theme variables as a jumping off point. most of the colors on the site should be controlled with these values when you're in this theme:
body[data-th-main=bloodlust]{
--color-background:#000;
--color-foreground:#222;
--color-section:#333;
--color-section-lighten-5:#404040;
--color-section-lighten-10:#4d4d4d;
--color-section-darken-5:#262626;
--color-table-border:#222;
--color-section-pending:#333;
--color-section-pending-border:#000;
--color-text:#fff;
--color-text-muted:#999;
--color-text-table-header:#e6e6e6;
--color-link:#ffee95;
--color-link-hover:#f68b00;
--color-link-active:#fff;
--color-button-active:#e8c446;
--color-link-last-page:#999;
--color-active-tag:#222;
--color-dtext-quote:#67717b;
--color-dtext-section:#427982;
--color-user-member:#ffee95;
--color-user-member-alt:#f68b00;
--color-user-privileged:#ffee95;
--color-user-privileged-alt:#f68b00;
--color-user-blocked:#ffee95;
--color-user-blocked-alt:#f68b00;
--color-tag-general:#ffee95;
--color-tag-general-alt:#f68b00;
--color-spoiler-link:#ffee95;
--color-spoiler-link-hover:#f68b00
}for everything else (and everything in hexagon theme) here:
:root{
--palette-background-red:#76312e;
--palette-background-yellow:#827428;
--palette-background-green:#227d2a;
--palette-background-grey:#60686f;
--palette-background-red-d5:#642927;
--palette-background-yellow-d5:#6f6322;
--palette-background-green-d5:#1d6923;
--palette-background-grey-d5:#545b61;
--palette-text-white:#fff;
--palette-text-red:#fe6a64;
--palette-text-yellow:#ffd666;
--palette-text-green:#4caf50;
--palette-text-grey:#aaa;
--palette-plain-black:#000;
--palette-plain-green:#0f0;
--palette-plain-yellow:#cc0;
--palette-plain-blue:#00f;
--palette-plain-red:red
}
body{
--color-background:#020f23;
--color-foreground:#152f56;
--color-section:#1f3c67;
--color-section-lighten-5:#25477b;
--color-section-lighten-10:#2b538e;
--color-section-darken-5:#193153;
--color-table-border:#2b538e;
--color-section-pending:#1f3c67;
--color-section-pending-border:#020f23;
--color-text:#fff;
--color-text-muted:#999;
--color-text-white:#fff;
--color-text-table-header:#e6e6e6;
--color-link:#b4c7d9;
--color-link-hover:#e9f2fa;
--color-link-active:#e8c446;
--color-button-active:#e8c446;
--color-link-last-page:#666;
--color-success:#006400;
--color-success-darken-5:#004b00;
--color-danger:maroon;
--color-danger-darken-5:#670000;
--color-danger-darken-10:#4d0000;
--color-warning:sienna;
--color-warning-darken-5:#8c4827;
--color-rating-explicit:#e45f5f;
--color-rating-questionable:#ffe666;
--color-rating-safe:#3e9e49;
--color-score-positive:#3e9e49;
--color-score-negative:#e45f5f;
--color-active-tag:#006ffa;
--color-dtext-quote:#b4c7d9;
--color-dtext-code:#ffe380;
--color-dtext-section:#17a2b8;
--color-user-member:#b4c7d9;
--color-user-member-alt:#2e76b4;
--color-user-privileged:#b4c7d9;
--color-user-privileged-alt:#2e76b4;
--color-user-blocked:#b4c7d9;
--color-user-blocked-alt:#2e76b4;
--color-user-former-staff:#78dca5;
--color-user-former-staff-alt:#4da073;
--color-user-janitor:#d82828;
--color-user-janitor-alt:#cc5151;
--color-user-moderator:#d82828;
--color-user-moderator-alt:#cc5151;
--color-user-admin:#e69500;
--color-user-admin-alt:#9d6703;
--color-tag-general:#b4c7d9;
--color-tag-general-alt:#2e76b4;
--color-tag-artist:#f2ac08;
--color-tag-artist-alt:#fbd67f;
--color-tag-contributor:silver;
--color-tag-contributor-alt:#71706e;
--color-tag-copyright:#d0d;
--color-tag-copyright-alt:#ff5eff;
--color-tag-character:#0a0;
--color-tag-character-alt:#2bff2b;
--color-tag-species:#ed5d1f;
--color-tag-species-alt:#f6b295;
--color-tag-invalid:#ff3d3d;
--color-tag-invalid-alt:#ffbdbd;
--color-tag-meta:#fff;
--color-tag-meta-alt:#666;
--color-tag-lore:#282;
--color-tag-lore-alt:#5fdb5f;
--color-tag-pool:wheat;
--color-tag-pool-alt:#d0b27a;
--color-spoiler-link:#b4c7d9;
--color-spoiler-link-hover:#e9f2fa
}I will say I do not recommend trying to learn CSS on mobile, it's a nightmare. it's impossible to do inspect element, which is extremely useful, and you probably need to download a plugin to even view the HTML source, which is entirely necessary in almost all cases.
dba_afish said: ...
Gonna clarify something real quick.
The base theme is called hexagon, there's a full list of variables here: https://github.com/e621ng/e621ng/blob/master/app/javascript/src/styles/themes/_theme_hexagon.scss
Other themes override some of those variables, like the aforementioned bloodlust: https://github.com/e621ng/e621ng/blob/master/app/javascript/src/styles/themes/_theme_bloodlust.scss
If a theme does not include a certain variable, the value from hexagon is used.
I would not recommend touching the palette.
It does not need to be edited to alter the theme anyways.
dba_afish said:
you're just going to mess with colors and just want to do a dark mode, probably just use bloodlust theme variables as a jumping off point. most of the colors on the site should be controlled with these values when you're in this theme:body[data-th-main=bloodlust]{ --color-background:#000; --color-foreground:#222; --color-section:#333; --color-section-lighten-5:#404040; --color-section-lighten-10:#4d4d4d; --color-section-darken-5:#262626; --color-table-border:#222; --color-section-pending:#333; --color-section-pending-border:#000; --color-text:#fff; --color-text-muted:#999; --color-text-table-header:#e6e6e6; --color-link:#ffee95; --color-link-hover:#f68b00; --color-link-active:#fff; --color-button-active:#e8c446; --color-link-last-page:#999; --color-active-tag:#222; --color-dtext-quote:#67717b; --color-dtext-section:#427982; --color-user-member:#ffee95; --color-user-member-alt:#f68b00; --color-user-privileged:#ffee95; --color-user-privileged-alt:#f68b00; --color-user-blocked:#ffee95; --color-user-blocked-alt:#f68b00; --color-tag-general:#ffee95; --color-tag-general-alt:#f68b00; --color-spoiler-link:#ffee95; --color-spoiler-link-hover:#f68b00 }for everything else (and everything in hexagon theme) here:
:root{ --palette-background-red:#76312e; --palette-background-yellow:#827428; --palette-background-green:#227d2a; --palette-background-grey:#60686f; --palette-background-red-d5:#642927; --palette-background-yellow-d5:#6f6322; --palette-background-green-d5:#1d6923; --palette-background-grey-d5:#545b61; --palette-text-white:#fff; --palette-text-red:#fe6a64; --palette-text-yellow:#ffd666; --palette-text-green:#4caf50; --palette-text-grey:#aaa; --palette-plain-black:#000; --palette-plain-green:#0f0; --palette-plain-yellow:#cc0; --palette-plain-blue:#00f; --palette-plain-red:red } body{ --color-background:#020f23; --color-foreground:#152f56; --color-section:#1f3c67; --color-section-lighten-5:#25477b; --color-section-lighten-10:#2b538e; --color-section-darken-5:#193153; --color-table-border:#2b538e; --color-section-pending:#1f3c67; --color-section-pending-border:#020f23; --color-text:#fff; --color-text-muted:#999; --color-text-white:#fff; --color-text-table-header:#e6e6e6; --color-link:#b4c7d9; --color-link-hover:#e9f2fa; --color-link-active:#e8c446; --color-button-active:#e8c446; --color-link-last-page:#666; --color-success:#006400; --color-success-darken-5:#004b00; --color-danger:maroon; --color-danger-darken-5:#670000; --color-danger-darken-10:#4d0000; --color-warning:sienna; --color-warning-darken-5:#8c4827; --color-rating-explicit:#e45f5f; --color-rating-questionable:#ffe666; --color-rating-safe:#3e9e49; --color-score-positive:#3e9e49; --color-score-negative:#e45f5f; --color-active-tag:#006ffa; --color-dtext-quote:#b4c7d9; --color-dtext-code:#ffe380; --color-dtext-section:#17a2b8; --color-user-member:#b4c7d9; --color-user-member-alt:#2e76b4; --color-user-privileged:#b4c7d9; --color-user-privileged-alt:#2e76b4; --color-user-blocked:#b4c7d9; --color-user-blocked-alt:#2e76b4; --color-user-former-staff:#78dca5; --color-user-former-staff-alt:#4da073; --color-user-janitor:#d82828; --color-user-janitor-alt:#cc5151; --color-user-moderator:#d82828; --color-user-moderator-alt:#cc5151; --color-user-admin:#e69500; --color-user-admin-alt:#9d6703; --color-tag-general:#b4c7d9; --color-tag-general-alt:#2e76b4; --color-tag-artist:#f2ac08; --color-tag-artist-alt:#fbd67f; --color-tag-contributor:silver; --color-tag-contributor-alt:#71706e; --color-tag-copyright:#d0d; --color-tag-copyright-alt:#ff5eff; --color-tag-character:#0a0; --color-tag-character-alt:#2bff2b; --color-tag-species:#ed5d1f; --color-tag-species-alt:#f6b295; --color-tag-invalid:#ff3d3d; --color-tag-invalid-alt:#ffbdbd; --color-tag-meta:#fff; --color-tag-meta-alt:#666; --color-tag-lore:#282; --color-tag-lore-alt:#5fdb5f; --color-tag-pool:wheat; --color-tag-pool-alt:#d0b27a; --color-spoiler-link:#b4c7d9; --color-spoiler-link-hover:#e9f2fa }I will say I do not recommend trying to learn CSS on mobile, it's a nightmare. it's impossible to do inspect element, which is extremely useful, and you probably need to download a plugin to even view the HTML source, which is entirely necessary in almost all cases.
I'm just gonna try this and mess with the values a bit. I'm not exactly sure what Cinder is trying to tell me here but whether it works or not I'll report back here :/
I really just need a better theme for my eyes at night lol
Edit: oh I'm sorry would this even work in the custom CSS box?
Edit 2: yea it does work in the custom CSS box and now I just need to learn what all the data values MEAN. I got the backgrounds and primary text changed, that's for sure
Edit 3: Apparently forum posts don't have the same theme as the dtext classes
Updated
darkninja147 said:
Edit 3: Apparently forum posts don't have the same theme as the dtext classes
umm... it is forum-post, but they're also all comment-post-grid, which is the universal one that's used for all user messages...
you mentioned someone having a dark mode theme that only worked on forum posts did you still have that in your CSS box? it might be overwriting any changes you make elsewhere.
dba_afish said: umm... it is forum-post, but they’re also all comment-post-grid, which is the universal one that’s used for all user messages... you mentioned someone having a dark mode theme that only worked on forum posts did you still have that in your CSS box? it might be overwriting any changes you make elsewhere.
I did try adding it after putting in the hexagon bit and changing things around and found out very quickly that it looked awful with both of them at once, so I removed a couple elements at a time until the code was no longer there… yeah, I’m still missing a lot of things. Drop-downs, quotes, collapses all still look blue.
Edit: sorry if I'm making no sense whatsoever. I don't quite know how to put a lot of this. And the dark mode thing I found was here
I just realized that I didn't confirm that you're aware of the existing themes before trying to get you to edit them.
dba_afish said:
you're just going to mess with colors and just want to do a dark mode, probably just use bloodlust theme variables as a jumping off point. most of the colors on the site should be controlled with these values when you're in this theme:body[data-th-main=bloodlust]{ --color-background:#000; --color-foreground:#222; --color-section:#333; --color-section-lighten-5:#404040; --color-section-lighten-10:#4d4d4d; --color-section-darken-5:#262626; --color-table-border:#222; --color-section-pending:#333; --color-section-pending-border:#000; --color-text:#fff; --color-text-muted:#999; --color-text-table-header:#e6e6e6; --color-link:#ffee95; --color-link-hover:#f68b00; --color-link-active:#fff; --color-button-active:#e8c446; --color-link-last-page:#999; --color-active-tag:#222; --color-dtext-quote:#67717b; --color-dtext-section:#427982; --color-user-member:#ffee95; --color-user-member-alt:#f68b00; --color-user-privileged:#ffee95; --color-user-privileged-alt:#f68b00; --color-user-blocked:#ffee95; --color-user-blocked-alt:#f68b00; --color-tag-general:#ffee95; --color-tag-general-alt:#f68b00; --color-spoiler-link:#ffee95; --color-spoiler-link-hover:#f68b00 }for everything else (and everything in hexagon theme) here:
:root{ --palette-background-red:#76312e; --palette-background-yellow:#827428; --palette-background-green:#227d2a; --palette-background-grey:#60686f; --palette-background-red-d5:#642927; --palette-background-yellow-d5:#6f6322; --palette-background-green-d5:#1d6923; --palette-background-grey-d5:#545b61; --palette-text-white:#fff; --palette-text-red:#fe6a64; --palette-text-yellow:#ffd666; --palette-text-green:#4caf50; --palette-text-grey:#aaa; --palette-plain-black:#000; --palette-plain-green:#0f0; --palette-plain-yellow:#cc0; --palette-plain-blue:#00f; --palette-plain-red:red } body{ --color-background:#020f23; --color-foreground:#152f56; --color-section:#1f3c67; --color-section-lighten-5:#25477b; --color-section-lighten-10:#2b538e; --color-section-darken-5:#193153; --color-table-border:#2b538e; --color-section-pending:#1f3c67; --color-section-pending-border:#020f23; --color-text:#fff; --color-text-muted:#999; --color-text-white:#fff; --color-text-table-header:#e6e6e6; --color-link:#b4c7d9; --color-link-hover:#e9f2fa; --color-link-active:#e8c446; --color-button-active:#e8c446; --color-link-last-page:#666; --color-success:#006400; --color-success-darken-5:#004b00; --color-danger:maroon; --color-danger-darken-5:#670000; --color-danger-darken-10:#4d0000; --color-warning:sienna; --color-warning-darken-5:#8c4827; --color-rating-explicit:#e45f5f; --color-rating-questionable:#ffe666; --color-rating-safe:#3e9e49; --color-score-positive:#3e9e49; --color-score-negative:#e45f5f; --color-active-tag:#006ffa; --color-dtext-quote:#b4c7d9; --color-dtext-code:#ffe380; --color-dtext-section:#17a2b8; --color-user-member:#b4c7d9; --color-user-member-alt:#2e76b4; --color-user-privileged:#b4c7d9; --color-user-privileged-alt:#2e76b4; --color-user-blocked:#b4c7d9; --color-user-blocked-alt:#2e76b4; --color-user-former-staff:#78dca5; --color-user-former-staff-alt:#4da073; --color-user-janitor:#d82828; --color-user-janitor-alt:#cc5151; --color-user-moderator:#d82828; --color-user-moderator-alt:#cc5151; --color-user-admin:#e69500; --color-user-admin-alt:#9d6703; --color-tag-general:#b4c7d9; --color-tag-general-alt:#2e76b4; --color-tag-artist:#f2ac08; --color-tag-artist-alt:#fbd67f; --color-tag-contributor:silver; --color-tag-contributor-alt:#71706e; --color-tag-copyright:#d0d; --color-tag-copyright-alt:#ff5eff; --color-tag-character:#0a0; --color-tag-character-alt:#2bff2b; --color-tag-species:#ed5d1f; --color-tag-species-alt:#f6b295; --color-tag-invalid:#ff3d3d; --color-tag-invalid-alt:#ffbdbd; --color-tag-meta:#fff; --color-tag-meta-alt:#666; --color-tag-lore:#282; --color-tag-lore-alt:#5fdb5f; --color-tag-pool:wheat; --color-tag-pool-alt:#d0b27a; --color-spoiler-link:#b4c7d9; --color-spoiler-link-hover:#e9f2fa }I will say I do not recommend trying to learn CSS on mobile, it's a nightmare. it's impossible to do inspect element, which is extremely useful, and you probably need to download a plugin to even view the HTML source, which is entirely necessary in almost all cases.
Oof that would've been a nice warning
dba_afish said: I just realized that I didn’t confirm that you’re aware of the existing themes before trying to get you to edit them.
I very well know, but they’re all quite harsh on my eyes sometimes. Imma look on the GitHub theme page that Cinder listed and see if i can find these “comment grid” values that you speak of
Updated
Thanks for the help dba_afish, I finally got a custom CSS working now, it's on my profile :)