insomnia/packages/insomnia-app/app/ui/index.js
Florian Stellbrink 565f389d36
Add OS dark mode support (#2868)
* Add settings for color scheme detection and themes

Default light and dark themes can still be changed.
For now its studio-light and default for core, and studio-dark and studio-light for designer.

* Add color scheme type and supporting methods

The detection of dark scheme is based on the background color at the moment.
This seems to work pretty well, but is not an ideal solution.
I think themes should at least get to override this.

* Add support for choosing light and dark theme to settings

This adds a checkbox to the theme settings that determines whether we use the OS color scheme.
If we don't (default) everything stays the same as before.
If we do, themes are rendered in two groups. One for the light themes and one for the dark themes. They can be chosen independently. None of this overrides the default theme choice.

* Add padding to the theme settings tab

Themes are still aligned by adding negative margin.
A bit of a hack, open for suggestions.

* Update theme on OS color scheme change

* Replace usages of setTheme with applyColorScheme

This makes sure that we don't override the user's choice.

* Update packages/insomnia-app/app/plugins/misc.js

Co-authored-by: Opender Singh <opender94@gmail.com>

* Remove dark mode heuristic

* Remove unused button value

* Update theme settings design

* Update packages/insomnia-app/app/ui/components/settings/theme.js

Co-authored-by: Opender Singh <opender94@gmail.com>

* Update packages/insomnia-app/app/ui/components/settings/theme.js

Co-authored-by: Opender Singh <opender94@gmail.com>

* Replace object literal lookups

Do not use object literal lookups to make code more readable

* Remove unused parameter

* Disable default theme select when auto detection is enabled

* Fix imports after rebase

* Update packages/insomnia-app/app/ui/components/modals/settings-modal.js

Co-authored-by: Opender Singh <opender94@gmail.com>

* Update packages/insomnia-app/app/ui/components/modals/settings-modal.js

Co-authored-by: Opender Singh <opender94@gmail.com>

* Remove theme header

* Disable hover animation and border on disabled theme buttons

* Clean up double negation in css

Replace :not(:disabled) with :enabled. Not sure what I was thinking there.

* Update index.js

Co-authored-by: Opender Singh <opender94@gmail.com>
Co-authored-by: Opender Singh <opender.singh@konghq.com>
2021-03-13 16:38:54 +13:00

93 lines
2.8 KiB
JavaScript

import { hot } from 'react-hot-loader';
import * as React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './containers/app';
import * as models from '../models';
import * as db from '../common/database';
import { init as initStore } from './redux/modules';
import { init as initPlugins } from '../plugins';
import './css/index.less';
import { getAppLongName, isDevelopment } from '../common/constants';
import { setFont, applyColorScheme } from '../plugins/misc';
import { trackEvent } from '../common/analytics';
import * as styledComponents from 'styled-components';
import { initNewOAuthSession } from '../network/o-auth-2/misc';
import { initializeLogging } from '../common/log';
initializeLogging();
// Handy little helper
document.body.setAttribute('data-platform', process.platform);
document.title = getAppLongName();
(async function() {
await db.initClient();
await initPlugins();
const settings = await models.settings.getOrCreate();
if (settings.clearOAuth2SessionOnRestart) {
initNewOAuthSession();
}
await applyColorScheme(settings);
await setFont(settings);
// Create Redux store
const store = await initStore();
const render = App => {
const TheHottestApp = hot(module)(App);
ReactDOM.render(
<Provider store={store}>
<TheHottestApp />
</Provider>,
document.getElementById('root'),
);
};
render(App);
})();
// Export some useful things for dev
if (isDevelopment()) {
window.models = models;
window.db = db;
}
// Styled components is added to the window object here, for plugins to use.
// UI plugins built with webpack (such as insomnia-plugin-kong-portal) define styled-components as an external resolved
// from the window object. This is to ensure there is only one instance of styled-components on the page.
// Because styled-components are loaded at runtime, they don't have direct access to modules in the electron bundle
window['styled-components'] = styledComponents;
// Catch uncaught errors and report them
if (window && !isDevelopment()) {
window.addEventListener('error', e => {
console.error('Uncaught Error', e);
trackEvent('Error', 'Uncaught Error');
});
window.addEventListener('unhandledrejection', e => {
console.error('Unhandled Promise', e);
trackEvent('Error', 'Uncaught Promise');
});
}
function showUpdateNotification() {
console.log('[app] Update Available');
// eslint-disable-next-line no-new
new window.Notification('Insomnia Update Ready', {
body: 'Relaunch the app for it to take effect',
silent: true,
sticky: true,
});
}
const { ipcRenderer } = require('electron');
ipcRenderer.on('update-available', () => {
// Give it a few seconds before showing this. Sometimes, when
// you relaunch too soon it doesn't work the first time.
setTimeout(showUpdateNotification, 1000 * 10);
});