Skip to content

Complete redis.io dark theme implementation #2073

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Sep 3, 2025
Merged

Complete redis.io dark theme implementation #2073

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
063bc5f
Complete redis.io dark theme implementation
mich-elle-luna Sep 2, 2025
8ef3897
Merge branch 'main' into home-page-reskin
mich-elle-luna Sep 3, 2025
e3b7bb4
Add white borders and restyle search modal for dark theme
mich-elle-luna Sep 3, 2025
a8d7e13
Refine border styling for cleaner appearance
mich-elle-luna Sep 3, 2025
88fd0f3
Fix search results styling to show dark background for all items
mich-elle-luna Sep 3, 2025
9cb0a15
Fix search results corner styling and ensure consistent dark backgrounds
mich-elle-luna Sep 3, 2025
683c2bb
Fix search results styling by updating main CSS file
mich-elle-luna Sep 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions assets/css/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,16 +240,16 @@ select {
}

.search-item {
@apply bg-white rounded-md relative text-redis-ink-900 border border-redis-pen-800;
@apply bg-gray-700 rounded-md relative text-gray-300 border border-gray-600;
}

.search-item[aria-selected] {
@apply bg-red-100;
@apply bg-gray-600;
}

.search-item:hover,
.search-item:not([aria-selected]):focus-within {
@apply bg-red-50 text-redis-pen-800;
@apply bg-gray-600 text-white;
}

