├── .gitignore
├── preload.js
├── style.css
├── renderer.js
├── package.json
├── main.js
├── index.html
└── menu.js
/.gitignore:
--------------------------------------------------------------------------------
1 | package-lock.json
2 | node_modules
--------------------------------------------------------------------------------
/preload.js:
--------------------------------------------------------------------------------
1 | const { contextBridge, ipcRenderer } = require('electron')
2 |
3 | contextBridge.exposeInMainWorld('electronAPI', {
4 | onUpdateTheme: (callback) => ipcRenderer.on('update-theme', callback)
5 | })
6 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --scheme: light dark;
3 | color-scheme: var(--scheme);
4 | }
5 |
6 | body {
7 | margin: 0;
8 | padding: 0;
9 | min-height: 100vh;
10 | display: grid;
11 | place-content: center;
12 | font-family: system-ui;
13 | }
--------------------------------------------------------------------------------
/renderer.js:
--------------------------------------------------------------------------------
1 | const $ = selector => document.querySelector(selector)
2 |
3 | const $count = $('#count')
4 | const $button = $('button')
5 |
6 | $button.addEventListener('click', () => {
7 | const count = +$count.innerHTML
8 | $count.innerHTML = (count + 1).toString()
9 | })
10 |
11 | window.electronAPI.onUpdateTheme((event, theme) => {
12 | const root = document.documentElement
13 | console.log({ theme })
14 | root.style.setProperty('--scheme', theme)
15 | })
16 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "electron-app",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "main.js",
6 | "scripts": {
7 | "dev": "electron .",
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "devDependencies": {
14 | "electron": "20.0.3",
15 | "standard": "17.0.0"
16 | },
17 | "eslintConfig": {
18 | "extends": "standard"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | const { app, BrowserWindow } = require('electron')
2 | const { setMainMenu } = require('./menu.js')
3 | const path = require('path')
4 |
5 | const createWindow = () => {
6 | const mainWindow = new BrowserWindow({
7 | width: 800,
8 | height: 600,
9 | minWidth: 400,
10 | minHeight: 400,
11 | webPreferences: {
12 | preload: path.join(__dirname, 'preload.js')
13 | }
14 | })
15 |
16 | mainWindow.loadFile('index.html')
17 |
18 | setMainMenu(mainWindow)
19 | }
20 |
21 | app.whenReady().then(() => {
22 | createWindow()
23 | })
24 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
16 |
17 |
18 |
19 | midumark
20 |
21 |
22 |
23 |
24 |
25 | 0
26 |
27 |
--------------------------------------------------------------------------------
/menu.js:
--------------------------------------------------------------------------------
1 | const { Menu, dialog } = require('electron')
2 |
3 | const setMainMenu = (mainWindow) => {
4 | const template = [
5 | {
6 | label: 'miduMarkDown', // en modo desarrollo, sale Electron
7 | submenu: [
8 | { role: 'about' },
9 | { type: 'separator' },
10 | { role: 'services' },
11 | { type: 'separator' },
12 | { role: 'hide' },
13 | { role: 'hideOthers' },
14 | { role: 'unhide' },
15 | { type: 'separator' },
16 | { role: 'quit' }
17 | ]
18 | },
19 | {
20 | label: 'Edit',
21 | submenu: [
22 | {
23 | label: 'Abrir archivo',
24 | click: () => {
25 | dialog.showOpenDialog(mainWindow, {
26 | filters: [
27 | {
28 | name: 'Markdown',
29 | extensions: ['md']
30 | }
31 | ],
32 | title: 'Selecciona tu archivo Markdown',
33 | defaultPath: '~/Desktop',
34 | properties: ['openFile', 'openDirectory']
35 | }).then(result => {
36 | console.log(result.canceled)
37 | console.log(result.filePaths)
38 | }).catch(err => {
39 | console.log(err)
40 | })
41 | }
42 | }
43 | ]
44 | },
45 | {
46 | label: 'Themes',
47 | submenu: [
48 | {
49 | label: 'Light',
50 | click: () => {
51 | mainWindow.webContents.send('update-theme', 'light')
52 | }
53 | },
54 | {
55 | label: 'Dark',
56 | click: () => {
57 | mainWindow.webContents.send('update-theme', 'dark')
58 | }
59 | }
60 | ]
61 | },
62 | {
63 | label: 'View',
64 | submenu: [
65 | { role: 'reload' },
66 | { role: 'forceReload' },
67 | { role: 'toggleDevTools' },
68 | { type: 'separator' },
69 | { role: 'resetZoom' },
70 | { role: 'zoomIn' },
71 | { role: 'zoomOut' },
72 | { type: 'separator' },
73 | { role: 'togglefullscreen' }
74 | ]
75 | }
76 | ]
77 |
78 | const menu = Menu.buildFromTemplate(template)
79 | Menu.setApplicationMenu(menu)
80 | }
81 |
82 | module.exports = {
83 | setMainMenu
84 | }
85 |
--------------------------------------------------------------------------------