Skip to content
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.

Sign up for GitHub

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

feat(theme): introduce dark theme #356

Closed
wants to merge 2 commits into from
Closed

feat(theme): introduce dark theme #356

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb5e0ba
feat(theme): introduce dark theme
AugustinMauroy Apr 4, 2024
3180e99
feat(theme): furnish something cool
AugustinMauroy Apr 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions frontend/components/HomepageHero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export function HomepageHero(
) {
return (
<div
class="w-screen -ml-[calc(50vw-50%)] -mt-6 bg-repeat py-32 lg:pt-48 relative before:absolute before:left-0 before:right-0 before:h-32 before:bg-gradient-to-t before:from-white before:bottom-0 before:z-10 before:pointer-events-none"
class="w-screen -ml-[calc(50vw-50%)] -mt-6 bg-repeat py-32 lg:pt-48 relative before:absolute before:left-0 before:right-0 before:h-32 before:bg-gradient-to-t before:from-white before:bottom-0 before:z-10 before:pointer-events-none dark:before:from-slate-900"
id="particles-js"
>
<HomepageHeroParticles />
Expand All @@ -39,16 +39,14 @@ export function HomepageHero(
<span className="sr-only">JSR</span>
<AnimatedLogo />
<div
class="text-2xl text-balance leading-[1.1] sm:text-3xl md:text-3xl lg:text-4xl opsize-normal md:opsize-sm text-center -mt-5 md:-mt-6 max-w-[20em]"
style="text-shadow: 0 0 2em white, 0 0 1em white, 0 0 0.5em white, 0 0 0.25em white, 0 0 3em white, 0 0 0.5em white;"
class="text-2xl text-balance leading-[1.1] sm:text-3xl md:text-3xl lg:text-4xl opsize-normal md:opsize-sm text-center -mt-5 md:-mt-6 max-w-[20em] superShadow"
>
The <b class="font-semibold">open-source package registry</b>{" "}
for modern JavaScript and TypeScript
</div>
</h1>
<div
class="flex flex-row gap-3 items-center justify-center mt-4 pointer-events-auto"
style="text-shadow: 0 0 2em white, 0 0 1em white, 0 0 0.5em white, 0 0 0.25em white, 0 0 3em white, 0 0 0.5em white;"
class="flex flex-row gap-3 items-center justify-center mt-4 pointer-events-auto superShadow"
>
<a class="underline text-sm relative z-10" href="/docs">
Docs
Expand Down
10 changes: 5 additions & 5 deletions frontend/components/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export function ListDisplay(
<div class="mt-8 border-1.5 border-jsr-cyan-950 rounded overflow-hidden">
{title &&
(
<div class="px-5 py-4 flex items-center justify-between border-b border-jsr-cyan-300 bg-slate-100 leading-none">
<div class="px-5 py-4 flex items-center justify-between border-b border-jsr-cyan-300 bg-slate-100 leading-none dark:bg-slate-900">
<span class="font-semibold">{title}</span>
<div />
</div>
Expand Down Expand Up @@ -72,7 +72,7 @@ function Pagination(

return (
<nav
class="flex items-center justify-between border-t border-jsr-cyan-900/10 bg-white px-4 py-3 sm:px-6"
class="flex items-center justify-between border-t border-jsr-cyan-900/10 bg-white px-4 py-3 sm:px-6 dark:bg-slate-900"
aria-label="Pagination"
>
<Head>
Expand All @@ -88,7 +88,7 @@ function Pagination(
</Head>

<div class="hidden sm:block">
<p class="text-sm text-gray-700">
<p class="text-sm text-gray-700 dark:text-gray-300">
{start + itemsCount === 0 ? "No results found" : (
<>
Showing <span class="font-semibold">{start + 1}</span> to{" "}
Expand All @@ -104,7 +104,7 @@ function Pagination(
? (
<a
href={prevURL.pathname + prevURL.search}
class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 select-none"
class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 select-none dark:text-gray-300 dark:hover:bg-gray-800 dark:bg-gray-900"
>
Previous
</a>
Expand All @@ -114,7 +114,7 @@ function Pagination(
? (
<a
href={nextURL.pathname + nextURL.search}
class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 select-none"
class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 select-none dark:text-gray-300 dark:hover:bg-gray-800 dark:bg-gray-900"
>
Next
</a>
Expand Down
4 changes: 2 additions & 2 deletions frontend/components/ListPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export function ListPanel(
<ol class="border-1.5 border-jsr-cyan-950 rounded list-none overflow-hidden">
{children.map((entry) => {
return (
<li class="odd:bg-jsr-cyan-50">
<li class="odd:bg-jsr-cyan-50 dark:odd:bg-jsr-cyan-900">
<a
class={`flex px-4 items-center py-3 group focus-visible:ring-2 ring-jsr-cyan-700 ring-inset outline-none hover:bg-jsr-yellow-200 focus-visible:bg-jsr-yellow-200 ${
entry.value === selected ? "text-cyan-700 font-bold" : ""
Expand All @@ -41,7 +41,7 @@ export function ListPanel(
{entry.value}
</span>
{entry.label && (
<div class="chip bg-jsr-cyan-200 truncate">
<div class="chip bg-jsr-cyan-200 truncate dark:bg-jsr-cyan-800">
{entry.label}
</div>
)}
Expand Down
5 changes: 4 additions & 1 deletion frontend/components/Markdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,10 @@ export function Markdown(
mediaBaseUrl: mediaBaseURL,
});
return (
<div
<main
data-color-mode="auto"
data-light-theme="light"
data-dark-theme="dark"
class="markdown-body"
dangerouslySetInnerHTML={{ __html: html }}
/>
Expand Down
4 changes: 2 additions & 2 deletions frontend/components/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ export interface NavItemProps {
export function NavItem(props: NavItemProps) {
return (
<a
class={`md:px-3 px-4 py-2 text-sm md:text-base min-h-10 leading-none rounded-md md:rounded-t-md md:rounded-b-none hover:bg-jsr-cyan-100 flex items-center select-none ${
class={`md:px-3 px-4 py-2 text-sm md:text-base min-h-10 leading-none rounded-md md:rounded-t-md md:rounded-b-none hover:bg-jsr-cyan-100 flex items-center select-none dark:hover:bg-jsr-cyan-800 dark:text-white ${
props.active
? "bg-jsr-cyan-50 md:border-r-1 md:border-t-1 md:border-l-1 md:border-b-0 border-1 border-jsr-cyan-300/30 font-semibold"
? "bg-jsr-cyan-50 md:border-r-1 md:border-t-1 md:border-l-1 md:border-b-0 border-1 border-jsr-cyan-300/30 font-semibold dark:bg-jsr-cyan-900 dark:border-jsr-cyan-700 dark:text-white"
: ""
}`}
href={props.href}
Expand Down
2 changes: 1 addition & 1 deletion frontend/components/PackageHit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export function PackageHit(pkg: OramaPackageHit | Package): ListDisplayItem {
style={`background-image: conic-gradient(transparent, transparent ${pkg.score}%, #e7e8e8 ${pkg.score}%)`}
title="Package score"
>
<div class="rounded-full aspect-square bg-white text-xs flex items-center justify-center font-semibold min-w-6">
<div class="rounded-full aspect-square bg-white text-xs flex items-center justify-center font-semibold min-w-6 dark:bg-black dark:text-white">
{pkg.score}
</div>
</div>
Expand Down
20 changes: 10 additions & 10 deletions frontend/islands/GlobalSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ export function GlobalSearch(
<input
type="text"
name="search"
class={`block w-full search-input bg-white/90 input rounded-r-none ${sizeClasses} relative`}
class={`block w-full search-input bg-white/90 input rounded-r-none ${sizeClasses} relative dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500`}
placeholder={placeholder}
value={query}
onInput={onInput}
Expand All @@ -240,7 +240,7 @@ export function GlobalSearch(

<button
type="submit"
class="button bg-cyan-950 text-white px-4 rounded-l-none hover:bg-cyan-800 focus-visible:bg-cyan-800 outline-cyan-600 transition-colors duration-150"
class="button bg-cyan-950 text-white px-4 rounded-l-none hover:bg-cyan-800 focus-visible:bg-cyan-800 outline-cyan-600 transition-colors duration-150 dark:bg-cyan-900 dark:text-white dark:hover:bg-cyan-800 dark:focus-visible:bg-cyan-800 dark:outline-cyan-600"
onMouseDown={() => {
btnSubmit.value = true;
}}
Expand All @@ -255,7 +255,7 @@ export function GlobalSearch(
stroke-width={2.5}
aria-label="search"
stroke="currentColor"
class="w-4 h-4"
class="size-4"
>
<path
strokeLinecap="round"
Expand Down Expand Up @@ -304,12 +304,12 @@ function SuggestionList(
if (!showSuggestions.value) return null;

return (
<div class="absolute bg-white w-full sibling:bg-red-500 border-1.5 border-jsr-cyan-950 rounded-lg z-40 overflow-hidden top-0.5">
<div class="absolute bg-white w-full sibling:bg-red-500 border-1.5 border-jsr-cyan-950 rounded-lg z-40 overflow-hidden top-0.5 dark:bg-gray-800 dark:border-gray-700">
{suggestions.value === null
? <div class="bg-white text-gray-500 px-4">...</div>
? <div class="bg-white text-gray-500 px-4 dark:bg-gray-800 dark:text-gray-500">...</div>
: suggestions.value?.length === 0
? (
<div class="bg-white text-gray-500 px-4 py-2">
<div class="bg-white text-gray-500 px-4 py-2 dark:bg-gray-800 dark:text-gray-500">
No matching results to display
</div>
)
Expand All @@ -324,7 +324,7 @@ function SuggestionList(
return (
<li
key={i}
class="p-2 hover:bg-gray-100 cursor-pointer aria-[selected=true]:bg-cyan-100"
class="p-2 hover:bg-gray-100 cursor-pointer aria-[selected=true]:bg-cyan-100 dark:hover:bg-gray-700 dark:aria-[selected=true]:bg-cyan-700"
aria-selected={selected}
>
<a href={hit.href} class="bg-red-600">
Expand All @@ -335,8 +335,8 @@ function SuggestionList(
})}
</ul>
)}
<div class="bg-gray-100 flex items-center justify-end py-1 px-2 gap-1">
<span class="text-sm text-gray-500">
<div class="bg-gray-100 flex items-center justify-end py-1 px-2 gap-1 dark:bg-gray-700">
<span class="text-sm text-gray-500 dark:text-gray-400">
powered by <span class="sr-only">Orama</span>
</span>
<img class="h-4" src="/logos/orama-dark.svg" alt="" />
Expand Down Expand Up @@ -377,7 +377,7 @@ function DocsHit(hit: OramaDocsHit, input: Signal<string>): ListDisplayItem {
</div>
)}
<div
class="text-sm text-gray-600"
class="text-sm text-gray-600 dark:text-gray-400"
dangerouslySetInnerHTML={{
__html: highlighter.highlight(hit.content, input.value)
.trim(100),
Expand Down
2 changes: 1 addition & 1 deletion frontend/islands/new.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ interface IconColorProps {
export function IconCircle({ done, children }: IconColorProps) {
const color = useComputed(() => {
if (done.value) return "bg-green-600 text-white";
return "bg-jsr-gray-0 text-black";
return "bg-jsr-gray-0 text-black dark:bg-gray-800 dark:text-white";
});
return (
<div class={color + " hidden md:block rounded-full p-1.75"}>
Expand Down
2 changes: 1 addition & 1 deletion frontend/routes/@[scope]/~/settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ function DeleteScope({ scope }: { scope: FullScope }) {
return (
<form class="mb-8 mt-8" method="POST">
<h2 class="text-lg font-semibold">Delete scope</h2>
<p class="mt-2 text-gray-600 max-w-3xl">
<p class="mt-2 text-gray-600 max-w-3xl dark:text-gray-400">
Deleting the scope will immediately allow other users to claim the scope
and publish packages to it. This action cannot be undone.
</p>
Expand Down
2 changes: 1 addition & 1 deletion frontend/routes/auth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export default function AuthPage({ data }: PageProps<Data>) {
</title>
</Head>
<h1 class="text-lg font-semibold">Authorization</h1>
<p class="mt-2 text-gray-600 max-w-3xl">
<p class="mt-2 text-gray-600 max-w-3xl dark:text-gray-400">
To authorize a request, enter the code shown in the application.
</p>
<form action="/auth" method="GET" class="mt-8">
Expand Down
8 changes: 4 additions & 4 deletions frontend/routes/docs/[...id].tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default function Page({ data }: PageProps<Data, State>) {
</Head>

<div class="grid grid-cols-1 md:grid-cols-10">
<nav class="pb-10 md:border-r-1.5 md:col-span-3 lg:col-span-2 order-2 md:order-1 border-t-1.5 border-cyan-900 md:border-t-0 md:border-slate-300 pt-4 md:pt-0">
<nav class="pb-10 md:border-r-1.5 md:col-span-3 lg:col-span-2 order-2 md:order-1 border-t-1.5 border-cyan-900 md:border-t-0 md:border-slate-300 pt-4 md:pt-0 dark:border-cyan-200 dark:border-slate-800">
<div>
<p class="text-xl font-semibold" id="sidebar">Docs</p>
</div>
Expand All @@ -49,9 +49,9 @@ export default function Page({ data }: PageProps<Data, State>) {
href={`/docs/${id}`}
class={`${
id === data.id
? "px-4 text-cyan-700 border-l-4 border-cyan-400 bg-cyan-100"
? "px-4 text-cyan-700 border-l-4 border-cyan-400 bg-cyan-100 dark:text-cyan-200 dark:border-cyan-200 dark:bg-cyan-900"
: "pl-5 pr-4"
} py-1.5 block leading-5 hover:text-gray-600 hover:underline`}
} py-1.5 block leading-5 hover:text-gray-600 hover:underline dark:hover:text-gray-400`}
>
{title}
</a>
Expand All @@ -66,7 +66,7 @@ export default function Page({ data }: PageProps<Data, State>) {
<p class="text-sm mb-6 -mt-2 md:hidden">
<a href="#sidebar" class="link">View table of contents</a>
</p>
<h1 class="text-4xl lg:text-5xl lg:leading-[1.1] text-balance font-medium mb-8 text-gray-900">
<h1 class="text-4xl lg:text-5xl lg:leading-[1.1] text-balance font-medium mb-8 text-gray-900 dark:text-gray-100">
{data.title}
</h1>
<Markdown source={data.content} />
Expand Down
12 changes: 6 additions & 6 deletions frontend/routes/new.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default function New(props: PageProps<Data, State>) {
<h1 class="mb-8 font-bold text-3xl leading-none">
Publish a package
</h1>
<p class="text-gray-900 max-w-screen-md">
<p class="text-gray-900 max-w-screen-md dark:text-gray-100">
Publish your package to the JSR to share it with the world!
</p>
<p>
Expand All @@ -61,11 +61,11 @@ export default function New(props: PageProps<Data, State>) {
<div class="space-y-8">
<div class="flex items-start gap-4">
<IconCircle done={scope}>
<IconFolder class="h-5 w-5" />
<IconFolder class="size-5" />
</IconCircle>
<div class="w-full">
<h2 class="font-bold text-2xl leading-none">Scope</h2>
<p class="mt-2 mb-4 text-gray-500 text-base">
<p class="mt-2 mb-4 text-gray-500 text-base dark:text-gray-300">
Choose which scope your package will be published to. Scopes are
namespaces for packages.
</p>
Expand All @@ -80,8 +80,8 @@ export default function New(props: PageProps<Data, State>) {
/>
)
: (
<div class="space-y-4 bg-gray-50 border-gray-100 p-4 rounded-xl">
<p class="text-gray-700">
<div class="space-y-4 bg-gray-50 border-gray-100 p-4 rounded-xl dark:bg-gray-800 dark:border-gray-700">
<p class="text-gray-700 dark:text-gray-300">
You must be logged in to publish a package.
</p>
<a
Expand All @@ -96,7 +96,7 @@ export default function New(props: PageProps<Data, State>) {
</div>
<div class="flex items-start gap-4">
<IconCircle done={name}>
<IconPackage class="h-5 w-5" />
<IconPackage class="size-5" />
</IconCircle>
<div class="w-full">
<h2 class="font-bold text-2xl leading-none">Package name</h2>
Expand Down
8 changes: 5 additions & 3 deletions frontend/routes/package/(_components)/PackageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export function PackageHeader(
<div class="flex items-center gap-1">
{selectedVersion &&
pkg.latestVersion === selectedVersion?.version && (
<div class="chip sm:big-chip bg-jsr-yellow-400 select-none">
<div class="chip sm:big-chip bg-jsr-yellow-400 select-none dark:bg-jsr-yellow-500 text-black dark:text-white">
latest
</div>
)}
Expand All @@ -61,7 +61,7 @@ export function PackageHeader(
}`}
style={`background-image: conic-gradient(transparent, transparent ${pkg.score}%, #e7e8e8 ${pkg.score}%)`}
>
<span class="rounded-full w-full h-full bg-white flex justify-center items-center text-center font-bold">
<span class="rounded-full w-full h-full bg-white flex justify-center items-center text-center font-bold dark:bg-black">
{pkg.score}%
</span>
</div>
Expand All @@ -76,7 +76,9 @@ export function PackageHeader(
</div>
</div>
{pkg.description && (
<p class="text-gray-600 max-w-3xl">{pkg.description}</p>
<p class="text-gray-600 max-w-3xl dark:text-gray-400">
{pkg.description}
</p>
)}
{pkg.githubRepository && (
<a
Expand Down
2 changes: 1 addition & 1 deletion frontend/routes/package/(_components)/PackageNav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export function PackageNav(
<NavItem href={`${base}/versions`} active={currentTab === "Versions"}>
<span class="flex items-center">
Versions
<span class="chip tabular-nums bg-jsr-cyan-200 ml-2 leading-[0] w-[1.5em] aspect-square flex items-center justify-center">
<span class="chip tabular-nums bg-jsr-cyan-200 ml-2 leading-[0] w-[1.5em] aspect-square flex items-center justify-center dark:bg-jsr-cyan-800">
{versionCount}
</span>
</span>
Expand Down
Loading