Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-07-27 10:02:59 +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%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
%sveltekit.body%
</body>
</html>

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

@ -5,12 +5,16 @@
let { children } = $props();
</script>
<body class="dark:bg-black dark:text-white">
<Header />
<main>
{@render children()}
</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>.
</footer>
</body>

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

@ -10,7 +10,7 @@
-->
</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 -->
<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>
@ -23,10 +23,11 @@
<!-- Left: Text Content -->
<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>
<p class="text-lg mb-6 text-gray-700">
<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 dark:text-gray-300">
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.
<!-- TODO: dark mode screenshot -->
</p>
<div class="flex items-center gap-6">
<DownloadNow big />
@ -113,7 +114,7 @@
<section class="mt-20 max-w-6xl mx-auto px-4">
<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 -->
<div>
<h3 class="flex items-center text-xl font-semibold mb-6 text-violet-700">Organization & Navigation</h3>
@ -160,13 +161,13 @@
</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">
<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">
<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
</a>
</div>

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

@ -14,13 +14,13 @@
-->
</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">
<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 -->
<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">
{#each architectures as arch}
<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">
{#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 hoverColor = (platformId === "windows" ? "hover:bg-blue-700" : platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
<DownloadCard app="desktop"
@ -46,11 +46,11 @@
</section>
<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">
{#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 hoverColor = (platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
<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);
</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>
<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">
{#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">

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

@ -5,10 +5,10 @@
export let text = "text";
</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">
<div class="p-6">
<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>

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

@ -2,7 +2,7 @@
import DownloadNow from "./download-now.svelte";
</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">
<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">