Improve text visibility in atom and dusk themes

- Add CSS variable support to dusk theme components for dynamic text colors
- Fix low-contrast preset color combinations (cyberpunk, neon, magma, forest, obsidian, space)
- Add text-shadow utility classes and apply to site header and backgrounds
- Style logout buttons as proper buttons matching other button styles
- Fix hardcoded text colors in atom theme components
This commit is contained in:
root
2026-06-24 16:03:21 +02:00
parent 391458ce49
commit 3d5f94f9b9
28 changed files with 250 additions and 93 deletions
@@ -4,7 +4,7 @@
<img src="{{ setting('cms_logo') }}" alt="">
</a>
<div class="flex text-white gap-x-14">
<div class="flex gap-x-14" style="color: var(--color-navbar-text);">
<x-navigation.dropdown icon="community_icon.png" route-group="help-center*" :uppercase="true">
{{ __('Community') }}
@@ -39,12 +39,12 @@
</x-slot:children>
</x-navigation.dropdown>
<a href="{{ route('leaderboard.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out hover:text-[#ac93da]">
<a href="{{ route('leaderboard.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out nav-link">
<img class="icon" src="{{ asset('/assets/images/dusk/leaderboard_icon.png') }}" alt="community icon">
Leaderboards
</a>
<a href="{{ route('article.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out hover:text-[#ac93da]">
<a href="{{ route('article.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out nav-link">
<img class="icon" src="{{ asset('/assets/images/dusk/news_icon.png') }}" alt="community icon">
News
</a>
@@ -57,7 +57,7 @@
--}}
<a href="{{ route('shop.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out hover:text-[#ac93da]">
<a href="{{ route('shop.index') }}" class="flex flex-col gap-1 items-center transition ease-in-out nav-link">
<img class="icon" src="{{ asset('/assets/images/dusk/store_icon.png') }}" alt="community icon">
Store
</a>
@@ -81,7 +81,7 @@
<form action="{{ route('logout') }}" method="POST">
@csrf
<button type="submit" class="dropdown-item text-red-400 hover:text-red-300 flex items-center gap-2">
<button type="submit" class="dropdown-item flex items-center gap-2 justify-center w-full py-2 px-4 rounded-md font-semibold transition duration-200 ease-in-out" style="background-color: var(--button-danger-color, #ef4444); color: var(--button-danger-text-color, #ffffff);">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>