Ellpeck/TinyLifeWeb
1
0
Fork 0
mirror of https://github.com/Ellpeck/TinyLifeWeb.git synced 2024-11-26 12:58:34 +01:00
Code Issues Projects Releases Wiki Activity

initial dark theme support

Browse source
This commit is contained in:
Ell 2023-06-13 17:24:58 +02:00
parent 76a6e0f47a
commit 7de2241306
6 changed files with 68 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web/_includes/navbar.html
View file

@ -1,4 +1,12 @@
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light" id="navbar"> <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light" id="navbar">
<script>
if (darkTheme) {
let navbar = $("#navbar");
navbar.removeClass("navbar-light bg-light");
navbar.addClass("navbar-dark bg-dark");
}
</script>
<div class="container navbar-container"> <div class="container navbar-container">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img src="/media/icon.png" width="40" height="40" alt="The Tiny Life logo"> <img src="/media/icon.png" width="40" height="40" alt="The Tiny Life logo">
@ -16,6 +24,11 @@
{% include {{ layout.nav }} %} {% include {{ layout.nav }} %}
{% endif %} {% endif %}
</div> </div>
<span class="navbar-text custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="dark-mode">
<label class="custom-control-label" for="dark-mode">🌙 Dark</label>
</span>
</div> </div>
</div> </div>
</nav> </nav>

16
web/_includes/social.html
View file

@ -10,8 +10,14 @@
<script defer src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <script defer src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div> </div>
<div class="col-auto" style="padding: 10px;"> <div class="col-auto" style="padding: 10px;">
<iframe id="discord-widget" title="Ellpeck Games Discord server" width="350" height="600" allowtransparency="true" frameborder="0" src="https://discordapp.com/widget?id=181435613147430913&theme=light"></iframe> <iframe id="discord-widget" title="Ellpeck Games Discord server" width="350" height="600" allowtransparency="true" frameborder="0"></iframe>
</div> </div>
<script>
let theme = darkTheme ? "dark" :"light";
$("#discord-widget").attr("src", `https://discordapp.com/widget?id=181435613147430913&theme=${theme}`);
$(".twitter-timeline").attr("data-theme", theme);
</script>
</div> </div>
<div id="subscribe" class="mailing-list bg-light"> <div id="subscribe" class="mailing-list bg-light">
@ -32,5 +38,13 @@
<p><input type="submit" value="Subscribe"></p> <p><input type="submit" value="Subscribe"></p>
</div> </div>
</form> </form>
<script>
if (darkTheme) {
let navbar = $("#subscribe");
navbar.removeClass("bg-light");
navbar.addClass("bg-dark");
}
</script>
</div> </div>
</div> </div>

11
web/_layouts/default.html
View file

@ -21,7 +21,7 @@
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&display=swap">
<link rel="stylesheet" href="https://fonts.cdnfonts.com/css/cadman"> <link rel="stylesheet" href="https://fonts.cdnfonts.com/css/cadman">
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="/style/style.css">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta property="og:title" content="{{ page.title }}"> <meta property="og:title" content="{{ page.title }}">
@ -35,6 +35,7 @@
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="/main.js"></script>
</head> </head>
<body data-spy="scroll" data-target="#navbar" data-offset="80"> <body data-spy="scroll" data-target="#navbar" data-offset="80">
@ -43,6 +44,14 @@
{{ content }} {{ content }}
<div class="footer bg-light"> <div class="footer bg-light">
<script>
if (darkTheme) {
let footer = $(".footer");
footer.removeClass("bg-light");
footer.addClass("bg-dark");
}
</script>
<a href="https://github.com/Ellpeck/TinyLifeWeb">&copy; 2021-2023</a> <a href="https://games.ellpeck.de">Ellpeck Games</a>, <a href="https://tophat.studio/">Top Hat Studios</a> &ndash; <a href="https://ellpeck.de/impressum">Impressum</a> &ndash; <a href="https://ellpeck.de/privacy">Privacy</a> &ndash; <a href="https://status.ellpeck.de">Status</a> <a href="https://github.com/Ellpeck/TinyLifeWeb">&copy; 2021-2023</a> <a href="https://games.ellpeck.de">Ellpeck Games</a>, <a href="https://tophat.studio/">Top Hat Studios</a> &ndash; <a href="https://ellpeck.de/impressum">Impressum</a> &ndash; <a href="https://ellpeck.de/privacy">Privacy</a> &ndash; <a href="https://status.ellpeck.de">Status</a>
</div> </div>
</body> </body>

21
web/main.js Normal file
View file

@ -0,0 +1,21 @@
const darkStorage = localStorage.getItem("dark");
const darkTheme = darkStorage === null ? window.matchMedia("(prefers-color-scheme: dark)").matches : darkStorage === "true";
if (darkTheme) {
$('head').append($("<link/>", {
rel: "stylesheet",
href: "/style/dark.css"
}));
}
$(function () {
$('.navbar-collapse a').on('click', () => $('.navbar-collapse').collapse('hide'));
let mode = $('#dark-mode');
mode.prop('checked', darkTheme);
mode.on('click', function () {
localStorage.setItem("dark", $(this).prop('checked'));
location.hash = "";
location.reload();
});
});

8
web/style/dark.css Normal file
View file

@ -0,0 +1,8 @@
body {
color: white;
background-color: #1b1b1b;
}
.text-muted {
color: #929aa0 !important;
}

2
web/style.css → web/style/style.css
View file

@ -16,7 +16,7 @@ h1, h2, h3, h4, h5, h6, .nav-item {
} }
.top { .top {
background-image: url("media/large_background.png"); background-image: url("/media/large_background.png");
background-size: cover; background-size: cover;
color: white; color: white;
} }