- Create a Desktop app today with SvelteKit and make it repsonsive with Tailwind
- Electron is already setup in a way for you to create API's that you can use in any of your Svelte components.
- See the API's in this template here
npx degit "https://github.com/DogFoxX/electron-sveltekit-tailwind" "<folder-name>"
Change <folder-name>
to the directory (without <>) you wish to clone this repo into.
npm install
npm run dev
npm run build
npm run deploy
If deploying to github releases, change the token
inside electron-builder.json
to your github access token.
Make sure that electron-builder.json
is excluded in .gitignore
before deploying.
Alternatively, remove the token
property and set your github access token as an ENV variable.
Open a new bash terminal and run
export GH_TOKEN=YOURTOKEN
Inside the electron
folder you will find the preload.cjs
which contains some APIs that we use in this template.
theme.set(themeMode);
- Call the function in any of your components.
themeMode
: String "dark", "light" or "system"- Define your theme colors in
src/lib/css/theme-colors.css
theme.get();
Get the current theme mode from electron-store
- This template sets the Electron window to
frame: false
which means a custom titlebar with minimize, maximize and close is created as a Svelte component. - The buttons call the following APIs
mainWindow.toggleMax();
toggles the window to maximized or restoredmainWindow.minimze();
minimizes the windowmainWindow.close();
closes the window and exits the app
mainWindow.getState();
returns a boolean. Used in the window resized event to check whether the window was maximized or not.