theme selector

Author: KittyJose

packages/tdb-dashboard/src/pages/DocumentView.js

@@ -12,6 +12,8 @@ import {useTDBDocuments} from "@terminusdb/terminusdb-documents-ui"
 import {ErrorMessageReport} from "../components/ErrorMessageReport"
 import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__darkly.css'
 
+//import '../../../tdb-documents-ui/src/css/terminusdb__light.css'
+
 export const DocumentView = () => {   
     const { branch,setChangeRequestBranch,woqlClient,currentChangeRequest} = WOQLClientObj()
     const {type, docid} = useParams()

packages/tdb-documents-ui/sandbox/src/View.js

@@ -10,7 +10,7 @@ import { Search } from "./SearchComponent"
 
 //import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__darkly.css'
 //import '@terminusdb/terminusdb-documents-ui/dist/css/terminusdb__light.css'
-//import '../../src/css/terminusdb__darkly.css'
+import '../../src/css/terminusdb__darkly.css'
 //import '../../src/css/terminusdb__light.css'
 
 export const View = () => { 
@@ -42,7 +42,7 @@ export const View = () => {
         onTraverse={handleTraverse}
         onSelect={<Search/>}
         theme="darkly"
-        //showThemeSelector={true}
+        showThemeSelector={true}
         onSubmit={handleSubmit}
         type={type}
       />

packages/tdb-documents-ui/src/css/terminusdb__light.css

@@ -7,6 +7,8 @@
   --input-border: 1px solid #000;
   --required-color: #6c757d;
   --tdb-label-width: 13rem; 
+  --label-color: var(--input-color);
+  --tdb-light: #f8f9fa;
   --nested-control-label-color: #f8f8f8;
   --nested-required-label-color: #ccc;
   --tdb-latlng-label-width: 5rem; 
@@ -15,6 +17,11 @@
   --array-margin-bottom: 2rem;
 }
 
+.tdb__frame__viewer {
+  background-color: var(--tdb-light)!important;
+  padding: 1rem;
+}
+
 /** tdb input */
 .tdb__doc__input {
   color: var(--input-color) !important;