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:
parent
de9468c6ab
commit
068cd94de3
2 changed files with 11 additions and 6 deletions
|
@ -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.
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue