atchan currently has four themes - modified version of the famous yotsuba-b and a, which dark mode variants. they're used on h and non-h boards respectively, and depend on your system/browser's color mode.
a theme feature is in the works which will allow you to select different themes depending on your preference. with this in mind, it would be nice to have some user submitted themes as well.
in your browser's inspector, you can select the <html> tag and edit the following variables to see what they map to (hopefully it is self explanatory).
/* yotsuba-b */
:root {
--color-text: #08082b;
--color-muted: #535364;
--color-page-bg: #f5f5ff;
--color-post-bg: #d6daf0;
--color-post-border: #b7c5d9;
--color-post-highlight: #c5caf4;
--color-input-bg: white;
--color-border: #a1afc5;
--color-border-active: #838a97;
--color-button-bg: #f3f3f6;
--color-button-active-bg: #e4e4e8;
--color-subject: #0f0c5d;
--color-name: #0c6338;
--color-admin: #93299d;
--color-quote: #1a7a2e;
--color-ref: #333387;
--color-ref-dead: #5a5a5a;
--color-danger: #c00;
--color-anchor: #333387;
--color-anchor-visited: #9e08ab;
--color-anchor-hover: #d00;
--color-accent: #0059ff;
}you can use stylus or similar browser extensions to make these persistent as you work. making themes is an iterative process.
submit your themes in this thread using the new code fence (```) feature, along with a name. the best ones will be added to the theme picker.
both light and dark themes welcome!
here is an example dark theme to build on:
:root {
--color-text: #c9cfe4;
--color-muted: #989fba;
--color-page-bg: #0f131c;
--color-post-bg: #202841;
--color-post-border: #4e5c80;
--color-post-highlight: #283149;
--color-input-bg: #171b28;
--color-border: #3e465f;
--color-border-active: #5a6588;
--color-button-bg: #242b3f;
--color-button-active-bg: #343d59;
--color-subject: #7394e3;
--color-name: #7bc48b;
--color-admin: #c99ad9;
--color-quote: #8fbf7a;
--color-ref: #8fb2f0;
--color-ref-dead: #6b7288;
--color-danger: #e37777;
--color-anchor: #8fb2f0;
--color-anchor-visited: #bd9ae0;
--color-anchor-hover: #ff9f9f;
--color-accent: #c9cfe4;
}pink theme!
/* yasuho */
:root {
--color-text: #190c2d;
--color-muted: #56465b;
--color-page-bg: #ffb0e1;
--color-post-bg: #ffdef7;
--color-post-border: #fb8dea;
--color-post-highlight: #f8b7e5;
--color-input-bg: ffecfa;
--color-border: #ee86de;
--color-border-active: #f16edd;
--color-button-bg: #ffeff7;
--color-button-active-bg: #f7c2d4;
--color-subject: #a74b8a;
--color-name: #1ec9c4;
--color-admin: #7583e6;
--color-quote: #40d2f1;
--color-ref: #e02f6c;
--color-ref-dead: #a75e98;
--color-danger: #ff00e6;
--color-anchor: #b8506f;
--color-anchor-visited: #924199;
--color-anchor-hover: #ff3d75;
--color-accent: #ff3582;
\red and green theme
/* BEST THEME */
:root {
--color-text: #2ed73a;
--color-muted: #116000;
--color-page-bg: #168500;
--color-post-bg: #073c00;
--color-post-border: #f80000;
--color-post-highlight: #042500;
--color-input-bg: #073c00;
--color-border: #116000;
--color-border-active: #2ed73a;
--color-button-bg: #f80000;
--color-button-active-bg: #c80000;
--color-subject: #f80000;
--color-name: #f80000;
--color-admin: #e9dfd2;
--color-quote: #116000;
--color-ref: #f80000;
--color-ref-dead: #c80000;
--color-danger: #e9dfd2;
--color-anchor: #f80000;
--color-anchor-visited: #c80000;
--color-anchor-hover: #c80000;
--color-accent: #e9dfd2;
}>>3ms3b55seyq2z
>>3ms536fnrpa2z
respectfully guys. these aren't very readable
i realize one of you are joking but im looking for serious submissions. all colors should be easy to look at and text should have a good contrast ratio to the bg color in all cases. if you cannot hack it please dont submit spam ヽ(`Д´)ノ
/* mint */
:root {
--color-text: #244;
--color-muted: #597373;
--color-page-bg: #e4eeeb;
--color-post-bg: #cbddd8;
--color-post-border: #9ab7af;
--color-post-highlight: #f2faf8;
--color-input-bg: #f2faf8;
--color-border: #9ab7af;
--color-border-active: #008080;
--color-button-bg: #e0ebe9;
--color-button-active-bg: #d2dddb;
--color-subject: #133;
--color-name: #266691;
--color-admin: #93299d;
--color-quote: #008080;
--color-ref: #355;
--color-ref-dead: #597373;
--color-danger: #c00;
--color-anchor: #036060;
--color-anchor-visited: #355;
--color-anchor-hover: #00a;
--color-accent: #008080;
}/* craigslist */
:root {
--color-text: #222;
--color-muted: #888;
--color-page-bg: #fff;
--color-post-bg: #eee;
--color-post-border: #ddd;
--color-post-highlight: #ffc;
--color-input-bg: #fff;
--color-border: #ccc;
--color-border-active: #888;
--color-button-bg: #eee;
--color-button-active-bg: #ddd;
--color-subject: #222;
--color-name: #000;
--color-admin: #800080;
--color-quote: #090;
--color-ref: #00e;
--color-ref-dead: #666;
--color-danger: #c00;
--color-anchor: #00e;
--color-anchor-visited: #800080;
--color-anchor-hover: #0000B3;
--color-accent: #00e;
}hopefully better
/* BEST THEME */
:root {
--color-text: #2ed73a;
--color-muted: #1a8d00;
--color-page-bg: #021100;
--color-post-bg: #042500;
--color-post-border: #f80000;
--color-post-highlight: #1b251a;
--color-input-bg: #042500;
--color-border: #116000;
--color-border-active: #2ed73a;
--color-button-bg: #042500;
--color-button-active-bg: #021100;
--color-subject: #e9dfd2;
--color-name: #f6c500;
--color-admin: #06b6ff;
--color-quote: #e9dfd2;
--color-ref: #f80000;
--color-ref-dead: #c80000;
--color-danger: #f6c500;
--color-anchor: #f80000;
--color-anchor-visited: #e24e4e;
--color-anchor-hover: #e9dfd2;
--color-accent: #f80000;
}green theme
/* sage */
:root {
--color-text: #2b3428;
--color-muted: #535364;
--color-page-bg: #CBD5C0;
--color-post-bg: #DFE6DA;
--color-post-border: #bec4ba;
--color-post-highlight: #d7f3ce;
--color-input-bg: #f3f3f6;
--color-border: #bec4ba;
--color-border-active: #838a97;
--color-button-bg: #f3f3f6;
--color-button-active-bg: #e4e4e8;
--color-subject: #051a38;
--color-name: #1b4900;
--color-admin: #6C1D72;
--color-quote: #0D441A;
--color-ref: #304563;
--color-ref-dead: #5a5a5a;
--color-danger: #c00;
--color-anchor: #333387;
--color-anchor-visited: #1C4521;
--color-anchor-hover: #d00;
--color-accent: #003DAD;
}i couldnt see --color-accent or -admin anywhere on the site so i just sort of winged it for those contrast wise. but grene theme
that's more like it. good job all!
>>3ms5tjfabka2z
>i couldnt see --color-accent or -admin anywhere on the site---color-admin you can see a few posts in /meta/ that has it. --color-accent is the color of checkbox selects and the tab outline
/* OLED Black */
:root {
--color-text: white;
--color-muted: grey;
--color-page-bg: black;
--color-post-bg: #131313;
--color-post-border: #303030;
--color-post-highlight: #262626;
--color-input-bg: black;
--color-border: #303030;
--color-border-active: #838a97;
--color-button-bg: #303030;
--color-button-active-bg: #474747;
--color-subject: #c7c7ff;
--color-name: #24aa40;
--color-admin: #c137ce;
--color-quote: #24aa40;
--color-ref: #c7c7ff;
--color-ref-dead: #5a5a5a;
--color-danger: #c66363;
--color-anchor: #c7c7ff;
--color-anchor-visited: #d34edd;
--color-anchor-hover: #c66363;
--color-accent: #c7c7ff;
}i will try and find some time soon to implement this. been busy with other shit (*ﾟ∀ﾟ)
/* meow */
:root {
--color-text: #2b3428;
--color-muted: #535364;
--color-page-bg: #e8eef2;
--color-post-bg: #eed4d4;
--color-post-border: #e88083;
--color-post-highlight: #f3cece;
--color-input-bg: #f3f3f6;
--color-border: #0026f0;
--color-border-active: #838a97;
--color-button-bg: #f3f3f6;
--color-button-active-bg: #e4e4e8;
--color-subject: #221eea;
--color-name: #dd1616;
--color-admin: #1223dd;
--color-quote: #424953;
--color-ref: #2d4464;
--color-ref-dead: #ae9090;
--color-danger: #c00;
--color-anchor: #1616d0;
--color-anchor-visited: #000eee;
--color-anchor-hover: #d00;
--color-accent: #000ead;
}Sign in to reply.