use dark graghite for screenshots

Author: neSpecc

codex-ui/src/vue/components/editor/Editor.vue

@@ -80,7 +80,7 @@ defineExpose({
   /**
    * Returns the editor holder
    */
-  element: editorComponent,
+  element: editorComponent.value,
 });
 </script>
 

src/infrastructure/utils/screenshot.ts

@@ -12,6 +12,10 @@ export async function makeElementScreenshot(element: HTMLElement, containerStyle
    */
   const screenshotContainer = document.createElement('div');
 
+  screenshotContainer.setAttribute('color-scheme', 'dark');
+  screenshotContainer.setAttribute('theme-base', 'graphite');
+  screenshotContainer.setAttribute('theme-accent', 'sky');
+
   /**
    * Assign passed styles to container
    */

src/presentation/pages/Note.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, toRef, watch, toValue } from 'vue';
+import { ref, toRef, watch } from 'vue';
 import { Button, Editor } from 'codex-ui/vue';
 import useNote from '@/application/services/useNote';
 import { useRouter } from 'vue-router';
@@ -122,7 +122,7 @@ async function noteChanged(data: NoteContent): Promise<void> {
   /**
    * Get html element with note
    */
-  const editorElement = editor.value ? toValue(editor.value.element) : null;
+  const editorElement = editor.value ? editor.value.element : null;
 
   if (!isEmpty) {
     await save(data, props.parentId);
@@ -133,6 +133,7 @@ async function noteChanged(data: NoteContent): Promise<void> {
     if (editorElement !== null) {
       updatedNoteCover = await makeElementScreenshot(editorElement, {
         background: 'var(--base--bg-primary)',
+        color: 'var(--base--text)',
         display: 'flex',
         justifyContent: 'center',
         width: '1200px',