feat: add darkmode

This commit is contained in:
ffqq 2023-07-11 20:29:47 +00:00
parent 8222502610
commit b56ec9454c
5 changed files with 244 additions and 144 deletions

View File

@ -268,4 +268,101 @@ body {
.hidden {
display: none;
}
@media (prefers-color-scheme: dark) {
:root {
--gray-950: #030712;
--gray-900: #111827;
--gray-800: #1f2937;
--gray-700: #374151;
--gray-600: #4b5563;
--gray-500: #6b7280;
--gray-400: #9ca3af;
--gray-300: #d1d5db;
--gray-200: #e5e7eb;
--gray-100: #f3f4f6;
--gray-50: #f9fafb;
}
textarea {
background-color: var(--gray-800);
color: white
}
/* fix some profile issues, this is important do NOT remove!!!! */
iframe {
background-color: white;
}
body {
color: white;
background-color: var(--gray-900);
}
h1 {
color: white;
}
.post button, .post .commentdiv input, input, button {
background-color: var(--gray-700);
border-color: var(--gray-600);
color: white;
}
.navbar {
background-color: var(--gray-800);
}
.navbar a, a {
color: white;
border-size: 0px;
border-color: var(--gray-800);
}
.accountform button {
background-color: var(--gray-700);
border-color: var(--gray-600);
color: white;
}
.profileDiv .edit-button {
color: var(--gray-50);
text-decoration: none;
}
.post {
background-color: var(--gray-800);
}
.usernamelink {
color: white;
}
.post .date {
color: var(--gray-400);
}
.post .commentsdiv {
background-color: var(--gray-700);
}
.messageBar {
background-color: var(--gray-900);
}
.channelDiv {
background-color: var(--gray-800);
}
.channelDiv button {
background-color: var(--gray-700);
color: white;
}
.channelDiv button:hover {
background-color: var(--gray-600);
}
}
}

View File

@ -1,56 +1,56 @@
<!DOCTYPE html>
<html>
<style>
body {
overflow-y: hidden;
}
</style>
<head>
<title>burgercat</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head>
<body>
<div class="navbar">
<h1>burgercat</h1>
<a href="/">home</a>
<a class="selected" href="/chat">chat</a>
<a href="/post">post</a>
{% if userdata %}
<a href="/settings/logout" class="right r">log out</a>
<a href="/settings" class="right">{{ userdata.username }}</a>
{% else %}
<a href="/signup" class="right r">sign up</a>
<a href="/login" class="right">log in</a>
{% endif %}
</div>
<div class="postDiv">
{% if userdata %}
{% if userdata.banned == "0" %}
{% else %}
<p class="warning">Your account has been banned. Reason: "{{ userdata.banned }}". <a href="/settings/logout">Log out</a></p>
{% endif %}
{% endif %}
<div class="chatDiv">
<div id="channelDiv" class="channelDiv">
<p class="statusMessage" id="statusMessage">Connected</p>
</div>
<div id="messageDiv" class="messageDiv">
</div>
<div class="messageBar">
<input id="messageBox" type="text" placeholder="Type something.." id="chatBox">
</div>
</div>
</div>
<script src="/static/js/chat.js"></script>
</body>
<!DOCTYPE html>
<html>
<style>
body {
overflow-y: hidden;
}
</style>
<head>
<title>burgercat</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head>
<body>
<div class="navbar">
<h1>burgercat</h1>
<a href="/">home</a>
<a class="selected" href="/chat">chat</a>
<a href="/post">post</a>
{% if userdata %}
<a href="/settings/logout" class="right r">log out</a>
<a href="/settings" class="right">{{ userdata.username }}</a>
{% else %}
<a href="/signup" class="right r">sign up</a>
<a href="/login" class="right">log in</a>
{% endif %}
</div>
<div class="postDiv">
{% if userdata %}
{% if userdata.banned == "0" %}
{% else %}
<p class="warning">Your account has been banned. Reason: "{{ userdata.banned }}". <a href="/settings/logout">Log out</a></p>
{% endif %}
{% endif %}
<div class="chatDiv">
<div id="channelDiv" class="channelDiv">
<p class="statusMessage" id="statusMessage">Connected</p>
</div>
<div id="messageDiv" class="messageDiv">
</div>
<div class="messageBar">
<input id="messageBox" type="text" placeholder="Type something.." id="chatBox">
</div>
</div>
</div>
<script src="/static/js/chat.js"></script>
</body>
</html>

View File

