Make dark mode backgrounds darker
This commit is contained in:
@@ -242,7 +242,7 @@ defmodule MusicLibraryWeb.CoreComponents do
|
|||||||
class={[
|
class={[
|
||||||
"phx-submit-loading:opacity-75 rounded-md py-2 px-3",
|
"phx-submit-loading:opacity-75 rounded-md py-2 px-3",
|
||||||
"text-sm font-semibold leading-6 ",
|
"text-sm font-semibold leading-6 ",
|
||||||
"bg-zinc-900 hover:bg-zinc-700 dark:bg-zinc-100 dark:hover:bg-zinc-400",
|
"bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-400",
|
||||||
"text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
|
"text-white active:text-white/80 dark:text-zinc-900 dark:active:text-zinc-900/80",
|
||||||
"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600",
|
"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600",
|
||||||
@class
|
@class
|
||||||
@@ -351,7 +351,7 @@ defmodule MusicLibraryWeb.CoreComponents do
|
|||||||
class={[
|
class={[
|
||||||
"mt-2 block w-full rounded-md",
|
"mt-2 block w-full rounded-md",
|
||||||
"border-0 border-zinc-300",
|
"border-0 border-zinc-300",
|
||||||
"bg-white shadow-sm dark:bg-zinc-700",
|
"bg-white shadow-sm dark:bg-zinc-800",
|
||||||
"ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
|
"ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
|
||||||
"focus:border-zinc-400 focus:ring-zinc-400 dark:focus:ring-zinc-300 focus:ring-0",
|
"focus:border-zinc-400 focus:ring-zinc-400 dark:focus:ring-zinc-300 focus:ring-0",
|
||||||
"sm:text-sm",
|
"sm:text-sm",
|
||||||
@@ -402,7 +402,7 @@ defmodule MusicLibraryWeb.CoreComponents do
|
|||||||
class={[
|
class={[
|
||||||
"mt-2 block w-full rounded-md",
|
"mt-2 block w-full rounded-md",
|
||||||
"border-0 border-zinc-300",
|
"border-0 border-zinc-300",
|
||||||
"bg-white shadow-sm dark:bg-zinc-700",
|
"bg-white shadow-sm dark:bg-zinc-800",
|
||||||
"ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
|
"ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
|
||||||
"focus:border-zinc-400 focus:ring-zinc-400 dark:focus:ring-zinc-300 focus:ring-0",
|
"focus:border-zinc-400 focus:ring-zinc-400 dark:focus:ring-zinc-300 focus:ring-0",
|
||||||
"sm:text-sm",
|
"sm:text-sm",
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
<nav class="bg-white border-b border-slate-900/10 dark:bg-zinc-800 dark:border-slate-300/10">
|
<nav class="border-b border-slate-900/10 dark:border-slate-300/10">
|
||||||
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
|
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
|
||||||
<div class="flex h-16 justify-between">
|
<div class="flex h-16 justify-between">
|
||||||
<div class="flex">
|
<div class="flex">
|
||||||
|
|||||||
@@ -34,7 +34,7 @@
|
|||||||
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
|
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-white dark:bg-zinc-800">
|
<body class="bg-white dark:bg-zinc-900">
|
||||||
<%= @inner_content %>
|
<%= @inner_content %>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -20,7 +20,7 @@
|
|||||||
"sm:text-sm sm:leading-6",
|
"sm:text-sm sm:leading-6",
|
||||||
"ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
|
"ring-1 ring-inset focus:z-10 focus:ring-2 focus:ring-inset",
|
||||||
"text-zinc-900 dark:text-zinc-200",
|
"text-zinc-900 dark:text-zinc-200",
|
||||||
"dark:bg-zinc-700",
|
"dark:bg-zinc-800",
|
||||||
"ring-zinc-200 dark:ring-zinc-400",
|
"ring-zinc-200 dark:ring-zinc-400",
|
||||||
"placeholder:text-zinc-400 dark:placeholder:text-zinc-400",
|
"placeholder:text-zinc-400 dark:placeholder:text-zinc-400",
|
||||||
"focus:ring-zinc-400 dark:focus:ring-zinc-300"
|
"focus:ring-zinc-400 dark:focus:ring-zinc-300"
|
||||||
|
|||||||
@@ -37,7 +37,7 @@
|
|||||||
<li
|
<li
|
||||||
:for={{id, record} <- @streams.records}
|
:for={{id, record} <- @streams.records}
|
||||||
phx-click={JS.navigate(~p"/records/#{record}")}
|
phx-click={JS.navigate(~p"/records/#{record}")}
|
||||||
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
|
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-800 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
|
||||||
id={id}
|
id={id}
|
||||||
>
|
>
|
||||||
<div class="flex min-w-0 gap-x-4 items-center">
|
<div class="flex min-w-0 gap-x-4 items-center">
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
|
|||||||
~H"""
|
~H"""
|
||||||
<div
|
<div
|
||||||
class={[
|
class={[
|
||||||
"relative overflow-hidden rounded-md bg-white dark:bg-zinc-700 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6 cursor-pointer",
|
"relative overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6 cursor-pointer",
|
||||||
@class
|
@class
|
||||||
]}
|
]}
|
||||||
phx-click={JS.navigate(~p"/records/#{@record}")}
|
phx-click={JS.navigate(~p"/records/#{@record}")}
|
||||||
@@ -48,7 +48,7 @@ defmodule MusicLibraryWeb.StatsLive.DataComponents do
|
|||||||
|
|
||||||
def counter(assigns) do
|
def counter(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<div class="overflow-hidden rounded-md bg-white dark:bg-zinc-700 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6">
|
<div class="overflow-hidden rounded-md bg-white dark:bg-zinc-800 px-4 pb-3 pt-5 shadow sm:px-6 sm:pt-6">
|
||||||
<dt>
|
<dt>
|
||||||
<p class="truncate text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
<p class="truncate text-sm font-medium text-zinc-500 dark:text-zinc-400">
|
||||||
<%= @title %>
|
<%= @title %>
|
||||||
|
|||||||
@@ -18,7 +18,7 @@
|
|||||||
<%= gettext("Formats") %>
|
<%= gettext("Formats") %>
|
||||||
</h1>
|
</h1>
|
||||||
<dl class={[
|
<dl class={[
|
||||||
"mt-5 grid divide-zinc-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x",
|
"mt-5 grid divide-zinc-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow divide-x",
|
||||||
stats_class(@collection_count_by_format)
|
stats_class(@collection_count_by_format)
|
||||||
]}>
|
]}>
|
||||||
<div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
|
<div :for={{format, count} <- @collection_count_by_format} class="px-2 py-5 sm:px-4">
|
||||||
@@ -42,7 +42,7 @@
|
|||||||
<%= gettext("Types") %>
|
<%= gettext("Types") %>
|
||||||
</h1>
|
</h1>
|
||||||
<dl class={[
|
<dl class={[
|
||||||
"mt-5 grid divide-zinc-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-700 shadow divide-x",
|
"mt-5 grid divide-zinc-200 dark:divide-slate-300/50 overflow-hidden rounded-md bg-white dark:bg-zinc-800 shadow divide-x",
|
||||||
stats_class(@collection_count_by_type)
|
stats_class(@collection_count_by_type)
|
||||||
]}>
|
]}>
|
||||||
<div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
|
<div :for={{type, count} <- @collection_count_by_type} class="px-2 py-5 sm:px-4">
|
||||||
|
|||||||
@@ -37,7 +37,7 @@
|
|||||||
<li
|
<li
|
||||||
:for={{id, record} <- @streams.records}
|
:for={{id, record} <- @streams.records}
|
||||||
phx-click={JS.navigate(~p"/wishlist/#{record}")}
|
phx-click={JS.navigate(~p"/wishlist/#{record}")}
|
||||||
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
|
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-800 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
|
||||||
id={id}
|
id={id}
|
||||||
>
|
>
|
||||||
<div class="flex min-w-0 gap-x-4 items-center">
|
<div class="flex min-w-0 gap-x-4 items-center">
|
||||||
|
|||||||
Reference in New Issue
Block a user