Question：the document site only have darkness theme
cnmade opened this issue · 5 comments
https://aantron.github.io/dream/
The document site only contains darkness theme.
Why not there be a light version theme.
I do not very comfortable with darkness.
But i have no idea may we have a light theme.
I won't have time to develop a light theme myself in the immediate term, but I would be happy to merge a PR for it. One thing to note is we might not want to have a theme switcher that stores the theme preference in a cookie, as the docs page is meant to also be viewable offline, in principle.
Another project I maintain, Bisect_ppx, has both light and dark themes and selects one based on the theme preferences of the user's browser, or a command-line switch. An example site with that is here and the relevant CSS is here for reference:
:root, .light:root {
--main-background: #fff;
--code-background: transparent;
--line-numbers-background: rgba(0, 0, 0, 0.025);
--navbar-background: #eee;
--meter-unvisited-color: #f9c3c3;
--meter-visited-color: #9ed09f;
--meter-separator-color: white;
--color: #000;
--dirname-color: #bbb;
--stats-color: #aaa;
--underline-color: #ddd;
--visited-color: #eaffea;
--visited-number-color: rgba(64, 192, 64, 0.2);
--unvisited-color: #ffecec;
--unvisited-number-color: rgba(255, 128, 128, 0.5);
--somevisited-color: #ffd;
--highlight-color: #a0fbff;
--line-number-color: rgba(0, 0, 0, 0.4);
--unvisited-margin-color: #d69e9e;
--border: #eee;
--navbar-border: #ddd;
--code-color: #000;
--hljs-link: #6a737d;
--hljs-keyword: #d73a49;
--hljs-regexp: #032f62;
--hljs-title: #900;
--hljs-type: #6f42c1;
--hljs-meta: #22863a;
--hljs-variable: #005cc5;
}
.dark:root {
--main-background: #202020;
--code-background: #222;
--line-numbers-background: rgba(0, 0, 0, 0.125);
--navbar-background: #202020;
--meter-unvisited-color: #622;
--meter-visited-color: #252;
--meter-separator-color: black;
--color: #bebebe;
--dirname-color: #666;
--stats-color: #555;
--underline-color: #444;
--visited-color: #002800;
--visited-number-color: #252;
--unvisited-color: #380000;
--unvisited-number-color: #822;
--somevisited-color: #303000;
--highlight-color: #303e3f;
--line-number-color: rgba(230, 230, 230, 0.3);
--unvisited-margin-color: #622;
--border: #333;
--navbar-border: #333;
--code-color: #ccc;
--hljs-link: #999;
--hljs-keyword: #cda869;
--hljs-regexp: #f9ee98;
--hljs-title: #dcdcaa;
--hljs-type: #ac885b;
--hljs-meta: #82aaff;
--hljs-variable: #cf6a4c;
}
@media (prefers-color-scheme: dark) {
:root {
--main-background: #202020;
--code-background: #222;
--line-numbers-background: rgba(0, 0, 0, 0.125);
--navbar-background: #202020;
--meter-unvisited-color: #622;
--meter-visited-color: #252;
--meter-separator-color: black;
--color: #bebebe;
--dirname-color: #666;
--underline-color: #444;
--visited-color: #002800;
--visited-number-color: #252;
--unvisited-color: #380000;
--unvisited-number-color: #822;
--somevisited-color: #303000;
--highlight-color: #303e3f;
--line-number-color: rgba(230, 230, 230, 0.3);
--unvisited-margin-color: #622;
--border: #333;
--navbar-border: #333;
--code-color: #ccc;
--hljs-link: #999;
--hljs-keyword: #cda869;
--hljs-regexp: #f9ee98;
--hljs-title: #dcdcaa;
--hljs-type: #ac885b;
--hljs-meta: #82aaff;
--hljs-variable: #cf6a4c;
}
}I'm going to close this issue to get it out of the tracker. I would still be happy to merge a PR, if anyone wants to play around with this. Hopefully the CSS snippets give enough hints of how this could be done.
great works