@ -1,42 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<title>burgercat</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head>
<body>
<div class="navbar">
<h1>burgercat</h1>
<a class="selected" href="/">home</a>
<a href="/post">post</a>
{% if userdata %}
<a href="/settings/logout" class="right r">log out</a>
<a href="/settings" class="right">{{ userdata.username }}</a>
{% else %}
<a href="/signup" class="right r">sign up</a>
<a href="/login" class="right">log in</a>
{% endif %}
</div>
<div class="postDiv">
<div class="profileDiv">
{% if userdata %}
{% if pageuser.id == userdata.id %}
<h2>edit mode</h2>
<p>remote content from media.tenor.com and cdn.discordapp.com is allowed</p>
<form class="editThing" method="post" enctype="multipart/form-data">
<textarea class="htmlBox" name="code" type="text" placeholder="<p>Hello World!</p>">{{ userdata.htmldescription }}</textarea>
<br><br>
<input class="submit" type="submit" value="save">
</form>
{% endif %}
{% endif %}
</div>
</div>
</body>
<!DOCTYPE html>
<html>
<head>
<title>burgercat</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head>
<body>
<div class="navbar">
<h1>burgercat</h1>
<a class="selected" href="/">home</a>
<a href="/chat">chat</a>
<a href="/post">post</a>
{% if userdata %}
<a href="/settings/logout" class="right r">log out</a>
<a href="/settings" class="right">{{ userdata.username }}</a>
{% else %}
<a href="/signup" class="right r">sign up</a>
<a href="/login" class="right">log in</a>
{% endif %}
</div>
<div class="postDiv">
<div class="profileDiv">
{% if userdata %}
{% if pageuser.id == userdata.id %}
<h2>edit mode</h2>
<p>remote content from media.tenor.com and cdn.discordapp.com is allowed</p>
<form class="editThing" method="post" enctype="multipart/form-data">
<textarea class="htmlBox" name="code" type="text" placeholder="<p>Hello World!</p>">{{ userdata.htmldescription }}</textarea>
<br><br>
<input class="submit" type="submit" value="save">
</form>
{% endif %}
{% endif %}
</div>
</div>
</body>
</html>

View File

@ -13,6 +13,7 @@
<div class="navbar">
<h1>burgercat</h1>
<a href="/">home</a>
<a href="/chat">chat</a>
<a href="/post">post</a>
{% if userdata %}
<a href="/settings/logout" class="right r">log out</a>

View File

@ -1,49 +1,50 @@
<!DOCTYPE html>
<html>
<head>
<title>burgercat</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head>
<body>
<div class="navbar">
<h1>burgercat</h1>
<a class="selected" href="/">home</a>
<a href="/post">post</a>
{% if userdata %}
<a href="/settings/logout" class="right r">log out</a>
<a href="/settings" class="right">{{ userdata.username }}</a>
{% else %}
<a href="/signup" class="right r">sign up</a>
<a href="/login" class="right">log in</a>
{% endif %}
</div>
<div class="postDiv">
<div class="profileDiv">
<h2>{{ pageuser.username }}</h2>
<div class="badgeDiv">
{% if pageuser.administrator == 1 %}
<p>Administrator</p>
{% endif %}
</div>
<p>Joined on {{ createddate }}</p>
{% if userdata %}
{% if pageuser.id == userdata.id %}
<a style="color: rgb(104, 104, 104); text-decoration: none;" href="/@{{ userdata.username }}/edit">edit page</a>
<br><br>
{% endif %}
{% endif %}
</div>
<iframe src="/api/page/{{ pageuser.id }}" class="profileIFrame" sandbox=""></iframe>
</div>
<style>
body {
overflow-y: hidden
}
</style>
</body>
<!DOCTYPE html>
<html>
<head>
<title>burgercat</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
</head>
<body>
<div class="navbar">
<h1>burgercat</h1>
<a class="selected" href="/">home</a>
<a href="/chat">chat</a>
<a href="/post">post</a>
{% if userdata %}
<a href="/settings/logout" class="right r">log out</a>
<a href="/settings" class="right">{{ userdata.username }}</a>
{% else %}
<a href="/signup" class="right r">sign up</a>
<a href="/login" class="right">log in</a>
{% endif %}
</div>
<div class="postDiv">
<div class="profileDiv">
<h2>{{ pageuser.username }}</h2>
<div class="badgeDiv">
{% if pageuser.administrator == 1 %}
<p>Administrator</p>
{% endif %}
</div>
<p>Joined on {{ createddate }}</p>
{% if userdata %}
{% if pageuser.id == userdata.id %}
<a style="color: rgb(104, 104, 104); text-decoration: none;" href="/@{{ userdata.username }}/edit">edit page</a>
<br><br>
{% endif %}
{% endif %}
</div>
<iframe src="/api/page/{{ pageuser.id }}" class="profileIFrame" sandbox=""></iframe>
</div>
<style>
body {
overflow-y: hidden
}
</style>
</body>
</html>