Using user prefered settings for selecting theme in the live editor
This commit is contained in:
Knut Sveidqvist
+1
-1
@@ -2476,6 +2476,6 @@
|
||||
#view.svelte-de7j0c{border:1px solor darkred;flex:1}#container.svelte-de7j0c{overflow-x:auto}.error.svelte-de7j0c{opacity:0.5}
|
||||
#card.svelte-94c5zs{border:1px solid lightgray;margin-bottom:16px}#title.svelte-94c5zs{border-bottom:1px solid lightgray}#content.svelte-94c5zs{padding-top:16px}.padding.svelte-94c5zs{padding:16px}
|
||||
#tag.svelte-kzz8td{height:auto;margin:0 8px 0 0;padding:0 7px;font-size:12px;line-height:20px;white-space:nowrap;border:1px solid #d9d9d9;border-radius:4px;cursor:default;font-size:smaller;color:#52c41a;background:#f6ffed;border-color:#b7eb8f;margin-left:8px}
|
||||
#markdown.svelte-13581ad{padding:7px;font-family:monospace;font-size:14px;width:300px}label[for="markdown"].svelte-13581ad{cursor:pointer;color:-webkit-link;color:-moz-link;color:blue;text-decoration:underline}
|
||||
#markdown.svelte-qfww15{padding:7px;font-family:monospace;font-size:14px;width:300px}label[for="markdown"].svelte-qfww15{cursor:pointer;color:-webkit-link;color:-moz-link;color:blue;text-decoration:underline}@media(prefers-color-scheme: dark){label[for="markdown"].svelte-qfww15{color:#d8d8d8}}
|
||||
#editor-root.svelte-1cfasmi{display:flex;height:100%}#col1.svelte-1cfasmi{width:35%}#col2.svelte-1cfasmi{width:65%;padding-left:32px}#app-title.svelte-1cfasmi{border-bottom:1px solid lightgrey;padding-bottom:32px;margin-bottom:32px;font-size:28px;font-weight:400;margin-top:0}#power.svelte-1cfasmi{width:100%;display:flex;justify-content:flex-end;align-items:center}#sampleLoader.svelte-1cfasmi{padding-bottom:10px;padding-left:10px}.botton-container.svelte-1cfasmi{margin-top:5px}
|
||||
#view-page.svelte-ylwsal{display:flex;height:100%}
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+124
-58
@@ -1,62 +1,128 @@
|
||||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@media (prefers-color-scheme: light) {
|
||||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0,100,200);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(0,80,160);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0.4em;
|
||||
margin: 0 0 0.5em 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f4f4f4;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
border-color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0,100,200);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(0,80,160);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0.4em;
|
||||
margin: 0 0 0.5em 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f4f4f4;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
border-color: #666;
|
||||
body {
|
||||
background-color: #3f3f3f;
|
||||
color: #c8c8c8;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html, body {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
a {
|
||||
color: rgb(0,100,200);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(0,80,160);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
padding: 0.4em;
|
||||
margin: 0 0 0.5em 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #f4f4f4;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
border-color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -14,6 +14,15 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #3f3f3f;
|
||||
color: #c8c8c8;
|
||||
}
|
||||
a, label {
|
||||
color: #d8d8d8;
|
||||
}
|
||||
}
|
||||
.mermaid {
|
||||
/* font-family: 'trebuchet ms', verdana, arial; */
|
||||
}
|
||||
|
||||
+2
-1
@@ -8,6 +8,7 @@ export const codeStore = writable(undefined);
|
||||
export const fromUrl = data => {
|
||||
let code;
|
||||
let state;
|
||||
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
try {
|
||||
let stateStr = Base64.decode(data)
|
||||
state = JSON.parse(stateStr);
|
||||
@@ -27,7 +28,7 @@ export const fromUrl = data => {
|
||||
C -->|Two| E[iPhone]
|
||||
C -->|Three| F[fa:fa-car Car]
|
||||
`;
|
||||
state = { code, mermaid: { theme: 'default' } };
|
||||
state = { code, mermaid: { theme: isDarkMode?'dark':'default' } };
|
||||
}
|
||||
|
||||
codeStore.set(state);
|
||||
|
||||
@@ -22,6 +22,7 @@ let editorElem = null;
|
||||
|
||||
let decorations = [];
|
||||
const decArr = [];
|
||||
|
||||
let oldConf = { theme: 'default' };
|
||||
const handleConfUpdate = conf => {
|
||||
try {
|
||||
|
||||
@@ -13,7 +13,8 @@ import 'monaco-editor/esm/vs/editor/contrib/find/findController.js';
|
||||
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
|
||||
|
||||
export let code = '';
|
||||
export let conf = { theme: 'default' };
|
||||
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
export let conf = { theme: isDarkMode?'dark':'default' };
|
||||
let edit;
|
||||
export let error = false;
|
||||
|
||||
|
||||
@@ -83,6 +83,11 @@ label[for="markdown"] {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
label[for="markdown"] {
|
||||
color: #d8d8d8;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="links" >
|
||||
|
||||
Reference in New Issue
Block a user