Skip to content

Commit fdedbaa

Browse files
fix for elements dark mode (#953)
1 parent 4331215 commit fdedbaa

File tree

1 file changed

+28
-2
lines changed

1 file changed

+28
-2
lines changed

resources/views/docs.blade.php

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<meta name="color-scheme" content="{{ $config->get('ui.theme', 'light') }}">
77
<title>{{ $config->get('ui.title', config('app.name') . ' - API Docs') }}</title>
88

9-
<script src="https://unpkg.com/@stoplight/elements@8.3.4/web-components.min.js"></script>
10-
<link rel="stylesheet" href="https://unpkg.com/@stoplight/elements@8.3.4/styles.min.css">
9+
<script src="https://unpkg.com/@stoplight/elements@9.0.6/web-components.min.js"></script>
10+
<link rel="stylesheet" href="https://unpkg.com/@stoplight/elements@9.0.6/styles.min.css">
1111

1212
<script>
1313
const originalFetch = window.fetch;
@@ -48,6 +48,32 @@
4848
return originalFetch(url, options);
4949
};
5050
</script>
51+
52+
<style>
53+
html, body { margin:0; height:100%; }
54+
body { background-color: var(--color-canvas); }
55+
/* issues about the dark theme of stoplight/mosaic-code-viewer using web component:
56+
* https://github.com/stoplightio/elements/issues/2188#issuecomment-1485461965
57+
*/
58+
[data-theme="dark"] .token.property {
59+
color: rgb(128, 203, 196) !important;
60+
}
61+
[data-theme="dark"] .token.operator {
62+
color: rgb(255, 123, 114) !important;
63+
}
64+
[data-theme="dark"] .token.number {
65+
color: rgb(247, 140, 108) !important;
66+
}
67+
[data-theme="dark"] .token.string {
68+
color: rgb(165, 214, 255) !important;
69+
}
70+
[data-theme="dark"] .token.boolean {
71+
color: rgb(121, 192, 255) !important;
72+
}
73+
[data-theme="dark"] .token.punctuation {
74+
color: #dbdbdb !important;
75+
}
76+
</style>
5177
</head>
5278
<body style="height: 100vh; overflow-y: hidden">
5379
<elements-api

0 commit comments

Comments
 (0)