sphericalkat/medium.rip
1
0
Fork 0
mirror of https://github.com/SphericalKat/medium.rip.git synced 2024-11-16 11:25:57 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add dark mode

Browse Source 
Signed-off-by: Sphericalkat <amolele@gmail.com>
This commit is contained in:
Amogh Lele 2023-05-29 00:21:34 +05:30
parent 00357be73c
commit ce73ad4dfc
3 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
frontend/index.html
View File

@ -11,10 +11,19 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"> rel="stylesheet">
<title>RIP Medium</title> <title>RIP Medium</title>
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
</script>
</head> </head>
<body class="flex justify-center"> <body class="flex justify-center dark:bg-stone-900">
<article class="flex flex-col h-full w-full justify-center prose px-8 md:px-0"> <article class="flex flex-col h-full w-full justify-center prose dark:prose-invert px-8 md:px-0">
<div> <div>
<h1>Medium.rip</h1> <h1>Medium.rip</h1>
<h2>An alternative frontend to Medium</h2> <h2>An alternative frontend to Medium</h2>

14
frontend/show.html
View File

@ -50,11 +50,19 @@
<meta name="twitter:url" content="https://medium.rip/{{.Path}}"> <meta name="twitter:url" content="https://medium.rip/{{.Path}}">
<meta property="og:url" content="https://medium.rip/{{.Path}}"> <meta property="og:url" content="https://medium.rip/{{.Path}}">
<script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
</script>
</head> </head>
<body class="flex flex-col h-full w-full items-center"> <body class="flex flex-col h-full w-full items-center dark:bg-zinc-800">
<article class="prose lg:prose-lg sm:prose-sm py-20 px-8 md:px-0 max-w-sm sm:max-w-2xl"> <article
class="prose prose-zinc dark:prose-invert lg:prose-lg sm:prose-sm py-20 px-8 md:px-0 max-w-sm sm:max-w-2xl">
<h1 class="text-2xl">{{.Title}}</h1> <h1 class="text-2xl">{{.Title}}</h1>
<p class="pb-8"><a href="https://medium.com/u/{{.UserId}}">{{.Author}}</a> on {{.PublishDate}}</p> <p class="pb-8"><a href="https://medium.com/u/{{.UserId}}">{{.Author}}</a> on {{.PublishDate}}</p>
{{.Paragraphs}} {{.Paragraphs}}

1
frontend/tailwind.config.cjs
View File

@ -1,6 +1,7 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ["./src/**/*.ts", "./**/*.html"], content: ["./src/**/*.ts", "./**/*.html"],
darkMode: 'class',
theme: { theme: {
fontFamily: { fontFamily: {
'sans': ['Inter'], 'sans': ['Inter'],