Add Theme with dark theme in Neon

app/Providers/Neon/ServiceProvider.php

@@ -25,6 +25,7 @@ public function register(): void
                 new JobOffers(),
                 new StaticEvents(),
                 new LaravelVisitor($this->app),
+                true,
             ));
     }
 

neon/src/Application.php

@@ -12,6 +12,7 @@ public function __construct(
         private Persistence\JobOffers  $jobOffers,
         private Persistence\Events     $events,
         private Domain\Visitor         $visitor,
+        private bool                   $darkTheme,
     )
     {
     }
@@ -25,7 +26,8 @@ public function html(string $csrf): string
             $this->attendance->fetchAttendance(),
             $this->jobOffers->fetchJobOffers(), // todo this is untested
             $this->visitor,
-            $csrf);
+            $csrf,
+            $this->darkTheme);
         return $view->html();
     }
 }

neon/src/View/Components/AddEventHtml.php

@@ -4,29 +4,31 @@
 use Neon\View\Html\Item;
 use Neon\View\Html\Render;
 use Neon\View\Language\Language;
+use Neon\View\Theme;
 
 readonly class AddEventHtml implements Item
 {
     public function __construct(
         private Language $lang,
         private string   $learnMoreUrl,
+        private Theme    $theme,
     )
     {
     }
 
     public function render(Render $h): array
     {
         return [
-            $h->tag('div', ['class' => 'bg-white p-4 rounded-lg'], [
+            $h->tag('div', ['class' => "{$this->theme->addEventBackground} p-4 rounded-lg"], [
                 $h->tag('h2',
-                    ['class' => 'font-medium text-base text-[#053B00] mb-4 tracking-tight  text-[#070707]'],
+                    ['class' => "font-medium text-base {$this->theme->addEventHeadingColor} mb-4 tracking-tight"],
                     [$this->lang->t('Are you hosting an event?')]),
-                $h->tag('p', ['class' => 'mb-4 font-[Inter] text-xs text-[#737578]'], [
+                $h->tag('p', ['class' => "mb-4 font-[Inter] text-xs {$this->theme->addEventParagraphColor}"], [
                     $this->lang->t("Add your event to our calendar and we'll gladly provide media support."),
                 ]),
                 $h->tag('a', [
                     'href'  => $this->learnMoreUrl,
-                    'class' => 'text-sm text-[#00A538]',
+                    'class' => "text-sm {$this->theme->addEventLinkColor}",
                 ],
                     [$this->lang->t('Learn more')]),
             ]),

neon/src/View/Components/Attendance/AttendanceHtml.php

@@ -4,10 +4,11 @@
 use Neon\View\Html\Item;
 use Neon\View\Html\Render;
 use Neon\View\Html\Tag;
+use Neon\View\Theme;
 
 readonly class AttendanceHtml implements Item
 {
-    public function __construct(private \Neon\View\Components\Attendance\Attendance $vm)
+    public function __construct(private Attendance $vm, private Theme $theme)
     {
     }
 
@@ -48,18 +49,30 @@ private function diode(Render $h): Tag
     private function bottomCenterHighlight(Render $h): Tag
     {
         return $h->tag('div', [
-            'class'       => 'top-6 z-[2]',
+            'class'       => "absolute top-6 z-[2] {$this->theme->attendanceHighlightBackground}",
             'style'       => \implode('', [
                 'width:580px;',
                 'height:580px;',
                 'border-radius:580px;',
-                'background:rgba(0, 165, 56, 0.3);',
                 'filter:blur(50px);',
-                'position:absolute;',
-                'left:50%;',
-                'transform:translateX(-50%)',
+                ...$this->highlightPosition(),
             ]),
             'parentClass' => 'relative overflow-hidden',
         ], []);
     }
+
+    private function highlightPosition(): array
+    {
+        if ($this->theme->dark) {
+            return [
+                'right:50%;',
+                'top:50%;',
+                'transform:translateY(-25%)',
+            ];
+        }
+        return [
+            'left:50%;',
+            'transform:translateX(-50%)',
+        ];
+    }
 }

neon/src/View/Components/Event/EventHtml.php

@@ -3,20 +3,21 @@
 
 use Neon\View\Html\Render;
 use Neon\View\Html\Tag;
+use Neon\View\Theme;
 
 readonly class EventHtml
 {
     public function __construct(
         private Event  $event,
         private string $csrf,
+        private Theme  $theme,
     )
     {
     }
 
     public function render(Render $h): Tag
     {
-        $border = 'border-solid border-l-4 border-[#00A538]';
-        return $h->tag('div', ['class' => "event bg-white rounded-lg p-4 mb-4 flex  $border"], [
+        return $h->tag('div', ['class' => "event {$this->theme->eventStyle} rounded-lg p-4 mb-4 flex {$this->theme->eventBorder}"], [
             $h->tag('div', ['class' => 'date self-center ml-1 mr-6'], [
                 $h->tag('span', ['class' => 'font-bold'], [$this->event->date]),
                 $h->tag('span', ['class' => 'mx-2'], ['|']),
@@ -48,14 +49,14 @@ public function render(Render $h): Tag
                 ]),
                 $h->tag('ul', [], \array_map(
                     fn($tag) => $h->tag('li',
-                        ['class' => 'inline-block mr-2 py-px px-1.5 text-xs leading-5 text-[#22488C] bg-[#E3E8F1] rounded-md font-[Arial]'],
+                        ['class' => "inline-block mr-2 py-px px-1.5 text-xs leading-5 {$this->theme->eventTag} rounded-md font-[Arial]"],
                         [$tag]),
                     $this->event->tags)),
             ]),
-            $h->tag('div', ['class' => 'details flex text-center ml-auto'], [
-                $h->tag('span', ['class' => 'text-[#4E5973] self-center text-sm mx-2'], [$this->event->city]),
-                $h->tag('span', ['class' => 'text-[#4E5973] self-center text-sm mx-2'], [$this->event->kind]),
-                $h->tag('span', ['class' => 'text-[#4E5973] self-center text-sm mx-2'], [$this->event->pricing]),
+            $h->tag('div', ['class' => "details flex text-center ml-auto {$this->theme->eventDetailsStyle}"], [
+                $h->tag('span', ['class' => 'self-center text-sm mx-2'], [$this->event->city]),
+                $h->tag('span', ['class' => 'self-center text-sm mx-2'], [$this->event->kind]),
+                $h->tag('span', ['class' => 'self-center text-sm mx-2'], [$this->event->pricing]),
             ]),
         ]);
     }

neon/src/View/Components/JobOffer/JobOffersHtml.php

@@ -5,22 +5,24 @@
 use Neon\View\Html\Item;
 use Neon\View\Html\Render;
 use Neon\View\Html\Tag;
+use Neon\View\Theme;
 
 readonly class JobOffersHtml implements Item
 {
     public function __construct(
         private string $sectionTitle,
         private array  $offers,
+        private Theme  $theme,
     )
     {
     }
 
     public function render(Render $h): array
     {
         return [
-            $h->tag('section', ['id' => 'jobs', 'class' => 'mb-8'], [
+            $h->tag('section', ['id' => 'jobs', 'class' => "mb-8 {$this->theme->jobOffersSection}"], [
                 $h->tag('h2',
-                    ['class' => 'text-xs text-[#053B00] mb-4 tracking-tight'],
+                    ['class' => "text-xs {$this->theme->jobOffersHeading} mb-4 tracking-tight"],
                     [$this->sectionTitle]),
                 $h->tag('div', ['class' => 'space-y-4'], \array_map(
                     fn(JobOffer $offer): Tag => $this->jobOffer($h, $offer),
@@ -35,7 +37,7 @@ private function jobOffer(Render $h, JobOffer $offer): Tag
         return $h->tag('div', ['class' => 'flex space-x-4'], [
             $h->tag('img', ['src' => $offer->imageUrl, 'class' => 'size-8 shrink-0'], []),
             $h->tag('div', ['class' => 'flex flex-col space-y-1'], [
-                $h->tag('h3', ['class' => 'font-[Inter] text-[#4E5973] text-xs font-bold'], [
+                $h->tag('h3', ['class' => "font-[Inter] {$this->theme->jobOfferHeading} text-xs font-bold"], [
                     $h->tag('a', ['href' => $offer->url], [$offer->title]),
                 ]),
                 $h->tag('div', ['class' => 'flex flex-wrap'], [
@@ -78,7 +80,7 @@ private function jobOfferTags(Render $h, JobOffer $offer): Tag
     function jobOfferTag(Render $h, Domain\Tag $tag): Tag
     {
         return $h->tag('span',
-            ['class' => 'inline-flex shrink-0 mr-1 mb-1 py-px px-1.5 text-xs leading-5 text-[#22488C] bg-[#E3E8F1] rounded-md font-[Arial] items-center whitespace-nowrap'],
+            ['class' => "inline-flex shrink-0 mr-1 mb-1 py-px px-1.5 text-xs leading-5 {$this->theme->jobOfferTag} rounded-md font-[Arial] items-center whitespace-nowrap"],
             [
                 $tag->imageUrl
                     ? $h->tag('img', ['class' => 'size-3 mr-1', 'src' => $tag->imageUrl], [])

neon/src/View/Components/Navigation/NavigationHtml.php

@@ -4,17 +4,20 @@
 use Neon\View\Html\Item;
 use Neon\View\Html\Render;
 use Neon\View\Html\Tag;
+use Neon\View\Theme;
 
 readonly class NavigationHtml implements Item
 {
-    public function __construct(private Navigation $navigation)
+    public function __construct(
+        private Navigation $navigation,
+        private Theme      $theme)
     {
     }
 
     public function render(Render $h): array
     {
         return [
-            $h->tag('header', ['class' => 'container mx-auto flex text-[#4E5973] text-sm mb-4'], [
+            $h->tag('header', ['class' => "container mx-auto flex {$this->theme->navigationColor} text-sm mb-4"], [
                 $h->tag('div', ['class' => 'flex'], [
                     $h->tag('a',
                         ['id' => 'homepage', 'href' => $this->navigation->homepageUrl, 'class' => 'self-center mr-3.5'],
@@ -24,21 +27,21 @@ public function render(Render $h): array
                 $h->tag('div',
                     [
                         'id'               => 'search-bar',
-                        'class'            => 'grow ml-10 text-[#4e5973] whitespace-nowrap items-center hidden lg:flex',
+                        'class'            => "grow ml-10 {$this->theme->searchBarColor} whitespace-nowrap items-center hidden lg:flex",
                         'style'            => 'font-family:Arial;',
                         'content-editable' => 'true',
                     ],
                     [
-                        $this->magnifyingGlass($h, 'size-3.5 fill-current mr-2'),
-                        $this->cssStylePlaceholder($h, '#search-bar input', '#4e5973'),
+                        $this->magnifyingGlass($h, "size-3.5 fill-current mr-2"),
+                        $this->cssStylePlaceholder($h, '#search-bar input'),
                         $this->javaScript($h, 'function searchInputKeyPress(event) {
                             if (event.keyCode === 13) {
                                 const url = "/Search?q=" + encodeURIComponent(event.target.value);
                                 window.location.href = url;
                             }
                         }'),
                         $h->tag('input', [
-                            'class'       => 'outline-none bg-transparent text-black w-full',
+                            'class'       => "outline-none bg-transparent w-full {$this->theme->searchBarActiveColor}",
                             'placeholder' => $this->navigation->searchBarTitle,
                             'onKeyPress'  => 'searchInputKeyPress(event)',
                         ], []),
@@ -100,14 +103,14 @@ private function githubButton(Render $h, string $className): Tag
     {
         $icon = function (string $class) use ($h): Tag {
             return $h->html(<<<starIcon
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="$class">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
-</svg>
-starIcon,);
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" width="16" height="16" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="$class">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+                </svg>
+                starIcon,);
         };
 
         return $h->tag('div',
-            ['class' => "github flex border border-solid border-[#E2E2E2] rounded divide-x font-[Helvetica] font-bold text-xs self-center $className"],
+            ['class' => "github flex {$this->theme->githubButtonBorder} {$this->theme->githubButtonDivideX} rounded font-[Helvetica] font-bold text-xs self-center $className"],
             [
                 $h->tag('a', [
                     'class' => 'name px-2.5 py-1.5 flex gap-x-2',
@@ -131,14 +134,15 @@ private function controls(Render $h): Tag
     private function controlItem(Render $h, Link $link): Tag
     {
         return $h->tag('li',
-            ['class' => 'px-2 py-1.5 self-center ' . ($link->bold ? 'rounded bg-[#00A538] text-white whitespace-nowrap' : '')],
+            ['class' => 'px-2 py-1.5 self-center ' . ($link->bold ? "rounded whitespace-nowrap {$this->theme->navigationControlItem}" : '')],
             [
                 $h->tag('a', ['href' => $link->href], [$link->title]),
             ]);
     }
 
-    private function cssStylePlaceholder(Render $h, string $cssSelector, string $placeholderColor): Tag
+    private function cssStylePlaceholder(Render $h, string $cssSelector): Tag
     {
+        $placeholderColor = $this->theme->searchBarColor;
         $line = [
             "$cssSelector:-moz-placeholder           {color:$placeholderColor; opacity: 1;}",
             "$cssSelector::-moz-placeholder          {color:$placeholderColor; opacity: 1;}",
@@ -151,24 +155,18 @@ private function cssStylePlaceholder(Render $h, string $cssSelector, string $pla
         return $h->html("<style>$styleSheet</style>");
     }
 
-    private function javaScript(Render $h, string $sourceCode): Tag
-    {
-        return $h->html("<script>$sourceCode</script>");
-    }
-
     private function userAvatar(Render $h): Tag
     {
         return $h->tag('div', ['class' => 'self-center'], [
             $h->tag('img', [
                 'src'     => $this->navigation->avatarUrl,
-                'class'   => 'size-[30px] self-center rounded',
-                'style'   => 'border: 1px solid rgb(226, 226, 226);',
+                'class'   => "size-[30px] self-center rounded {$this->theme->navigationUserAvatarBorder}",
                 'onClick' => 'toggleDropdown(event)',
                 'id'      => 'userAvatar'], []),
             $h->tag('span',
                 [
                     'parentClass' => 'relative',
-                    'class'       => 'px-6 py-1.5 inline-block cursor-pointer absolute z-[1] border border-solid border-[#E2E2E2] bg-[#F0F2F5] rounded top-9 right-0 hidden',
+                    'class'       => "px-6 py-1.5 inline-block cursor-pointer absolute z-[1] {$this->theme->navigationUserAvatarBorder} {$this->theme->navigationDropdownStyle} rounded top-9 right-0 hidden",
                     'onClick'     => 'logout()',
                     'id'          => 'logout',
                 ],
@@ -188,4 +186,9 @@ function logout() {
                 "),
         ]);
     }
+
+    private function javaScript(Render $h, string $sourceCode): Tag
+    {
+        return $h->html("<script>$sourceCode</script>");
+    }
 }

neon/src/View/Components/SectionHtml.php

@@ -5,6 +5,7 @@
 use Neon\View\Html\Item;
 use Neon\View\Html\Render;
 use Neon\View\Html\Tag;
+use Neon\View\Theme;
 
 readonly class SectionHtml implements Item
 {
@@ -14,27 +15,30 @@ public function __construct(
         private string $sectionTitle,
         private string $subsectionTitle,
         private array  $children,
+        private Theme  $theme,
     )
     {
     }
 
     public function render(Render $h): array
     {
         return [
-            $h->tag('div', ['class' => 'bg-white rounded-lg py-[26px] p-4 mb-8'], [
+            $h->tag('div', ['class' => "{$this->theme->sectionBackground} rounded-lg py-[26px] p-4 mb-8"], [
                 $h->tag('nav', [], [
-                    $h->tag('ul', ['class' => 'text-xs font-[Arial]'], [
+                    $h->tag('ul', ['class' => "text-xs font-[Arial] {$this->theme->breadcrumbColor}"], [
                         $h->tag('li', ['class' => 'inline'], [$this->breadcrumbRoot]),
-                        $h->tag('span', ['class' => 'mx-1 text-[#00A538]'], ['/']),
+                        $h->tag('span', ['class' => "mx-1 {$this->theme->breadcrumbSeparator}"], ['/']),
                         $h->tag('li', ['class' => 'inline'], [$this->breadcrumbItem]),
                     ]),
                 ]),
                 $this->topRightHighlight($h),
-                $h->tag('h1', ['class' => 'font-semibold text-2xl'], [$this->sectionTitle]),
+                $h->tag('h1',
+                    ['class' => "font-semibold text-2xl {$this->theme->sectionTitleColor}"],
+                    [$this->sectionTitle]),
             ]),
 
             $h->tag('h2',
-                ['class' => 'text-xs text-[#053B00] mb-4 tracking-tight'],
+                ['class' => "text-xs {$this->theme->subsectionTitleColor} mb-4 tracking-tight"],
                 [$this->subsectionTitle]),
 
             ...\array_map(