mirror_html/DirectoryLister
1
0
Fork 0
mirror of https://github.com/DirectoryLister/DirectoryLister.git synced 2025-08-11 08:34:23 +02:00
Code Issues Projects Releases Wiki Activity

Fixed code block colors in dark mode

Browse Source
This commit is contained in:
Chris Kankiewicz
2022-12-08 08:41:36 -07:00
parent 460cf7f6ed
commit 0679d967c3
6 changed files with 12 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/resources/js/app.js
View File

@@ -5,6 +5,8 @@ import hljs from 'highlight.js';
import Application from './components/Application.js';
import FileInfoModal from './components/FileInfoModal.js';
Alpine.store('theme', 'light');
Alpine.data('application', Application);
Alpine.data('fileInfoModal', FileInfoModal);

8
app/resources/js/components/Application.js
View File

@@ -1,18 +1,16 @@
export default () => ({
theme: 'light',
init() {
const [cookie, theme] = document.cookie.match(/theme=(dark|light)/) || [null, null];
this.theme = theme || (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
this.$store.theme = theme || (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
if (cookie === undefined) {
this.storeThemeCookie(this.theme);
this.storeThemeCookie(this.$store.theme);
}
},
toggleTheme() {
this.theme = this.theme == 'light' ? 'dark' : 'light';
this.$store.theme = this.$store.theme == 'light' ? 'dark' : 'light';
},
storeThemeCookie(theme) {

3
app/resources/sass/app.scss
View File

@@ -7,9 +7,6 @@ $fa-font-path: "./webfonts";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
// Code highlighting
@import "~highlight.js/scss/github.scss";
// Fonts
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Work+Sans&display=swap");

12
app/resources/sass/markdown.scss
View File

@@ -61,14 +61,6 @@
@apply mt-4;
}
code {
@apply bg-gray-200 rounded-sm font-mono p-1 overflow-y-auto;
}
pre > code {
@apply block p-4 text-sm whitespace-pre;
}
hr {
@apply border-t-2 border-gray-400 my-4;
}
@@ -121,10 +113,6 @@
@apply border-gray-800;
}
code {
@apply bg-gray-800;
}
hr {
@apply border-gray-800;
}

5
app/views/layouts/app.twig
View File

@@ -9,6 +9,9 @@
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="{{ asset('app.css') }}">
<link x-data rel="stylesheet" href="{{ asset('hljs-github.css') }}" :disabled="$store.theme !== 'light'">
<link x-data rel="stylesheet" href="{{ asset('hljs-github-dark.css') }}" :disabled="$store.theme !== 'dark'">
<script src="{{ asset('app.js') }}" defer></script>
{% if config('google_analytics_id', false) %}
@@ -21,7 +24,7 @@
<title>{{ title }} &bull; {{ config('site_title') }}</title>
<div class="{{ theme }}" x-data="application" x-effect="storeThemeCookie(theme)" :class="{ 'dark': theme === 'dark' }">
<div class="{{ theme }}" x-data="application" x-effect="storeThemeCookie($store.theme)" :class="{ 'dark': $store.theme === 'dark' }">
<div class="flex flex-col min-h-screen font-sans dark:bg-gray-800">
{% block content %}{% endblock %}
</div>

3
webpack.mix.js
View File

@@ -16,6 +16,9 @@ mix.js('app/resources/js/app.js', 'app/assets/app.js');
mix.copyDirectory('app/resources/images', 'app/assets/images');
mix.copy('node_modules/highlight.js/styles/github.css', 'app/assets/hljs-github.css');
mix.copy('node_modules/highlight.js/styles/github-dark.css', 'app/assets/hljs-github-dark-dimmed.css');
mix.copy(
'node_modules/@fortawesome/fontawesome-free/webfonts/fa-{brands,solid}-*',
'app/assets/webfonts'