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 { .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 { .article p, .article div {
@ -47,6 +51,10 @@
@apply text-cyan-900; @apply text-cyan-900;
} }
.dark .article a {
@apply text-cyan-700;
}
.article ul { .article ul {
@apply pl-6 list-disc my-2; @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 def dark_mode_widget(assigns) do
~H""" ~H"""
<div id="dark-mode-widget" class="relative flex flex-row-reverse p-4" phx-hook="dark_mode_widget"> <div id="dark-mode-widget" class="absolute flex w-full justify-between p-0" phx-hook="dark_mode_widget">
<button type="button" id="headlessui-listbox-button-4" aria-haspopup="true" aria-expanded="true" data-headlessui-state="open" > <div class="flex"></div>
<span class="dark:hidden"> <div class="flex">
<Heroicons.sun class="w-5 h-5 stroke-slate-400 dark:stroke-slate-500" /> <button class="p-2" type="button">
</span> <span class="dark:hidden">
<span class="hidden dark:inline"> <Heroicons.sun class="w-5 h-5 stroke-stone-900 dark:stroke-stone-500" />
<Heroicons.moon class="w-5 h-5 stroke-slate-400 dark:stroke-slate-500" /> </span>
</span> <span class="hidden dark:inline">
</button> <Heroicons.moon class="w-5 h-5 stroke-stone-900 dark:stroke-stone-500" />
<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"> </span>
<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=""> </button>
<Heroicons.sun class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" /> <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">
Light <li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-1" role="option" tabindex="-1">
</li> <Heroicons.sun class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
<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=""> Light
<Heroicons.moon class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" /> </li>
Dark <li class="py-1 px-2 flex items-center cursor-pointer" id="selector-option-2" role="option" tabindex="-1">
</li> <Heroicons.moon class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
<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"> Dark
<Heroicons.computer_desktop class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" /> </li>
System <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">
</li> <Heroicons.computer_desktop class="w-5 h-5 mr-2 stroke-slate-400 dark:stroke-slate-500" />
</ul> System
</li>
</ul>
</div>
</div> </div>
""" """
end end