Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-10-31 04:51:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): dark mode

Browse Source
This commit is contained in:
FliegendeWurst 2025-06-17 17:01:13 +02:00
parent 2c3cbcb1f9
commit f9ecfd1ad0
7 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/src/app.html
View File

@ -7,6 +7,6 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> %sveltekit.body%
</body> </body>
</html> </html>

6
apps/website/src/routes/+layout.svelte
View File

@ -5,12 +5,16 @@
let { children } = $props(); let { children } = $props();
</script> </script>
<body class="dark:bg-black dark:text-white">
<Header /> <Header />
<main> <main>
{@render children()} {@render children()}
</main> </main>
<footer class="container mx-auto bg-white mt-2 py-6 text-sm text-center text-gray-500"> <footer class="container max-w-screen mx-0 w-full bg-white dark:bg-gray-900 mt-2 py-6 text-sm text-center text-gray-500">
&copy; 2024-2025 <a href="https://github.com/eliandoran" class="text-blue-500 hover:underline">Elian Doran</a> and the <a href="https://github.com/TriliumNext/Notes/graphs/contributors" class="text-blue-500 hover:underline">team</a>. <br/> &copy; 2017-2024 <a href="https://github.com/zadam" class="text-blue-500 hover:underline">Adam Zivner</a>. &copy; 2024-2025 <a href="https://github.com/eliandoran" class="text-blue-500 hover:underline">Elian Doran</a> and the <a href="https://github.com/TriliumNext/Notes/graphs/contributors" class="text-blue-500 hover:underline">team</a>. <br/> &copy; 2017-2024 <a href="https://github.com/zadam" class="text-blue-500 hover:underline">Adam Zivner</a>.
</footer> </footer>
</body>

15
apps/website/src/routes/+page.svelte
View File

@ -10,7 +10,7 @@
--> -->
</svelte:head> </svelte:head>
<section class="relative overflow-hidden bg-gradient-to-br from-white to-violet-50"> <section class="relative overflow-hidden bg-gradient-to-br from-white dark:from-black to-violet-50 dark:to-violet-900">
<!-- Bokeh background circles --> <!-- Bokeh background circles -->
<div class="absolute inset-0 pointer-events-none z-0"> <div class="absolute inset-0 pointer-events-none z-0">
<div class="absolute w-72 h-72 bg-violet-300 opacity-30 rounded-full blur-3xl top-[-50px] left-[-80px]"></div> <div class="absolute w-72 h-72 bg-violet-300 opacity-30 rounded-full blur-3xl top-[-50px] left-[-80px]"></div>
@ -23,10 +23,11 @@
<!-- Left: Text Content --> <!-- Left: Text Content -->
<div class="md:w-1/3"> <div class="md:w-1/3">
<h2 class="text-4xl font-bold mb-4 text-gray-900">Organize Your Thoughts.<br/> Build Your Knowledge.</h2> <h2 class="text-4xl font-bold mb-4 text-gray-900 dark:text-white">Organize Your Thoughts.<br/> Build Your Knowledge.</h2>
<p class="text-lg mb-6 text-gray-700"> <p class="text-lg mb-6 text-gray-700 dark:text-gray-300">
Trilium Notes helps you build and organize complex personal knowledge bases effortlessly. Trilium Notes helps you build and organize complex personal knowledge bases effortlessly.
Its unique tree structure, rich editing tools, and powerful search features make managing your information intuitive and flexible. Its unique tree structure, rich editing tools, and powerful search features make managing your information intuitive and flexible.
<!-- TODO: dark mode screenshot -->
</p> </p>
<div class="flex items-center gap-6"> <div class="flex items-center gap-6">
<DownloadNow big /> <DownloadNow big />
@ -113,7 +114,7 @@
<section class="mt-20 max-w-6xl mx-auto px-4"> <section class="mt-20 max-w-6xl mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Feature Highlights</h2> <h2 class="text-3xl font-bold text-center mb-12">Feature Highlights</h2>
<div class="grid gap-12 md:grid-cols-2 max-w-4xl mx-auto text-gray-700"> <div class="grid gap-12 md:grid-cols-2 max-w-4xl mx-auto text-gray-700 dark:text-gray-300">
<!-- Organization & Navigation --> <!-- Organization & Navigation -->
<div> <div>
<h3 class="flex items-center text-xl font-semibold mb-6 text-violet-700">Organization & Navigation</h3> <h3 class="flex items-center text-xl font-semibold mb-6 text-violet-700">Organization & Navigation</h3>
@ -160,13 +161,13 @@
</section> </section>
<section class="bg-violet-50 py-16 mt-24"> <section class="bg-violet-50 dark:bg-black py-16 mt-24">
<div class="container mx-auto text-center px-4"> <div class="container mx-auto text-center px-4">
<h2 class="text-3xl font-bold mb-4">Ready to get started with Trilium Notes?</h2> <h2 class="text-3xl font-bold mb-4">Ready to get started with Trilium Notes?</h2>
<p class="text-lg text-gray-700 mb-8">Build your personal knowledge base with powerful features and full privacy.</p> <p class="text-lg text-gray-700 dark:text-gray-200 mb-8">Build your personal knowledge base with powerful features and full privacy.</p>
<div class="flex justify-center gap-6"> <div class="flex justify-center gap-6">
<a href="#" class="py-3 px-6 bg-violet-600 text-white font-semibold rounded-full shadow hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75"> <a href="download" class="py-3 px-6 bg-violet-600 text-white font-semibold rounded-full shadow hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75">
Download Now Download Now
</a> </a>
</div> </div>

