Add light/dark mode support for wiki docs and better dark mode for README logo (#17)

* docs(README): Invert logo image in dark mode

* docs(theme): Add light/dark mode support
This commit is contained in:
Ron Au 2023-03-27 03:21:16 +11:00 committed by GitHub
parent de9468c6ab
commit 068cd94de3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 6 deletions

View file

@ -1,6 +1,13 @@
<style>
@media (prefers-color-scheme: dark) {
#dmf-logo { filter: invert() }
}
</style>
<p align="center">
<a href="#welcome-to-the-darktide-mod-framework-vmf-repository">
<img
id="dmf-logo"
alt="Darktide Mod Framework"
src="./assets/dmf_logo_black.png"
width="600"
@ -8,7 +15,6 @@
</a>
</p>
## Welcome to the Darktide Mod Framework (DMF) Repository!
The Darktide Mod Framework is an open-source, community-run framework of modules that provides enhanced modding capabilities and support. The framework is designed to be both independent and lightweight; making no changes to gameplay on its own.

View file

@ -12,10 +12,8 @@
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css"
/>
<link rel="stylesheet" media="(prefers-color-scheme: light)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple-dark.css">
<style>
h1.app-name {
font-weight: 900;
@ -27,7 +25,7 @@
<body>
<div id="app"></div>
<script>
var repo = "Darktide-Mod-Framework/Darktide-Mod-Framework";
const repo = "Darktide-Mod-Framework/Darktide-Mod-Framework";
window.$docsify = {
name: "Darktide Mod Framework",
repo,
@ -43,6 +41,7 @@
</script>
<!-- Docsify v4 -->
<script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/js/docsify-themeable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-lua.min.js"></script>
</body>