New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Implement dark mode on homepage and tutorial search page #2069
Conversation
@sabine i really don't know where tutorial_search.eml appears on the website so I only changed the legacy colours I am familiar with, maybe you can please point me to it. Thank you. |
It is here: https://ocaml.org/docs/search?q=function People arrive there from the documentation search bar. |
I don't think this tertiary colour looks good on an orange text for the dark mode @sabine please what do you suggest. |
Try this highlight color for the search terms: https://www.figma.com/file/eh8gAxaxrZT6RG3psHCm6M/Dark-%26-Light-mode-pages?type=design&node-id=373%3A26364&mode=design&t=GAweNYDVoW8NMd16-1 |
src/ocamlorg_frontend/pages/home.eml
Outdated
@@ -1,6 +1,6 @@ | |||
let package_card ~href ~img_path ~name description = | |||
<a href="<%s href %>" target="_blank" | |||
class="bg-legacy-default dark:bg-legacy-dark-default text-legacy-default dark:text-legacy-dark-default p-4 rounded-xl flex md:gap-2 items-center legacy-card-hover"> | |||
class="bg-legacy-default dark:bg-legacy-dark-default text-title dark:text-dark-title p-4 rounded-xl flex md:gap-2 items-center legacy-card-hover"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
class="bg-legacy-default dark:bg-legacy-dark-default text-title dark:text-dark-title p-4 rounded-xl flex md:gap-2 items-center legacy-card-hover"> | |
class="bg-white dark:bg-dark-background text-title dark:text-dark-title p-4 rounded-xl flex md:gap-2 items-center legacy-card-hover"> |
</div> | ||
<div> | ||
<div class="text-base text-legacy-default"> | ||
<p class="text-base text-content dark:text-dark-content"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<p class="text-base text-content dark:text-dark-content"> | |
<p class="text-base text-title dark:text-dark-title"> |
src/ocamlorg_frontend/pages/home.eml
Outdated
<h2 class="font-bold">OCaml Packages</h2> | ||
<p class="text-lg text-legacy-lighter"> | ||
<h2 class="font-bold text-title dark:text-dark-title">OCaml Packages</h2> | ||
<p class="text-lg text-title dark:text-dark-title"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<p class="text-lg text-title dark:text-dark-title"> | |
<p class="text-lg text-content dark:text-dark-content"> |
@sabine I am now ready for a review, thank you. |
-toc.eml -tutorial_search.eml
621f183
to
7827968
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
@SaySayo please review.