.search-item > a {
Expand Down
43 changes: 22 additions & 21 deletions layouts/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
{{ end }}

{{ define "main" }}
<main>
<main class="bg-redis-ink-900 text-white">
<header class="relative h-48 bg-redis-ink-900 text-white overflow-hidden">
<div class="absolute w-1/2 h-full top-0 left-1/4">
<div class="absolute w-fit -top-10 md:-top-6 -right-80 md:-left-96 scale-75 md:scale-100">
Expand All @@ -20,50 +20,51 @@ <h1 class="text-5xl font-medium">{{ .Title }}</h1>
<label class="" for="search-home" id="search-label-home">
{{ partial "icons/search.html" }}
</label>
<input id="seach-home" name="q" class="appearance-none bg-transparent text-base sm:text-lg text-white placeholder-white w-full h-16 focus:outline-none"
<input id="seach-home" name="q" class="appearance-none bg-transparent text-base sm:text-lg text-white placeholder-white w-full h-16 focus:outline-none"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
placeholder="Ask our AI-powered Redis copilot a question…" maxlength="500" type="text" value="" tabindex=""/>
<!--<input type="submit" class="hover:text-redis-pen-300" value="&#x23CE;"/>-->
<input class="invisible" type="submit" class="hover:text-redis-pen-300" value=""/>
</form>
</div>
</header>
<div class="w-full h-px bg-[#163341]"></div>
{{ partial "second-header.html" "disabled" }}
<div class="flex flex-col lg:flex-row gap-8 mx-auto px-4 md:px-11 py-6 md:py-28 max-w-[1920px]">
<div class="flex flex-col lg:flex-row gap-8 mx-auto px-4 md:px-11 py-6 md:py-28 max-w-[1920px] bg-redis-ink-900 text-white">
<div class="lg:sticky lg:top-32 w-full lg:w-64 h-fit lg:h-full shrink-0 text-sm font-mono font-normal">
<nav class="lg:hidden w-full lg:w-64 z-40 bg-white h-fit lg:h-full leading-7">
<div class="border border-opacity-50 border-redis-ink-900 rounded-md flex flex-col">
<button class="px-6 py-4 text-redis-ink-900 font-medium flex justify-between cursor-pointer lg:cursor-default" onclick="dropdownToggle()">
<nav class="lg:hidden w-full lg:w-64 z-40 bg-redis-ink-900 h-fit lg:h-full leading-7">
<div class="border border-opacity-50 border-white rounded-md flex flex-col bg-redis-ink-900">
<button class="px-6 py-4 text-white font-medium flex justify-between cursor-pointer lg:cursor-default" onclick="dropdownToggle()">
<div class="uppercase">Docs</div>
<div id="dropdownChevron" class="lg:hidden self-center">{{ partial "icons/chevron.html" }}</div>
</button>
<div id="dropdown" class="hidden lg:block border-t border-opacity-50 border-redis-ink-900 text-redis-pen-800">
<div id="dropdown" class="hidden lg:block border-t border-opacity-50 border-white text-gray-300 bg-redis-ink-900">
<ul class="p-6">
<li><a class="py-2 hover:underline hover:text-redis-pen-600" href='{{ relURL "develop" }}'>Develop with Redis</a></li>
<li><a class="py-2 hover:underline hover:text-redis-pen-600" href='{{ relURL "integrate" }}'>Libraries and tools</a></li>
<li><a class="py-2 hover:underline hover:text-redis-pen-600" href='{{ relURL "operate" }}'>Redis products</a></li>
<li><a class="py-2 hover:underline hover:text-redis-pen-600" href='{{ relURL "commands" }}'>Commands</a></li>
<li><a class="py-2 hover:underline hover:text-redis-pen-600" href='{{ relURL "apis" }}'>APIs</a></li>
<li><a class="py-2 hover:underline hover:text-white" href='{{ relURL "develop" }}'>Develop with Redis</a></li>
<li><a class="py-2 hover:underline hover:text-white" href='{{ relURL "integrate" }}'>Libraries and tools</a></li>
<li><a class="py-2 hover:underline hover:text-white" href='{{ relURL "operate" }}'>Redis products</a></li>
<li><a class="py-2 hover:underline hover:text-white" href='{{ relURL "commands" }}'>Commands</a></li>
<li><a class="py-2 hover:underline hover:text-white" href='{{ relURL "apis" }}'>APIs</a></li>
</ul>
</div>
</div>
</nav>
<nav class="hidden lg:block w-full lg:w-64 z-40 h-full leading-7">
<div class="flex flex-col gap-4">
<div class="flex flex-col border border-redis-ink-900 border-opacity-50 rounded-md">
<a class="px-6 py-4 rounded-t-md hover:bg-redis-pen-200" href='{{ relURL "develop" }}'>Develop with Redis</a>
<a class="px-6 py-4 hover:bg-redis-pen-200 border-y border-redis-ink-900 border-opacity-50" href='{{ relURL "integrate" }}'>Libraries and tools</a>
<a class="px-6 py-4 rounded-b-md hover:bg-redis-pen-200" href='{{ relURL "operate" }}'>Redis products</a>
<div class="flex flex-col border border-white border-opacity-50 rounded-md bg-redis-ink-900">
<a class="px-6 py-4 rounded-t-md hover:bg-redis-pen-800 text-white" href='{{ relURL "develop" }}'>Develop with Redis</a>
<a class="px-6 py-4 hover:bg-redis-pen-800 border-y border-white border-opacity-50 text-white" href='{{ relURL "integrate" }}'>Libraries and tools</a>
<a class="px-6 py-4 rounded-b-md hover:bg-redis-pen-800 text-white" href='{{ relURL "operate" }}'>Redis products</a>
</div>
<div class="flex flex-col border border-redis-ink-900 border-opacity-50 rounded-md">
<a class="px-6 py-4 rounded-t-md hover:bg-redis-pen-200 text-redis-red-600" href='{{ relURL "commands" }}'>Commands</a>
<a class="px-6 py-4 rounded-b-md hover:bg-redis-pen-200 border-t border-redis-ink-900 border-opacity-50" href='{{ relURL "apis" }}'>APIs</a>
<div class="flex flex-col border border-white border-opacity-50 rounded-md bg-redis-ink-900">
<a class="px-6 py-4 rounded-t-md hover:bg-redis-pen-800 text-redis-red-500" href='{{ relURL "commands" }}'>Commands</a>
<a class="px-6 py-4 rounded-b-md hover:bg-redis-pen-800 border-t border-white border-opacity-50 text-white" href='{{ relURL "apis" }}'>APIs</a>
</div>
</div>
</nav>
</div>
<div class="lg:px-11 w-full flex flex-col gap-3">
<h2 class="text-5xl font-medium" id="operate">Get Started</h2>
<h2 class="text-5xl font-medium text-white" id="operate">Get Started</h2>
{{ partial "docs-section.html" (dict
"Title" "Quickly set up a Redis cache, primary, vector, or custom database"
"Description" "Set up a Free Redis-managed database on AWS, GCP, or Azure"
Expand Down Expand Up @@ -116,7 +117,7 @@ <h2 class="text-5xl font-medium" id="operate">Get Started</h2>
) ) }}
</div>
<div class="lg:px-11 w-full flex flex-col gap-3">
<h2 class="text-5xl font-medium" id="operate">Deploy</h2>
<h2 class="text-5xl font-medium text-white" id="operate">Deploy</h2>
{{ partial "docs-section.html" (dict
"Title" "Control your Redis deployments on-premises and on cloud platforms"
"Description" "Robust support for hybrid and multi-AZ environments"
Expand Down
4 changes: 2 additions & 2 deletions layouts/partials/components/button-link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{ $defaultWidth := "fit" }}
{{ if eq .AltColors true }}
<a class="w-{{- .Width | default $defaultWidth }} p-4 text-sm font-mono bg-white text-redis-ink-900 border border-redis-pen-600 rounded hover:bg-redis-yellow-500 hover:border-redis-yellow-500 transition-colors" href="{{ .Href }}">{{ .Text }}</a>
<a class="w-{{- .Width | default $defaultWidth }} p-4 text-sm font-mono bg-white text-redis-ink-900 border border-redis-pen-600 rounded hover:bg-[#163341] hover:border-[#163341] hover:text-white transition-colors" href="{{ .Href }}">{{ .Text }}</a>
{{ else }}
<a class="w-{{- .Width | default $defaultWidth }} p-4 text-sm font-mono bg-redis-yellow-500 text-redis-ink-900 border border-redis-pen-600 rounded hover:bg-redis-ink-900 hover:text-white transition-colors" href="{{ .Href }}">{{ .Text }}</a>
<a class="w-{{- .Width | default $defaultWidth }} p-4 text-sm font-mono bg-[#163341] text-white border border-white border-opacity-30 rounded hover:bg-[#1a3a4a] hover:border-opacity-50 transition-colors" href="{{ .Href }}">{{ .Text }}</a>
{{ end }}
16 changes: 8 additions & 8 deletions layouts/partials/docs-section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
<div class="w-full border-t border-t-redis-pen-300 mt-14 pt-14 flex flex-col md:flex-row gap-11 md:gap-0">
<div class="w-full border-t border-t-white border-opacity-30 mt-14 pt-14 flex flex-col md:flex-row gap-11 md:gap-0">
<div class="flex flex-col gap-5 flex-1">
<h3 class="text-2xl">{{ .Title }}</h3>
<p>{{ .Description }}</p>
<h3 class="text-2xl text-white">{{ .Title }}</h3>
<p class="text-gray-300">{{ .Description }}</p>
{{ partial "components/button-link.html" (dict "Href" .ButtonLink "Text" .ButtonLabel) }}
</div>
<div class="flex-1 font-mono">
<div class="h-full flex flex-col md:flex-row gap-11 md:gap-8 md:pl-8 md:ml-8 md:border-l md:border-l-redis-pen-300">
<div class="h-full flex flex-col md:flex-row gap-11 md:gap-8 md:pl-8 md:ml-8 md:border-l md:border-l-white md:border-opacity-30">
<div class="flex flex-col gap-5 flex-1">
<p class="uppercase">{{ .LinksLeftTitle }}</p>
<p class="uppercase text-gray-400">{{ .LinksLeftTitle }}</p>
{{ range .LinksLeft }}
<a class="hover:text-redis-red-500 transition-colors text-balance" href="{{ .URL }}">{{ .Text }}&nbsp;→</a>
<a class="hover:text-redis-red-500 transition-colors text-balance text-gray-300" href="{{ .URL }}">{{ .Text }}&nbsp;→</a>
{{ end }}
</div>
{{ if .LinksRight }}
<div class="flex flex-col gap-5 flex-1">
<p class="uppercase">{{ .LinksRightTitle }}</p>
<p class="uppercase text-gray-400">{{ .LinksRightTitle }}</p>
{{ range .LinksRight }}
<a class="hover:text-redis-red-500 transition-colors text-balance" href="{{ .URL }}">{{ .Text }}&nbsp;→</a>
<a class="hover:text-redis-red-500 transition-colors text-balance text-gray-300" href="{{ .URL }}">{{ .Text }}&nbsp;→</a>
{{ end }}
</div>
{{ end }}
Expand Down
Loading