diff --git a/electron/main/index.ts b/electron/main/index.ts index 841e029..4d1821e 100644 --- a/electron/main/index.ts +++ b/electron/main/index.ts @@ -48,6 +48,7 @@ async function createWindow() { win = new BrowserWindow({ title: 'Main window', icon: join(process.env.PUBLIC, 'favicon.ico'), + backgroundColor: nativeTheme.shouldUseDarkColors ? '#262B37' : '#FFFFFF', //titleBarStyle: 'customButtonsOnHover', autoHideMenuBar: true, webPreferences: { diff --git a/electron/preload/index.ts b/electron/preload/index.ts index a532198..198d937 100644 --- a/electron/preload/index.ts +++ b/electron/preload/index.ts @@ -37,28 +37,10 @@ const safeDOM = { }, } -/** - * https://tobiasahlin.com/spinkit - * https://connoratherton.com/loaders - * https://projects.lukehaas.me/css-loaders - * https://matejkustec.github.io/SpinThatShit - */ + function useLoading() { const className = `loaders-css__square-spin` const styleContent = ` -@keyframes square-spin { - 25% { transform: perspective(100px) rotateX(180deg) rotateY(0); } - 50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); } - 75% { transform: perspective(100px) rotateX(0) rotateY(180deg); } - 100% { transform: perspective(100px) rotateX(0) rotateY(0); } -} -.${className} > div { - animation-fill-mode: both; - width: 50px; - height: 50px; - background: #fff; - animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -} .app-loading-wrap { position: fixed; top: 0; @@ -68,8 +50,16 @@ function useLoading() { display: flex; align-items: center; justify-content: center; - background: #282c34; + background: #fff; z-index: 9; +} +@media (prefers-color-scheme: dark) { + .${className} > div { + background: #fff; + } + .app-loading-wrap { + background: #262B37 + } } ` const oStyle = document.createElement('style') @@ -78,7 +68,7 @@ function useLoading() { oStyle.id = 'app-loading-style' oStyle.innerHTML = styleContent oDiv.className = 'app-loading-wrap' - oDiv.innerHTML = `