dark theme for pages

Author: nikoshell

src/components/sessions/filter.astro

@@ -17,7 +17,7 @@ import Select from "@ui/Select.astro";
       type="text"
       id="sessionSearch"
       name="search"
-      class="block w-full bg-transparent text-lg h-16 py-2 pr-16 pl-4 border-[3px] border-primary appearance-none focus:outline-hidden focus:border-black focus-visible:bg-white"
+      class="block w-full bg-transparent text-lg text-white h-16 py-2 pr-16 pl-4 border-[3px] border-white/20 focus:border-accent appearance-none focus:outline-hidden focus:border-accent focus-visible:bg-white/5"
       placeholder="Search sessions..."
     />
   </div>

src/components/ui/Label.astro

@@ -9,7 +9,7 @@ const { htmlFor } = Astro.props;
 
 <label
   for={htmlFor}
-  class="block text-primary font-bold mb-4 pl-3 text-lg"
+  class="block text-white/80 font-medium mb-2 text-sm"
 >
 <slot />
 </label>

src/components/ui/Select.astro

@@ -8,12 +8,12 @@ interface Props {
 const { id, name, defaultValue } = Astro.props;
 
 const selectClasses = [
-  "block w-full bg-transparent text-lg h-16 py-2 pr-16 pl-4 border-[3px] border-primary appearance-none",
-  "focus:outline-hidden focus:border-black focus-visible:bg-white"
+  "block w-full bg-transparent text-lg text-white h-16 py-2 pr-16 pl-4 border-[3px] border-white/20 appearance-none",
+  "focus:outline-hidden focus:border-accent focus-visible:bg-white/5"
 ].join(" ");
 
 const svgClasses = [
-  "absolute top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none text-primary right-4"
+  "absolute top-1/2 -translate-y-1/2 w-6 h-6 pointer-events-none text-white/40 right-4"
 ].join(" ");
 ---
 

src/components/ui/Tag.astro

@@ -7,8 +7,8 @@ interface Props {
 const { className = "", href } = Astro.props;
 
 const baseClasses = [
-  "inline-block bg-secondary-light text-white px-4 py-2 rounded-xl font-bold",
-  "hover:bg-secondary hover:text-white transition-colors",
+  "inline-block bg-white/10 text-white/80 px-3 py-1 rounded font-medium text-sm",
+  "hover:bg-accent hover:text-section-bg transition-colors",
   "duration-200 ease-in-out cursor-pointer"
 ];
 

src/pages/sessions.astro

@@ -2,10 +2,10 @@
 import { getCollection } from "astro:content";
 import Layout from "@layouts/Layout.astro";
 import Prose from "@ui/Prose.astro";
-import Headline from "@ui/Headline.astro"
+import Title from "@ui/Title.astro";
+import Section2 from "@ui/Section2.astro";
 import Filter from "@components/sessions/filter.astro";
 import ListSessions from "@components/sessions/list-sessions.astro";
-import Section from "@ui/Section.astro";
 
 const sessions = await getCollection("sessions");
 
@@ -26,18 +26,18 @@ const description = "A list of all the sessions at the conference";
 ---
 
 <Layout title={title} description={description}>
-  <Section>
-    <Headline id="sessions" as="h1" title="List of Sessions" />
+  <Section2 id="sessions">
+    <Title id="sessions">List of Sessions</Title>
     <Prose full>
       <p>Here you can find a list of all the sessions at the conference.</p>
       <p>You can filter the sessions by track, type, and level.</p>
     </Prose>
-    <Headline id="filters" title="Filters" />
+    <h2 class="text-xl font-semibold mb-4" id="filters">Filters</h2>
 
     <Filter allTracks={allTracks} allTypes={allTypes} allLevels={allLevels} />
 
-    <Headline id="results" as="h2" title="Search results" />
+    <h2 class="text-xl font-semibold mb-4" id="results">Search results</h2>
 
     <ListSessions sessions={sessions} />
-  </Section>
+  </Section2>
 </Layout>

src/pages/speaker/[slug].astro

@@ -4,8 +4,8 @@ import Layout from "@layouts/Layout.astro";
 import Prose from "@ui/Prose.astro";
 import { Image } from "astro:assets";
 import Markdown from "@ui/Markdown.astro";
-import Headline from "@ui/Headline.astro";
-import Section from "@ui/Section.astro"
+import Title from "@ui/Title.astro";
+import Section2 from "@ui/Section2.astro"
 import CodeHeart from "@components/island/CodeHeart.svelte";
 
 
@@ -85,14 +85,14 @@ function getGitHosting(url: string): string | undefined {
 ---
 
 <Layout title={entry.data.name} description={`Profile of ${entry.data.name}`}>
-  <Section>
-    <Headline as="h1" id="speaker" title={entry.data.name} />
+  <Section2 variant="dark" id="speaker-page">
+    <Title id="speaker">{entry.data.name}</Title>
 
               <div class="md:grid grid-cols-[460px_1fr] md:gap-6">
     {
       ( entry.data.avatar &&
                   <div class="flex items-start">
-                    <div class="border-4 border-white rounded-lg shadow-lg inline-block mb-10">
+                    <div class="border border-white/10 rounded-lg inline-block mb-10">
           <Image
             src={entry.data.avatar}
             alt={entry.data.name}
@@ -109,7 +109,7 @@ function getGitHosting(url: string): string | undefined {
     {
       entry.data.biography ? (
         <>
-          <h2 class="relative font-title text-primary font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-5xl">
+          <h2 class="relative font-heading text-white font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-5xl">
             Biography
           </h2>
           <Prose full>
@@ -128,7 +128,7 @@ function getGitHosting(url: string): string | undefined {
       entry.data.mastodon_url ||
       entry.data.twitter_url ? (
         <div class="mb-4">
-          <h2 class="relative font-title text-primary font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-5xl">
+          <h2 class="relative font-heading text-white font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-5xl">
             More about the speaker
           </h2>
           <dl>
@@ -146,7 +146,7 @@ function getGitHosting(url: string): string | undefined {
                   {isUrl(entry.data.homepage) ? (
                     <a
                       href={ensureHttps(entry.data.homepage)}
-                      class="text-primary underline hover:text-primary-hover"
+                      class="text-white/80 underline hover:text-accent"
                       target="_blank"
                     >
                       {entry.data.homepage}
@@ -166,7 +166,7 @@ function getGitHosting(url: string): string | undefined {
                 <dd>
                   <a
                     href={ensureHttps(entry.data.gitx_url)}
-                    class="text-primary underline hover:text-primary-hover"
+                    class="text-white/80 underline hover:text-accent"
                       target="_blank"
                   >
                     {entry.data.gitx_url}
@@ -181,7 +181,7 @@ function getGitHosting(url: string): string | undefined {
                 <dd>
                   <a
                     href={entry.data.linkedin_url}
-                    class="text-primary underline hover:text-primary-hover"
+                    class="text-white/80 underline hover:text-accent"
                       target="_blank"
                   >
                     {getLinkedInUsername(entry.data.linkedin_url)}
@@ -196,7 +196,7 @@ function getGitHosting(url: string): string | undefined {
                 <dd>
                   <a
                     href={entry.data.mastodon_url}
-                    class="text-primary underline hover:text-primary-hover"
+                    class="text-white/80 underline hover:text-accent"
                       target="_blank"
                   >
                     {getMastodonUsername(entry.data.mastodon_url)}
@@ -211,7 +211,7 @@ function getGitHosting(url: string): string | undefined {
                 <dd>
                   <a
                     href={entry.data.twitter_url}
-                    class="text-primary underline hover:text-primary-hover"
+                    class="text-white/80 underline hover:text-accent"
                       target="_blank"
                   >
                     {getTwitterUsername(entry.data.twitter_url)}
@@ -225,7 +225,7 @@ function getGitHosting(url: string): string | undefined {
                 <dd>
                   <a
                     href={getBlueskyProfileLink(getBlueskyUsername(entry.data.bluesky_url) as string)}
-                    class="text-primary underline hover:text-primary-hover"
+                    class="text-white/80 underline hover:text-accent"
                       target="_blank"
                   >
                     {getBlueskyUsername(entry.data.bluesky_url)}
@@ -242,7 +242,7 @@ function getGitHosting(url: string): string | undefined {
     <br />
 
     <h2
-      class="relative font-title text-primary font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-5xl"
+      class="relative font-heading text-white font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-5xl"
     >
       Session{sessions.length > 1 ? "s" : ""}
     </h2>
@@ -251,7 +251,7 @@ function getGitHosting(url: string): string | undefined {
         sessions.map((session) => (
           <li class="mb-2 text-xl leading-snug">
             <a
-              class="text-primary hover:text-primary-hover font-title underline font-semibold"
+              class="text-white/80 hover:text-accent underline font-semibold"
               href={`/session/${session.id}`}
             >
               {session.data.title}
@@ -267,15 +267,15 @@ function getGitHosting(url: string): string | undefined {
         ))
       }
     </ul>
-  </Section>
+  </Section2>
 </Layout>
 
 <style>
 
 dl,
 dd, dt {
   font-size: 1.1rem;
-  color: var(--color-text);
+  color: var(--color-text-primary-dark, rgba(255,255,255,0.93));
 }
 
   </style>