12
apps/website/src/routes/download/+page.svelte
View File

@ -14,13 +14,13 @@
--> -->
</svelte:head> </svelte:head>
<div class="bg-gray-50 py-20"> <div class="bg-gray-50 dark:bg-black py-20">
<section class="max-w-6xl mx-auto px-4"> <section class="max-w-6xl mx-auto px-4">
<h2 class="text-4xl font-bold text-center text-gray-900 mb-12">Download the desktop application</h2> <h2 class="text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">Download the desktop application</h2>
<!-- Architecture pill selector --> <!-- Architecture pill selector -->
<div class="col-span-3 flex justify-center items-center gap-3 mb-6"> <div class="col-span-3 flex justify-center items-center gap-3 mb-6">
<span class="text-gray-600 font-medium mr-2">Architecture:</span> <span class="text-gray-600 dark:text-gray-300 font-medium mr-2">Architecture:</span>
<div class="inline-flex bg-violet-100 rounded-full shadow p-1"> <div class="inline-flex bg-violet-100 rounded-full shadow p-1">
{#each architectures as arch} {#each architectures as arch}
<button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition <button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition
@ -35,7 +35,7 @@
<div class="grid md:grid-cols-3 gap-10"> <div class="grid md:grid-cols-3 gap-10">
{#each Object.entries(downloadMatrix.desktop) as [platformId, platform]} {#each Object.entries(downloadMatrix.desktop) as [platformId, platform]}
{@const textColor = (platformId === "windows" ? "text-blue-600" : platformId === "linux" ? "text-violet-600" : "text-gray-800")} {@const textColor = (platformId === "windows" ? "text-blue-600" : platformId === "linux" ? "text-violet-600" : "text-gray-800 dark:text-gray-100")}
{@const bgColor = (platformId === "windows" ? "bg-blue-600" : platformId === "linux" ? "bg-violet-600" : "bg-gray-800")} {@const bgColor = (platformId === "windows" ? "bg-blue-600" : platformId === "linux" ? "bg-violet-600" : "bg-gray-800")}
{@const hoverColor = (platformId === "windows" ? "hover:bg-blue-700" : platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")} {@const hoverColor = (platformId === "windows" ? "hover:bg-blue-700" : platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
<DownloadCard app="desktop" <DownloadCard app="desktop"
@ -46,11 +46,11 @@
</section> </section>
<section class="max-w-4xl mx-auto px-4 mt-10"> <section class="max-w-4xl mx-auto px-4 mt-10">
<h2 class="text-3xl font-bold text-center text-gray-900 mb-8">Set up a server for access on multiple devices</h2> <h2 class="text-3xl font-bold text-center text-gray-900 dark:text-white mb-8">Set up a server for access on multiple devices</h2>
<div class="grid md:grid-cols-2 gap-10"> <div class="grid md:grid-cols-2 gap-10">
{#each Object.entries(downloadMatrix.server) as [platformId, platform]} {#each Object.entries(downloadMatrix.server) as [platformId, platform]}
{@const textColor = (platformId === "linux" ? "text-violet-600" : "text-gray-800")} {@const textColor = (platformId === "linux" ? "text-violet-600" : "text-gray-800 dark:text-gray-100")}
{@const bgColor = (platformId === "linux" ? "bg-violet-600" : "bg-gray-800")} {@const bgColor = (platformId === "linux" ? "bg-violet-600" : "bg-gray-800")}
{@const hoverColor = (platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")} {@const hoverColor = (platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
<DownloadCard app="server" <DownloadCard app="server"

4
apps/website/src/routes/download/download-card.svelte
View File

@ -11,9 +11,9 @@
const recommended = Object.entries(platform.downloads).find((e) => e[1].recommended); const recommended = Object.entries(platform.downloads).find((e) => e[1].recommended);
</script> </script>
<div class="bg-white border border-gray-200 rounded-2xl shadow-lg p-8 flex flex-col items-start"> <div class="bg-white dark:bg-gray-900 border border-gray-200 rounded-2xl shadow-lg p-8 flex flex-col items-start">
<h3 class="text-2xl font-semibold {textColor} mb-2">{typeof platform.title === "object" ? platform.title[architecture] : platform.title}</h3> <h3 class="text-2xl font-semibold {textColor} mb-2">{typeof platform.title === "object" ? platform.title[architecture] : platform.title}</h3>
<p class="text-gray-700 mb-12">{typeof platform.title === "object" ? platform.description[architecture] : platform.description}</p> <p class="text-gray-700 dark:text-gray-200 mb-12">{typeof platform.title === "object" ? platform.description[architecture] : platform.description}</p>
<div class="space-y-2 mt-auto w-full"> <div class="space-y-2 mt-auto w-full">
{#if recommended} {#if recommended}
<a href={buildDownloadUrl(app, platformId as Platform, recommended[0], architecture)} class="mt-auto block text-center {bgColor} {hoverColor} text-white font-medium py-2 px-5 rounded-full shadow transition"> <a href={buildDownloadUrl(app, platformId as Platform, recommended[0], architecture)} class="mt-auto block text-center {bgColor} {hoverColor} text-white font-medium py-2 px-5 rounded-full shadow transition">

4
apps/website/src/routes/feature-block.svelte
View File

@ -5,10 +5,10 @@
export let text = "text"; export let text = "text";
</script> </script>
<div class="bg-white rounded-xl shadow overflow-hidden"> <div class="bg-white dark:bg-gray-900 rounded-xl shadow overflow-hidden">
<img src="{imgSrc}" alt="{imgAlt}" class="w-full h-56 object-cover object-top"> <img src="{imgSrc}" alt="{imgAlt}" class="w-full h-56 object-cover object-top">
<div class="p-6"> <div class="p-6">
<h3 class="text-xl font-semibold mb-2">{title}</h3> <h3 class="text-xl font-semibold mb-2">{title}</h3>
<p class="text-gray-600">{text}</p> <p class="text-gray-600 dark:text-gray-300">{text}</p>
</div> </div>
</div> </div>

2
apps/website/src/routes/header.svelte
View File

@ -2,7 +2,7 @@
import DownloadNow from "./download-now.svelte"; import DownloadNow from "./download-now.svelte";
</script> </script>
<header class="header bg-white sticky top-0 z-50 shadow"> <header class="header bg-white dark:bg-gray-900 sticky dark:text-white top-0 z-50 shadow">
<div class="container mx-auto flex items-center py-4"> <div class="container mx-auto flex items-center py-4">
<a href="/" class="flex items-center gap-x-2 w-100"> <a href="/" class="flex items-center gap-x-2 w-100">
<img src="icon-color.svg" alt="Trilium Notes Logo" class="w-12 h-12"> <img src="icon-color.svg" alt="Trilium Notes Logo" class="w-12 h-12">