fix: code editor output on dark mode

nicosh · nicosh · commit 91d95d3c5ac3 · 2021-10-04T17:19:49.000+02:00
also fixed todo cards color in light mode
diff --git a/public/sandbox.html b/public/sandbox.html
@@ -33,9 +33,12 @@
         #holder{
             position: relative;
         }
+        .dark{
+            color : #fff;
+        }
     </style>
 </head>
-<body>
+<body id="body">
 
     <div id="holder">
         <div class="language-javascript" id="editor"></div>
diff --git a/public/script.js b/public/script.js
@@ -1,3 +1,13 @@
+const urlSearchParams = new URLSearchParams(window.location.search);
+const params = Object.fromEntries(urlSearchParams.entries());
+if(params.theme === "dark"){
+    document.getElementById("body").classList.remove('light');
+    document.getElementById("body").classList.add('dark');
+}else{
+    document.getElementById("body").classList.remove('dark');
+    document.getElementById("body").classList.add('light');
+}
+
 hljs.configure({ ignoreUnescapedHTML: true })
 const jar = CodeJar(document.querySelector('#editor'), hljs.highlightElement, { tab: '\t' });
 jar.updateCode(`console.log("Hello there!")`)
diff --git a/src/App.css b/src/App.css
@@ -130,7 +130,7 @@
   color: black;
 }
 
-.react-kanban-card {
+.dark .react-kanban-card {
   backdrop-filter: blur(16px) saturate(180%);
   -webkit-backdrop-filter: blur(16px) saturate(180%);
   background-color: rgba(17, 25, 40, 0);
@@ -143,7 +143,7 @@
 }
 
 @media (max-width: 1400px) {
-  .react-kanban-card, .react-kanban-card-adder-form, .react-kanban-card-skeleton {
+  .dark .react-kanban-card, .react-kanban-card-adder-form, .react-kanban-card-skeleton {
     border: 2px;
     background-color: black;
     box-sizing: border-box;
diff --git a/src/components/sandbox.js b/src/components/sandbox.js
@@ -1,5 +1,8 @@
+import { useApp } from "./context/appContext"
+
 const Sandbox = () => {
-    return <iframe style={{minHeight : 600, width : "100%"}} src="sandbox.html" />
+    const {theme } = useApp()
+    return <iframe style={{minHeight : 600, width : "100%"}} src={`sandbox.html?theme=${theme}`} />
 }
 
 export default Sandbox

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,8 @@`
	`1`	`+import { useApp } from "./context/appContext"`
	`2`	`+`
`1`	`3`	`const Sandbox = () => {`
`2`		`- return <iframe style={{minHeight : 600, width : "100%"}} src="sandbox.html" />`
	`4`	`+ const {theme } = useApp()`
	`5`	+ return <iframe style={{minHeight : 600, width : "100%"}} src={`sandbox.html?theme=${theme}`} />
`3`	`6`	`}`
`4`	`7`
`5`	`8`	`export default Sandbox`