thelonius/phoenix-ausblick
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add dark mode styling

Browse Source
This commit is contained in:
Thelonius Kort
2023-02-11 15:46:11 +01:00
parent 8f2698bf7b
commit 38000db27a
2 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/css/article.css
View File

@ -28,7 +28,11 @@
}
.article h4 {
@apply my-2 font-semibold text-lg leading-8 text-zinc-800;
@apply my-2 font-semibold text-lg leading-8 text-stone-800;
}
.dark .article h4 {
@apply text-stone-300;
}
.article p, .article div {
@ -47,6 +51,10 @@
@apply text-cyan-900;
}
.dark .article a {
@apply text-cyan-700;
}
.article ul {
@apply pl-6 list-disc my-2;
}

49
lib/outlook_web/components/dark_mode_component.ex
View File

@ -9,29 +9,32 @@ defmodule OutlookWeb.DarkModeComponent do
def dark_mode_widget(assigns) do
~H"""
<div id="dark-mode-widget" class="relative flex flex-row-reverse p-4" phx-hook="dark_mode_widget">
<button type="button" id="headlessui-listbox-button-4" aria-haspopup="true" aria-expanded="true" data-headlessui-state="open" >
<span class="dark:hidden">
<Heroicons.sun class="w-5 h-5 stroke-slate-400 dark:stroke-slate-500" />
</span>
<span class="hidden dark:inline">
<Heroicons.moon class="w-5 h-5 stroke-slate-400 dark:stroke-slate-500" />
</span>
</button>
<ul class="hidden absolute z-50 top right-2 bg-white rounded-lg ring-1 ring-slate-900/10 shadow-lg overflow-hidden w-36 py-1 text-sm text-slate-700 font-semibold dark:bg-slate-800 dark:ring-0 dark:highlight-white/5 dark:text-slate-300 mt-8" aria-labelledby="headlessui-listbox-label-3" aria-orientation="vertical" id="headlessui-listbox-options-5" role="listbox" tabindex="0" data-headlessui-state="open">
<li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-1" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
<Heroicons.sun class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
Light
</li>
<li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-2" role="option" tabindex="-1" aria-selected="false" data-headlessui-state="">
<Heroicons.moon class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
Dark
</li>
<li class="py-1 px-2 flex items-center cursor-pointer text-slate-700 dark:text-slate-300" id="selector-option-3" role="option" tabindex="-1" aria-selected="true" data-headlessui-state="selected">
<Heroicons.computer_desktop class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
System
</li>
</ul>
<div id="dark-mode-widget" class="absolute flex w-full justify-between p-0" phx-hook="dark_mode_widget">
<div class="flex"></div>
<div class="flex">
<button class="p-2" type="button">
<span class="dark:hidden">
<Heroicons.sun class="w-5 h-5 stroke-stone-900 dark:stroke-stone-500" />
</span>
<span class="hidden dark:inline">
<Heroicons.moon class="w-5 h-5 stroke-stone-900 dark:stroke-stone-500" />
</span>
</button>
<ul class="hidden absolute z-50 top right-2 bg-white rounded-lg ring-1 ring-slate-900/10 shadow-lg overflow-hidden w-36 py-1 text-sm text-slate-700 font-semibold dark:bg-slate-800 dark:ring-0 dark:highlight-white/5 dark:text-slate-300 mt-8" aria-labelledby="headlessui-listbox-label-3" aria-orientation="vertical" id="headlessui-listbox-options-5" role="listbox" tabindex="0" data-headlessui-state="open">
<li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-1" role="option" tabindex="-1">
<Heroicons.sun class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
Light
</li>
<li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-2" role="option" tabindex="-1">
<Heroicons.moon class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
Dark
</li>
<li class="py-1 px-2 flex items-center cursor-pointer text-slate-700 dark:text-slate-300" id="selector-option-3" role="option" tabindex="-1" aria-selected="true" data-headlessui-state="selected">
<Heroicons.computer_desktop class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
System
</li>
</ul>
</div>
</div>
"""
end