Skip to content

Instantly share code, notes, and snippets.

@jpalala

jpalala/gist.md

Last active August 23, 2025 02:57
Show Gist options
  • Save jpalala/f8ddc85bb7b6026d831d0f3910832053 to your computer and use it in GitHub Desktop.
Save jpalala/f8ddc85bb7b6026d831d0f3910832053 to your computer and use it in GitHub Desktop.
Download ZIP
hyde theme using tailwind
Raw
gist.md

I asked Gemini to make me this and it came up with this.

Raw
tail-hyde.html
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hyde Theme Replication with Tailwind</title>
<!--
The "Inter" font is used for the body, and "Abril Fatface" for the main
heading, replicating the original Hyde theme.
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Inter:400,700&display=swap">
<!--
Load Tailwind CSS from a CDN. This is a utility-first framework that allows
us to build the design directly in the HTML without writing custom CSS.
-->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/*
The default font is 'Inter'. The sidebar heading uses 'Abril Fatface'.
*/
body {
font-family: 'Inter', sans-serif;
}
/*
We use CSS variables to manage the theme colors dynamically.
The default theme is the black one.
*/
:root {
--sidebar-bg: #202020;
--link-color: #6a9fb5; /* A subtle blue for content links */
--sidebar-text-color: rgba(255, 255, 255, .5);
}
/*
This section uses Tailwind's arbitrary variants to apply the theme colors.
The classes are scoped by the data-theme attribute on the <body>.
This is a clean way to manage multiple themes.
*/
[data-theme="red"] {
--sidebar-bg: #ac4142;
--link-color: #ac4142;
}
[data-theme="orange"] {
--sidebar-bg: #d28445;
--link-color: #d28445;
}
[data-theme="yellow"] {
--sidebar-bg: #f4bf75;
--link-color: #f4bf75;
}
[data-theme="green"] {
--sidebar-bg: #90a959;
--link-color: #90a959;
}
[data-theme="cyan"] {
--sidebar-bg: #75b5aa;
--link-color: #75b5aa;
}
[data-theme="blue"] {
--sidebar-bg: #6a9fb5;
--link-color: #6a9fb5;
}
[data-theme="magenta"] {
--sidebar-bg: #aa759f;
--link-color: #aa759f;
}
[data-theme="brown"] {
--sidebar-bg: #8f5536;
--link-color: #8f5536;
}
/*
The sidebar background color is set using the CSS variable.
*/
.sidebar {
background-color: var(--sidebar-bg);
color: var(--sidebar-text-color);
}
.sidebar-about h1 {
color: white; /* Always white for the title */
font-family: "Abril Fatface", serif;
}
.sidebar a {
color: white; /* Always white for sidebar links */
}
.content a {
color: var(--link-color);
}
</style>
</head>
<body class="bg-white">
<!--
Main container for the whole layout.
On medium screens and up (md:), it becomes a flex container.
We use flex-row-reverse to easily switch between the normal and reversed
layouts without modifying the HTML structure.
The layout-reverse class is added via JavaScript to change the order.
-->
<div id="main-layout" class="md:flex md:flex-row-reverse">
<!--
Sidebar element.
On mobile (by default), it's a full-width block with centered text.
On medium screens and up (md:), it becomes a fixed-position sidebar
on the left side, taking up a specific width. The 'inset-y-0' class
is a shorthand for top:0 and bottom:0.
-->
<div class="sidebar w-full py-8 px-4 text-center
md:fixed md:inset-y-0 md:left-0 md:w-72 md:text-left">
<div class="sidebar-about">
<h1 class="text-5xl mt-0">Hyde</h1>
<p class="text-white/70">A blog theme for developers.</p>
</div>
<nav class="sidebar-nav mt-8">
<a href="#" class="sidebar-nav-item block leading-7 font-bold">Home</a>
<a href="#" class="sidebar-nav-item block leading-7 hover:underline">About</a>
<a href="#" class="sidebar-nav-item block leading-7 hover:underline">Projects</a>
<a href="#" class="sidebar-nav-item block leading-7 hover:underline">GitHub</a>
</nav>
<!-- Sticky footer-like content -->
<p class="sidebar-sticky md:absolute md:inset-x-4 md:bottom-4">
&copy; 2024. All rights reserved.
</p>
</div>
<!--
Content area.
On mobile, it has top/bottom padding.
On medium screens, it gets a left margin to make space for the sidebar.
On large screens, the margins are increased for a wider layout.
The 'max-w-xl' and 'mx-auto' on smaller screens helps center the content.
-->
<div id="content-area" class="content w-full py-16 px-4
sm:ml-80 lg:ml-[22rem]
sm:mr-8 lg:mr-16">
<div class="prose max-w-none">
<h2 class="text-4xl font-bold">Replicating the Hyde Theme</h2>
<p>
This is a replication of the popular Hyde theme using Tailwind CSS. It demonstrates how to
achieve a clean, two-column layout with a fixed sidebar on larger screens and a full-width
layout on mobile devices.
</p>
<p>
The theme colors are managed using a simple JavaScript function that changes the
<code>data-theme</code> attribute on the body. This allows for dynamic color changes without
reloading the page or requiring complex state management.
</p>
<h3 class="text-3xl mt-12 mb-4 font-bold">Theme and Layout Switcher</h3>
<p>
Use the buttons below to change the theme color and to toggle the layout between left and right sidebar.
</p>
<div class="flex flex-wrap gap-2 mt-4 items-center">
<button class="bg-[#202020] w-8 h-8 rounded-full shadow-lg" data-theme="default" title="Default"></button>
<button class="bg-[#ac4142] w-8 h-8 rounded-full shadow-lg" data-theme="red" title="Red"></button>
<button class="bg-[#d28445] w-8 h-8 rounded-full shadow-lg" data-theme="orange" title="Orange"></button>
<button class="bg-[#f4bf75] w-8 h-8 rounded-full shadow-lg" data-theme="yellow" title="Yellow"></button>
<button class="bg-[#90a959] w-8 h-8 rounded-full shadow-lg" data-theme="green" title="Green"></button>
<button class="bg-[#75b5aa] w-8 h-8 rounded-full shadow-lg" data-theme="cyan" title="Cyan"></button>
<button class="bg-[#6a9fb5] w-8 h-8 rounded-full shadow-lg" data-theme="blue" title="Blue"></button>
<button class="bg-[#aa759f] w-8 h-8 rounded-full shadow-lg" data-theme="magenta" title="Magenta"></button>
<button class="bg-[#8f5536] w-8 h-8 rounded-full shadow-lg" data-theme="brown" title="Brown"></button>
<button id="layout-reverse-btn" class="ml-4 px-4 py-2 bg-gray-200 text-gray-800 rounded-lg shadow-md font-medium">
Toggle Layout
</button>
</div>
<hr class="my-12">
<article>
<h3 class="text-3xl font-bold">Hello World</h3>
<p class="text-sm font-medium text-gray-500">
Posted on December 24, 2024
</p>
<p class="mt-4">
Welcome to this theme! The purpose of this page is to showcase the theme's structure and styling.
All the content here is for demonstration purposes.
</p>
<p>
The body font is set to <a href="https://fonts.google.com/specimen/Inter" target="_blank" rel="noopener">Inter</a> for readability, while the sidebar heading uses
<a href="https://fonts.google.com/specimen/Abril+Fatface" target="_blank" rel="noopener">Abril Fatface</a> for a distinct look, just like the original Hyde theme.
</p>
</article>
<article class="mt-12">
<h3 class="text-3xl font-bold">Another Post</h3>
<p class="text-sm font-medium text-gray-500">
Posted on December 25, 2024
</p>
<p class="mt-4">
This is another example post to fill out the page. You can see how links and other elements
are styled according to the selected theme. The colors of the links will change
based on which color theme is active.
</p>
</article>
</div>
</div>
</div>
<script>
// Get references to the DOM elements.
const body = document.body;
const mainLayout = document.getElementById('main-layout');
const themeButtons = document.querySelectorAll('button[data-theme]');
const layoutButton = document.getElementById('layout-reverse-btn');
// Function to set the theme based on the button's data attribute.
function setTheme(themeName) {
body.setAttribute('data-theme', themeName);
}
// Add click event listeners to all theme buttons.
themeButtons.forEach(button => {
button.addEventListener('click', () => {
const theme = button.getAttribute('data-theme');
setTheme(theme);
});
});
// Toggle the layout-reverse class on the main layout container.
layoutButton.addEventListener('click', () => {
mainLayout.classList.toggle('md:flex-row-reverse');
// We also need to adjust the content margins when the layout is reversed.
const content = document.getElementById('content-area');
content.classList.toggle('md:mr-8');
content.classList.toggle('md:ml-80');
content.classList.toggle('lg:mr-16');
content.classList.toggle('lg:ml-[22rem]');
// Add the new margins for reversed layout.
content.classList.toggle('md:ml-8');
content.classList.toggle('md:mr-80');
content.classList.toggle('lg:ml-16');
content.classList.toggle('lg:mr-[22rem]');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment