mirror of
https://github.com/Kong/insomnia.git
synced 2026-10-25 08:09:06 -04:00
JS themes and convert themes (#1047)
* JS themes and convert themes * Publish - insomnia-plugin-core-themes@1.0.1 - insomnia-app@1.0.28 * Publish - insomnia-plugin-core-themes@1.0.2 - insomnia-app@1.0.29 * Publish - insomnia-plugin-core-themes@1.0.3 - insomnia-app@1.0.30
This commit is contained in:
Gregory Schier authored and GitHub committed
1 parent
c7dae0cdf3
commit
5ad79f3bbc
52 files changed
+1223
-744
No files matched your search
@@ -7,6 +7,7 @@ import { PLUGIN_PATH } from '../common/constants';
|
||||
import { resolveHomePath } from '../common/misc';
|
||||
import { showError } from '../ui/components/modals/index';
|
||||
import type { PluginTemplateTag } from '../templating/extensions/index';
|
||||
import type { PluginTheme } from './misc';
|
||||
|
||||
export type Plugin = {
|
||||
name: string,
|
||||
@@ -31,6 +32,11 @@ export type ResponseHook = {
|
||||
hook: Function
|
||||
};
|
||||
|
||||
export type Theme = {
|
||||
plugin: Plugin,
|
||||
theme: PluginTheme
|
||||
};
|
||||
|
||||
const CORE_PLUGINS = [
|
||||
'insomnia-plugin-base64',
|
||||
'insomnia-plugin-hash',
|
||||
@@ -40,7 +46,8 @@ const CORE_PLUGINS = [
|
||||
'insomnia-plugin-prompt',
|
||||
'insomnia-plugin-request',
|
||||
'insomnia-plugin-response',
|
||||
'insomnia-plugin-jsonpath'
|
||||
'insomnia-plugin-jsonpath',
|
||||
'insomnia-plugin-core-themes'
|
||||
];
|
||||
|
||||
let plugins: ?Array<Plugin> = null;
|
||||
@@ -193,6 +200,16 @@ export async function getResponseHooks(): Promise<Array<ResponseHook>> {
|
||||
return functions;
|
||||
}
|
||||
|
||||
export async function getThemes(): Promise<Array<Theme>> {
|
||||
let extensions = [];
|
||||
for (const plugin of await getPlugins()) {
|
||||
const themes = plugin.module.themes || [];
|
||||
extensions = [...extensions, ...themes.map(theme => ({ plugin, theme }))];
|
||||
}
|
||||
|
||||
return extensions;
|
||||
}
|
||||
|
||||
function _initPlugin(packageJSON: Object, module: any, path: ?string): Plugin {
|
||||
const meta = packageJSON.insomnia || {};
|
||||
return {
|
||||
|
||||
@@ -0,0 +1,256 @@
|
||||
// @flow
|
||||
import { render, THROW_ON_ERROR } from '../common/render';
|
||||
import { getThemes } from './index';
|
||||
|
||||
type ThemeBlock = {
|
||||
background?: {
|
||||
default: string,
|
||||
success?: string,
|
||||
notice?: string,
|
||||
warning?: string,
|
||||
danger?: string,
|
||||
surprise?: string,
|
||||
info?: string
|
||||
},
|
||||
foreground?: {
|
||||
default: string,
|
||||
success?: string,
|
||||
notice?: string,
|
||||
warning?: string,
|
||||
danger?: string,
|
||||
surprise?: string,
|
||||
info?: string
|
||||
},
|
||||
highlight?: {
|
||||
default: string,
|
||||
xxs?: string,
|
||||
xs?: string,
|
||||
sm?: string,
|
||||
md?: string,
|
||||
lg?: string,
|
||||
xl?: string
|
||||
}
|
||||
};
|
||||
|
||||
type ThemeInner = {
|
||||
...ThemeBlock,
|
||||
styles: ?{
|
||||
overlay?: ThemeBlock,
|
||||
dropdown?: ThemeBlock,
|
||||
tooltip?: ThemeBlock,
|
||||
sidebar?: ThemeBlock,
|
||||
sidebarHeader?: ThemeBlock,
|
||||
sidebarList?: ThemeBlock,
|
||||
sidebarActions?: ThemeBlock,
|
||||
pane?: ThemeBlock,
|
||||
paneHeader?: ThemeBlock,
|
||||
dialog?: ThemeBlock,
|
||||
dialogHeader?: ThemeBlock,
|
||||
dialogFooter?: ThemeBlock,
|
||||
transparentOverlay?: ThemeBlock,
|
||||
link?: ThemeBlock
|
||||
}
|
||||
};
|
||||
|
||||
export type PluginTheme = {
|
||||
name: string,
|
||||
displayName: string,
|
||||
theme: ThemeInner
|
||||
};
|
||||
|
||||
export async function generateThemeCSS(theme: PluginTheme): Promise<string> {
|
||||
const renderedTheme: ThemeInner = await render(
|
||||
theme.theme,
|
||||
theme.theme,
|
||||
null,
|
||||
THROW_ON_ERROR,
|
||||
theme.name
|
||||
);
|
||||
const n = theme.name;
|
||||
|
||||
let css = '';
|
||||
css += wrapStyles(n, '', getThemeBlockCSS(renderedTheme));
|
||||
|
||||
if (renderedTheme.styles) {
|
||||
const styles = renderedTheme.styles;
|
||||
|
||||
// Dropdown Menus
|
||||
css += wrapStyles(
|
||||
n,
|
||||
'.theme--dropdown__menu',
|
||||
getThemeBlockCSS(styles.dialog)
|
||||
);
|
||||
css += wrapStyles(
|
||||
n,
|
||||
'.theme--dropdown__menu',
|
||||
getThemeBlockCSS(styles.dropdown)
|
||||
);
|
||||
|
||||
// Tooltips
|
||||
css += wrapStyles(n, '.theme--tooltip', getThemeBlockCSS(styles.dialog));
|
||||
css += wrapStyles(n, '.theme--tooltip', getThemeBlockCSS(styles.tooltip));
|
||||
|
||||
// Overlay
|
||||
css += wrapStyles(
|
||||
n,
|
||||
'.theme--transparent-overlay',
|
||||
getThemeBlockCSS(styles.transparentOverlay)
|
||||
);
|
||||
|
||||
// Dialogs
|
||||
css += wrapStyles(n, '.theme--dialog', getThemeBlockCSS(styles.dialog));
|
||||
css += wrapStyles(
|
||||
n,
|
||||
'.theme--dialog__header',
|
||||
getThemeBlockCSS(styles.dialogHeader)
|
||||
);
|
||||
css += wrapStyles(
|
||||
n,
|
||||
'.theme--dialog__footer',
|
||||
getThemeBlockCSS(styles.dialogFooter)
|
||||
);
|
||||
|
||||
// Panes
|
||||
css += wrapStyles(n, '.theme--pane', getThemeBlockCSS(styles.pane));
|
||||
css += wrapStyles(
|
||||
n,
|
||||
'.theme--pane__header',
|
||||
getThemeBlockCSS(styles.paneHeader)
|
||||
);
|
||||
|
||||
// Sidebar Styles
|
||||
css += wrapStyles(n, '.theme--sidebar', getThemeBlockCSS(styles.sidebar));
|
||||
css += wrapStyles(
|
||||
n,
|
||||
'.theme--sidebar__list',
|
||||
getThemeBlockCSS(styles.sidebarList)
|
||||
);
|
||||
css += wrapStyles(
|
||||
n,
|
||||
'.theme--sidebar__actions',
|
||||
getThemeBlockCSS(styles.sidebarActions)
|
||||
);
|
||||
css += wrapStyles(
|
||||
n,
|
||||
'.theme--sidebar__header',
|
||||
getThemeBlockCSS(styles.sidebarHeader)
|
||||
);
|
||||
|
||||
// Link
|
||||
css += wrapStyles(n, '.theme--link', getThemeBlockCSS(styles.link));
|
||||
|
||||
// HACK: Dialog styles for CodeMirror dialogs too
|
||||
css += wrapStyles(n, '.CodeMirror-info', getThemeBlockCSS(styles.dialog));
|
||||
}
|
||||
|
||||
return css;
|
||||
}
|
||||
|
||||
function getThemeBlockCSS(block?: ThemeBlock): string {
|
||||
if (!block) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const indent = '\t';
|
||||
|
||||
let css = '';
|
||||
|
||||
const addVar = (variable?: string, value?: string) => {
|
||||
if (variable && value) {
|
||||
css += `${indent}--${variable}: ${value};\n`;
|
||||
}
|
||||
};
|
||||
|
||||
const addComment = comment => {
|
||||
css += `${indent}/* ${comment} */\n`;
|
||||
};
|
||||
|
||||
const addNewLine = () => {
|
||||
css += `\n`;
|
||||
};
|
||||
|
||||
if (block.background) {
|
||||
const { background } = block;
|
||||
addComment('Background');
|
||||
addVar('color-bg', background.default);
|
||||
addVar('color-success', background.success);
|
||||
addVar('color-notice', background.notice);
|
||||
addVar('color-warning', background.warning);
|
||||
addVar('color-danger', background.danger);
|
||||
addVar('color-surprise', background.surprise);
|
||||
addVar('color-info', background.info);
|
||||
addNewLine();
|
||||
}
|
||||
|
||||
if (block.foreground) {
|
||||
const { foreground } = block;
|
||||
addComment('Foreground');
|
||||
addVar('color-font', foreground.default);
|
||||
addVar('color-font-success', foreground.success);
|
||||
addVar('color-font-notice', foreground.notice);
|
||||
addVar('color-font-warning', foreground.warning);
|
||||
addVar('color-font-danger', foreground.danger);
|
||||
addVar('color-font-surprise', foreground.surprise);
|
||||
addVar('color-font-info', foreground.info);
|
||||
addNewLine();
|
||||
}
|
||||
|
||||
if (block.highlight) {
|
||||
const { highlight } = block;
|
||||
addComment('Highlight');
|
||||
addVar('hl', highlight.default);
|
||||
addVar('hl-xxs', highlight.xxs);
|
||||
addVar('hl-xs', highlight.xs);
|
||||
addVar('hl-sm', highlight.sm);
|
||||
addVar('hl-md', highlight.md);
|
||||
addVar('hl-lg', highlight.lg);
|
||||
addVar('hl-xl', highlight.xl);
|
||||
addNewLine();
|
||||
}
|
||||
|
||||
return css.replace(/\s+$/, '');
|
||||
}
|
||||
|
||||
function wrapStyles(theme: string, selector: string, styles: string) {
|
||||
if (!styles) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return [
|
||||
`[theme="${theme}"] ${selector}, `,
|
||||
`[subtheme="${theme}"] ${selector ? selector + '--sub' : ''} {`,
|
||||
styles,
|
||||
'}',
|
||||
'',
|
||||
''
|
||||
].join('\n');
|
||||
}
|
||||
|
||||
export async function setThemes() {
|
||||
if (!document) {
|
||||
return;
|
||||
}
|
||||
|
||||
const head = document.head;
|
||||
|
||||
if (!head) {
|
||||
return;
|
||||
}
|
||||
|
||||
const themes = await getThemes();
|
||||
|
||||
for (const theme of themes) {
|
||||
const themeCSS = (await generateThemeCSS(theme.theme)) + '\n';
|
||||
|
||||
let s = document.querySelector(
|
||||
`style[data-theme-name="${theme.theme.name}"]`
|
||||
);
|
||||
if (!s) {
|
||||
s = document.createElement('style');
|
||||
s.setAttribute('data-theme-name', theme.theme.name);
|
||||
head.appendChild(s);
|
||||
}
|
||||
|
||||
s.innerHTML = themeCSS;
|
||||
}
|
||||
}
|
||||
@@ -30,7 +30,10 @@ let nunjucksAll = null;
|
||||
* @param {Object} [config.path] - Path to include in the error message
|
||||
* @param {Object} [config.renderMode] - Only render variables (not tags)
|
||||
*/
|
||||
export function render(text: string, config: Object = {}): Promise<string> {
|
||||
export function render(
|
||||
text: string,
|
||||
config: { context?: Object, path?: string, renderMode?: string } = {}
|
||||
): Promise<string> {
|
||||
const context = config.context || {};
|
||||
const path = config.path || null;
|
||||
const renderMode = config.renderMode || RENDER_ALL;
|
||||
|
||||
@@ -242,6 +242,8 @@ class Dropdown extends PureComponent {
|
||||
if (!container) {
|
||||
container = document.createElement('div');
|
||||
container.id = 'dropdowns-container';
|
||||
container.style.zIndex = '1000000';
|
||||
container.style.position = 'relative';
|
||||
document.body.appendChild(container);
|
||||
}
|
||||
|
||||
@@ -382,7 +384,7 @@ class Dropdown extends PureComponent {
|
||||
finalChildren = [
|
||||
dropdownButtons[0],
|
||||
<div key="item" className={menuClasses} ref={this._addDropdownMenuRef}>
|
||||
<div className="dropdown__backdrop theme--overlay" />
|
||||
<div className="dropdown__backdrop theme--transparent-overlay" />
|
||||
<div
|
||||
key={uniquenessKey}
|
||||
ref={this._addDropdownListRef}
|
||||
|
||||
@@ -41,7 +41,7 @@ class Link extends React.PureComponent<Props> {
|
||||
<a
|
||||
href={href}
|
||||
onClick={this._handleClick}
|
||||
className={className}
|
||||
className={(className || '') + ' theme--link'}
|
||||
{...other}>
|
||||
{children}
|
||||
</a>
|
||||
|
||||
@@ -5,7 +5,7 @@ import classnames from 'classnames';
|
||||
class ModalBody extends PureComponent {
|
||||
render() {
|
||||
const { className, children, noScroll, ...props } = this.props;
|
||||
const classes = classnames(className, 'modal__body', {
|
||||
const classes = classnames(className, 'modal__body theme--dialog__body', {
|
||||
'modal__body--no-scroll': noScroll
|
||||
});
|
||||
|
||||
|
||||
@@ -6,7 +6,13 @@ class ModalFooter extends PureComponent {
|
||||
render() {
|
||||
const { children, className } = this.props;
|
||||
return (
|
||||
<div className={classnames('modal__footer', className)}>{children}</div>
|
||||
<div
|
||||
className={classnames(
|
||||
'modal__footer theme--dialog__footer',
|
||||
className
|
||||
)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,7 +19,11 @@ class ModalHeader extends PureComponent {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classnames('modal__header', className)}>
|
||||
<div
|
||||
className={classnames(
|
||||
'modal__header theme--dialog__header',
|
||||
className
|
||||
)}>
|
||||
<div className="modal__header__children">{children}</div>
|
||||
{closeButton}
|
||||
</div>
|
||||
|
||||
@@ -121,6 +121,7 @@ class Modal extends PureComponent {
|
||||
|
||||
const classes = classnames(
|
||||
'modal',
|
||||
'theme--dialog',
|
||||
className,
|
||||
{ 'modal--fixed-height': tall },
|
||||
{ 'modal--noescape': noEscape },
|
||||
@@ -141,7 +142,7 @@ class Modal extends PureComponent {
|
||||
style={styles}
|
||||
onClick={this._handleClick}>
|
||||
<div
|
||||
className="modal__backdrop overlay theme--overlay"
|
||||
className="modal__backdrop overlay theme--transparent-overlay"
|
||||
data-close-modal
|
||||
/>
|
||||
<div className="modal__content__wrapper">
|
||||
|
||||
@@ -57,7 +57,7 @@ class SettingsModal extends PureComponent {
|
||||
this.modal.hide();
|
||||
}
|
||||
|
||||
_handleChangeTheme(theme, persist = true) {
|
||||
async _handleChangeTheme(theme, persist = true) {
|
||||
document.body.setAttribute('theme', theme);
|
||||
|
||||
if (persist) {
|
||||
|
||||
@@ -174,11 +174,15 @@ class RequestPane extends React.PureComponent<Props> {
|
||||
updateSettingsShowPasswords
|
||||
} = this.props;
|
||||
|
||||
const paneClasses = 'request-pane theme--pane pane';
|
||||
const paneHeaderClasses = 'pane__header theme--pane__header';
|
||||
const paneBodyClasses = 'pane__body theme--pane__body';
|
||||
|
||||
if (!request) {
|
||||
return (
|
||||
<section className="request-pane pane">
|
||||
<header className="pane__header" />
|
||||
<div className="pane__body pane__body--placeholder">
|
||||
<section className={paneClasses}>
|
||||
<header className={paneHeaderClasses} />
|
||||
<div className={paneBodyClasses + ' pane__body--placeholder'}>
|
||||
<div>
|
||||
<table className="table--fancy">
|
||||
<tbody>
|
||||
@@ -239,8 +243,8 @@ class RequestPane extends React.PureComponent<Props> {
|
||||
const uniqueKey = `${forceRefreshCounter}::${request._id}`;
|
||||
|
||||
return (
|
||||
<section className="pane request-pane">
|
||||
<header className="pane__header">
|
||||
<section className={paneClasses}>
|
||||
<header className={paneHeaderClasses}>
|
||||
<ErrorBoundary errorClassName="font-error pad text-center">
|
||||
<RequestUrlBar
|
||||
uniquenessKey={uniqueKey}
|
||||
@@ -260,7 +264,7 @@ class RequestPane extends React.PureComponent<Props> {
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
</header>
|
||||
<Tabs className="react-tabs pane__body" forceRenderTabPanel>
|
||||
<Tabs className={paneBodyClasses + ' react-tabs'} forceRenderTabPanel>
|
||||
<TabList>
|
||||
<Tab>
|
||||
<ContentTypeDropdown
|
||||
|
||||
@@ -158,20 +158,24 @@ class ResponsePane extends React.PureComponent<Props> {
|
||||
showCookiesModal
|
||||
} = this.props;
|
||||
|
||||
const paneClasses = 'response-pane theme--pane pane';
|
||||
const paneHeaderClasses = 'pane__header theme--pane__header';
|
||||
const paneBodyClasses = 'pane__body theme--pane__body';
|
||||
|
||||
if (!request) {
|
||||
return (
|
||||
<section className="response-pane pane">
|
||||
<header className="pane__header" />
|
||||
<div className="pane__body pane__body--placeholder" />
|
||||
<section className={paneClasses}>
|
||||
<header className={paneHeaderClasses} />
|
||||
<div className={paneBodyClasses + ' pane__body--placeholder'} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
if (!response) {
|
||||
return (
|
||||
<section className="response-pane pane">
|
||||
<header className="pane__header" />
|
||||
<div className="pane__body pane__body--placeholder">
|
||||
<section className={paneClasses}>
|
||||
<header className={paneHeaderClasses} />
|
||||
<div className={paneBodyClasses + ' pane__body--placeholder'}>
|
||||
<div>
|
||||
<table className="table--fancy">
|
||||
<tbody>
|
||||
@@ -223,9 +227,9 @@ class ResponsePane extends React.PureComponent<Props> {
|
||||
const cookieHeaders = getSetCookieHeaders(response.headers);
|
||||
|
||||
return (
|
||||
<section className="response-pane pane">
|
||||
<section className={paneClasses}>
|
||||
{!response ? null : (
|
||||
<header className="pane__header row-spaced">
|
||||
<header className={paneHeaderClasses + ' row-spaced'}>
|
||||
<div className="no-wrap scrollable scrollable--no-bars pad-left">
|
||||
<StatusTag
|
||||
statusCode={response.statusCode}
|
||||
@@ -250,7 +254,7 @@ class ResponsePane extends React.PureComponent<Props> {
|
||||
/>
|
||||
</header>
|
||||
)}
|
||||
<Tabs className="react-tabs pane__body" forceRenderTabPanel>
|
||||
<Tabs className={paneBodyClasses + ' react-tabs'} forceRenderTabPanel>
|
||||
<TabList>
|
||||
<Tab>
|
||||
<PreviewModeDropdown
|
||||
|
||||
@@ -46,7 +46,7 @@ class ResponseTimer extends PureComponent {
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classnames('overlay theme--overlay', {
|
||||
className={classnames('overlay theme--transparent-overlay', {
|
||||
'overlay--hidden': !show
|
||||
})}>
|
||||
{elapsedTime >= REQUEST_TIME_TO_SHOW_COUNTER ? (
|
||||
|
||||
@@ -48,7 +48,7 @@ class Account extends PureComponent {
|
||||
</div>
|
||||
<p>
|
||||
Or{' '}
|
||||
<a href="#" onClick={this._handleLogin}>
|
||||
<a href="#" onClick={this._handleLogin} className="theme--link">
|
||||
Login
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -62,7 +62,7 @@ class Plugins extends React.PureComponent<void, State> {
|
||||
this.setState(newState);
|
||||
}
|
||||
|
||||
_handleOpenDirectory(directory: string): void {
|
||||
static _handleOpenDirectory(directory: string): void {
|
||||
electron.remote.shell.showItemInFolder(directory);
|
||||
}
|
||||
|
||||
@@ -88,7 +88,7 @@ class Plugins extends React.PureComponent<void, State> {
|
||||
await this._handleRefreshPlugins();
|
||||
}
|
||||
|
||||
_handleClickShowPluginsFolder() {
|
||||
static _handleClickShowPluginsFolder() {
|
||||
electron.remote.shell.showItemInFolder(PLUGIN_PATH);
|
||||
}
|
||||
|
||||
@@ -152,7 +152,7 @@ class Plugins extends React.PureComponent<void, State> {
|
||||
</CopyButton>{' '}
|
||||
<Button
|
||||
className="btn btn--outlined btn--super-duper-compact"
|
||||
onClick={this._handleOpenDirectory}
|
||||
onClick={Plugins._handleOpenDirectory}
|
||||
value={plugin.directory}>
|
||||
Show Folder
|
||||
</Button>
|
||||
@@ -204,7 +204,7 @@ class Plugins extends React.PureComponent<void, State> {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn--clicky"
|
||||
onClick={this._handleClickShowPluginsFolder}>
|
||||
onClick={Plugins._handleClickShowPluginsFolder}>
|
||||
Show Plugins Folder
|
||||
</button>
|
||||
<button
|
||||
|
||||
@@ -1,61 +1,180 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
// @flow
|
||||
import * as React from 'react';
|
||||
import autobind from 'autobind-decorator';
|
||||
import Button from '../base/button';
|
||||
import type { Theme as ThemeType } from '../../../plugins';
|
||||
import { getThemes } from '../../../plugins';
|
||||
|
||||
import imgLight from '../../images/light.png';
|
||||
import imgDark from '../../images/dark.png';
|
||||
import imgDefault from '../../images/default.png';
|
||||
import imgSolarizedLight from '../../images/solarized-light.png';
|
||||
import imgSolarizedDark from '../../images/solarized-dark.png';
|
||||
import imgSolarized from '../../images/solarized.png';
|
||||
import imgRailscasts from '../../images/railscasts.png';
|
||||
import imgPurple from '../../images/purple.png';
|
||||
import imgMaterial from '../../images/material.png';
|
||||
const THEMES_PER_ROW = 4;
|
||||
|
||||
const THEMES_PER_ROW = 3;
|
||||
const THEMES = [
|
||||
{ key: 'default', name: 'Insomnia', img: imgDefault },
|
||||
{ key: 'light', name: 'Simple Light', img: imgLight },
|
||||
{ key: 'dark', name: 'Simple Dark', img: imgDark },
|
||||
{ key: 'purple', name: 'Purple', img: imgPurple },
|
||||
{ key: 'material', name: 'Material', img: imgMaterial },
|
||||
{ key: 'solarized', name: 'Solarized', img: imgSolarized },
|
||||
{ key: 'solarized-light', name: 'Solarized Light', img: imgSolarizedLight },
|
||||
{ key: 'solarized-dark', name: 'Solarized Dark', img: imgSolarizedDark },
|
||||
{ key: 'railscasts', name: 'Railscasts', img: imgRailscasts },
|
||||
{ key: 'one-dark', name: 'One Dark', img: imgRailscasts },
|
||||
{ key: 'one-light', name: 'One Light', img: imgRailscasts }
|
||||
];
|
||||
type Props = {
|
||||
handleChangeTheme: string => void,
|
||||
activeTheme: string
|
||||
};
|
||||
|
||||
type State = {
|
||||
themes: Array<ThemeType>
|
||||
};
|
||||
|
||||
@autobind
|
||||
class Theme extends PureComponent {
|
||||
renderTheme(theme) {
|
||||
class Theme extends React.PureComponent<Props, State> {
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
themes: []
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._loadThemes();
|
||||
}
|
||||
|
||||
async _loadThemes() {
|
||||
const themes = await getThemes();
|
||||
this.setState({ themes });
|
||||
}
|
||||
|
||||
renderTheme(theme: ThemeType) {
|
||||
const { handleChangeTheme, activeTheme } = this.props;
|
||||
const isActive = activeTheme === theme.key;
|
||||
const isActive = activeTheme === theme.theme.name;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={theme.key}
|
||||
key={theme.theme.name}
|
||||
className="themes__theme"
|
||||
style={{ maxWidth: `${100 / THEMES_PER_ROW}%` }}>
|
||||
<h2 className="txt-lg">
|
||||
{theme.name}{' '}
|
||||
{isActive ? (
|
||||
<span className="no-margin-top faint italic txt-md">(Active)</span>
|
||||
) : null}
|
||||
</h2>
|
||||
<Button onClick={handleChangeTheme} value={theme.key}>
|
||||
<img src={theme.img} alt={theme.name} style={{ maxWidth: '100%' }} />
|
||||
<h2 className="txt-lg">{theme.theme.displayName}</h2>
|
||||
<Button
|
||||
onClick={handleChangeTheme}
|
||||
value={theme.theme.name}
|
||||
className={isActive ? 'active' : ''}>
|
||||
<svg width="100%" height="100%" viewBox="0 0 500 300">
|
||||
<g subtheme={theme.theme.name}>
|
||||
{/* Panes */}
|
||||
<g className="theme--pane--sub">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="100%"
|
||||
height="100%"
|
||||
className="bg-fill"
|
||||
/>
|
||||
<rect
|
||||
x="25%"
|
||||
y="0"
|
||||
width="100%"
|
||||
height="10%"
|
||||
className="theme--pane__header--sub bg-fill"
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Sidebar */}
|
||||
<g className="theme--sidebar--sub">
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="25%"
|
||||
height="100%"
|
||||
className="bg-fill"
|
||||
/>
|
||||
<rect
|
||||
x="0"
|
||||
y="0"
|
||||
width="25%"
|
||||
height="10%"
|
||||
className="theme--sidebar__header--sub bg-fill"
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Lines */}
|
||||
<line
|
||||
x1="25%"
|
||||
x2="100%"
|
||||
y1="10%"
|
||||
y2="10%"
|
||||
strokeWidth="1"
|
||||
className="hl-stroke"
|
||||
/>
|
||||
<line
|
||||
x1="62%"
|
||||
x2="62%"
|
||||
y1="0"
|
||||
y2="100%"
|
||||
strokeWidth="1"
|
||||
className="hl-stroke"
|
||||
/>
|
||||
<line
|
||||
x1="25%"
|
||||
x2="25%"
|
||||
y1="0"
|
||||
y2="100%"
|
||||
strokeWidth="1"
|
||||
className="hl-stroke"
|
||||
/>
|
||||
<line
|
||||
x1="0"
|
||||
x2="25%"
|
||||
y1="10%"
|
||||
y2="10%"
|
||||
strokeWidth="1"
|
||||
className="hl-stroke"
|
||||
/>
|
||||
|
||||
{/* Colors */}
|
||||
<rect
|
||||
x="40%"
|
||||
y="85%"
|
||||
width="5%"
|
||||
height="8%"
|
||||
className="success-fill"
|
||||
/>
|
||||
<rect
|
||||
x="50%"
|
||||
y="85%"
|
||||
width="5%"
|
||||
height="8%"
|
||||
className="info-fill"
|
||||
/>
|
||||
<rect
|
||||
x="60%"
|
||||
y="85%"
|
||||
width="5%"
|
||||
height="8%"
|
||||
className="warning-fill"
|
||||
/>
|
||||
<rect
|
||||
x="70%"
|
||||
y="85%"
|
||||
width="5%"
|
||||
height="8%"
|
||||
className="danger-fill"
|
||||
/>
|
||||
<rect
|
||||
x="80%"
|
||||
y="85%"
|
||||
width="5%"
|
||||
height="8%"
|
||||
className="surprise-fill"
|
||||
/>
|
||||
<rect
|
||||
x="90%"
|
||||
y="85%"
|
||||
width="5%"
|
||||
height="8%"
|
||||
className="info-fill"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
renderThemeRows(themes) {
|
||||
renderThemeRows() {
|
||||
const { themes } = this.state;
|
||||
|
||||
const rows = [];
|
||||
let row = [];
|
||||
|
||||
for (const theme of themes) {
|
||||
row.push(theme);
|
||||
if (row.length === THEMES_PER_ROW) {
|
||||
@@ -77,13 +196,8 @@ class Theme extends PureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div className="themes pad-top">{this.renderThemeRows(THEMES)}</div>;
|
||||
return <div className="themes pad-top">{this.renderThemeRows()}</div>;
|
||||
}
|
||||
}
|
||||
|
||||
Theme.propTypes = {
|
||||
handleChangeTheme: PropTypes.func.isRequired,
|
||||
activeTheme: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default Theme;
|
||||
@@ -123,7 +123,7 @@ class SidebarChildren extends React.PureComponent<Props> {
|
||||
const { childObjects } = this.props;
|
||||
|
||||
return (
|
||||
<ul className="sidebar__list sidebar__list-root">
|
||||
<ul className="sidebar__list sidebar__list-root theme--sidebar__list">
|
||||
{this._renderChildren(childObjects)}
|
||||
</ul>
|
||||
);
|
||||
|
||||
@@ -62,7 +62,7 @@ class SidebarFilter extends React.PureComponent<Props> {
|
||||
const { filter } = this.props;
|
||||
return (
|
||||
<KeydownBinder onKeydown={this._handleKeydown}>
|
||||
<div className="sidebar__filter">
|
||||
<div className="sidebar__filter theme--sidebar__actions">
|
||||
<div className="form-control form-control--outlined form-control--btn-right">
|
||||
<input
|
||||
ref={this._setInputRef}
|
||||
|
||||
@@ -62,13 +62,13 @@ class Sidebar extends PureComponent {
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={classnames('sidebar', {
|
||||
className={classnames('sidebar', 'theme--sidebar', {
|
||||
'sidebar--hidden': hidden,
|
||||
'sidebar--skinny': width < SIDEBAR_SKINNY_REMS,
|
||||
'sidebar--collapsed': width < COLLAPSE_SIDEBAR_REMS
|
||||
})}>
|
||||
<WorkspaceDropdown
|
||||
className="sidebar__header"
|
||||
className="sidebar__header theme--sidebar__header"
|
||||
activeWorkspace={workspace}
|
||||
workspaces={workspaces}
|
||||
unseenWorkspaces={unseenWorkspaces}
|
||||
|
||||
@@ -126,6 +126,8 @@ class Tooltip extends React.PureComponent<Props, State> {
|
||||
if (!container) {
|
||||
container = document.createElement('div');
|
||||
container.id = 'tooltips-container';
|
||||
container.style.zIndex = '1000000';
|
||||
container.style.position = 'relative';
|
||||
|
||||
document.body && document.body.appendChild(container);
|
||||
}
|
||||
@@ -154,7 +156,7 @@ class Tooltip extends React.PureComponent<Props, State> {
|
||||
const { visible } = this.state;
|
||||
|
||||
const tooltipClasses = classnames(className, 'tooltip');
|
||||
const bubbleClasses = classnames('tooltip__bubble', {
|
||||
const bubbleClasses = classnames('tooltip__bubble theme--tooltip', {
|
||||
'tooltip__bubble--visible': visible
|
||||
});
|
||||
|
||||
|
||||
@@ -68,6 +68,7 @@ import * as templating from '../../templating/index';
|
||||
import AskModal from '../components/modals/ask-modal';
|
||||
import { updateMimeType } from '../../models/request';
|
||||
import MoveRequestGroupModal from '../components/modals/move-request-group-modal';
|
||||
import * as themes from '../../plugins/misc';
|
||||
|
||||
@autobind
|
||||
class App extends PureComponent {
|
||||
@@ -840,6 +841,7 @@ class App extends PureComponent {
|
||||
ipcRenderer.on('reload-plugins', async () => {
|
||||
await plugins.getPlugins(true);
|
||||
templating.reload();
|
||||
themes.setThemes();
|
||||
console.log('[plugins] reloaded');
|
||||
});
|
||||
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dropdown__backdrop {
|
||||
@@ -26,6 +25,8 @@
|
||||
}
|
||||
|
||||
.dropdown__menu {
|
||||
opacity: 0.96;
|
||||
|
||||
&.dropdown__menu--open .dropdown__backdrop {
|
||||
display: block;
|
||||
}
|
||||
@@ -165,4 +166,3 @@
|
||||
animation: fadeIn 200ms ease-out;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -44,7 +44,8 @@
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
h1, h1 * {
|
||||
h1,
|
||||
h1 * {
|
||||
font-size: @font-size-xl;
|
||||
}
|
||||
}
|
||||
@@ -167,7 +168,6 @@
|
||||
|
||||
.sidebar__list-root {
|
||||
// Add some space above so it's not so squished
|
||||
border-top: 1px solid @hl-sm;
|
||||
padding-top: @padding-xxs;
|
||||
padding-bottom: @padding-md;
|
||||
box-shadow: inset 0 2rem 2rem -2rem rgba(0, 0, 0, 0.03);
|
||||
@@ -208,8 +208,8 @@
|
||||
right: 0;
|
||||
left: 0;
|
||||
border-bottom: 2px dotted var(--color-surprise);
|
||||
content: " ";
|
||||
display: block
|
||||
content: ' ';
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -299,19 +299,41 @@
|
||||
padding-left: @padding-sm + @padding-md * 2;
|
||||
}
|
||||
|
||||
.sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__clickable {
|
||||
padding-left: @padding-sm + @padding-md * 3;
|
||||
}
|
||||
|
||||
.sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__clickable {
|
||||
padding-left: @padding-sm + @padding-md * 4;
|
||||
}
|
||||
|
||||
.sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__clickable {
|
||||
padding-left: @padding-sm + @padding-md * 5;
|
||||
}
|
||||
|
||||
.sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__list .sidebar__clickable {
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__list
|
||||
.sidebar__clickable {
|
||||
padding-left: @padding-sm + @padding-md * 6;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,10 +2,12 @@
|
||||
@import '../constants/colors';
|
||||
|
||||
.themes {
|
||||
padding-top: @padding-lg;
|
||||
|
||||
.themes__row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: @padding-lg;
|
||||
margin-bottom: @padding-md;
|
||||
}
|
||||
|
||||
.themes__theme {
|
||||
@@ -13,21 +15,68 @@
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: @padding-xs;
|
||||
font-size: @font-size-md !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
.bg-fill {
|
||||
fill: var(--color-bg);
|
||||
}
|
||||
|
||||
.success-fill {
|
||||
fill: var(--color-success);
|
||||
}
|
||||
|
||||
.notice-fill {
|
||||
fill: var(--color-notice);
|
||||
}
|
||||
|
||||
.warning-fill {
|
||||
fill: var(--color-warning);
|
||||
}
|
||||
|
||||
.danger-fill {
|
||||
fill: var(--color-danger);
|
||||
}
|
||||
|
||||
.surprise-fill {
|
||||
fill: var(--color-surprise);
|
||||
}
|
||||
|
||||
.info-fill {
|
||||
fill: var(--color-info);
|
||||
}
|
||||
|
||||
.fg-fill {
|
||||
fill: var(--color-fg);
|
||||
}
|
||||
|
||||
.hl-stroke {
|
||||
stroke: var(--hl-md);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
margin: 0 @padding-md;
|
||||
font-size: 0;
|
||||
border-radius: @radius-md;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
|
||||
img {
|
||||
border: 1px solid @hl-md;
|
||||
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
|
||||
border-radius: @radius-md;
|
||||
&.active {
|
||||
border: @padding-xs solid var(--color-surprise);
|
||||
}
|
||||
|
||||
&.themes__theme--locked {
|
||||
opacity: 1;
|
||||
&:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(1.1);
|
||||
transition: all 50ms ease-out;
|
||||
}
|
||||
|
||||
&::after {
|
||||
@@ -46,29 +95,5 @@
|
||||
bottom: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
&.themes__theme--locked::after {
|
||||
content: '\01f512';
|
||||
font-size: 2rem;
|
||||
opacity: 0.5;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
&:not(.themes__theme--locked):hover::after {
|
||||
content: 'Activate';
|
||||
visibility: visible;
|
||||
transform: rotate(-15deg);
|
||||
mix-blend-mode: exclusion;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.themes__theme--locked:hover::after {
|
||||
content: 'Upgrade to Plus';
|
||||
visibility: visible;
|
||||
font-size: @font-size-md;
|
||||
transform: rotate(-15deg);
|
||||
mix-blend-mode: exclusion;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,252 +1,5 @@
|
||||
body {
|
||||
// Default Pretty Background Colors
|
||||
--color-success: #59a210;
|
||||
--color-notice: #ae9602;
|
||||
--color-warning: #d07502;
|
||||
--color-danger: #d04444;
|
||||
--color-surprise: #7d69cb;
|
||||
--color-info: #1c90b4;
|
||||
--color-boring: #333;
|
||||
|
||||
// Default Pretty Foreground Colors
|
||||
--color-font-success: #fff;
|
||||
--color-font-notice: #fff;
|
||||
--color-font-warning: #fff;
|
||||
--color-font-danger: #fff;
|
||||
--color-font-surprise: #fff;
|
||||
--color-font-info: #fff;
|
||||
|
||||
--hl-xxs: rgba(140, 140, 140, 0.05);
|
||||
--hl-xs: rgba(140, 140, 140, 0.1);
|
||||
--hl-sm: rgba(140, 140, 140, 0.2);
|
||||
--hl-md: rgba(140, 140, 140, 0.3);
|
||||
--hl-lg: rgba(140, 140, 140, 0.5);
|
||||
--hl-xl: rgba(140, 140, 140, 0.8);
|
||||
--hl: rgba(140, 140, 140, 1);
|
||||
|
||||
// Default Colors
|
||||
--color-bg: #fff;
|
||||
--color-font: #555;
|
||||
|
||||
.theme--overlay {
|
||||
--color-bg: rgba(30, 30, 30, 0.8);
|
||||
--color-font: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
*[theme='default'] {
|
||||
--hl-xxs: rgba(130, 130, 130, 0.05);
|
||||
--hl-xs: rgba(130, 130, 130, 0.1);
|
||||
--hl-sm: rgba(130, 130, 130, 0.2);
|
||||
--hl-md: rgba(130, 130, 130, 0.3);
|
||||
--hl-lg: rgba(130, 130, 130, 0.5);
|
||||
--hl-xl: rgba(130, 130, 130, 0.8);
|
||||
--hl: rgba(130, 130, 130, 1);
|
||||
|
||||
--color-success: #59a210;
|
||||
--color-notice: #ae9602;
|
||||
--color-warning: #d07502;
|
||||
--color-danger: #d04444;
|
||||
--color-surprise: #7461bd;
|
||||
--color-info: #1c90b4;
|
||||
|
||||
.sidebar,
|
||||
.pane__body {
|
||||
--color-success: #8ccf3b;
|
||||
--color-notice: #ead950;
|
||||
--color-warning: #ff9a1f;
|
||||
--color-danger: #ff5d4b;
|
||||
--color-surprise: #a896ff;
|
||||
--color-info: #46c1e6;
|
||||
}
|
||||
|
||||
// Make the tags a little lighter
|
||||
.pane__header .tag {
|
||||
--color-font: #666;
|
||||
--color-success: #75ba24;
|
||||
--color-notice: #d8c84d;
|
||||
--color-warning: #ec8702;
|
||||
--color-danger: #ee5655;
|
||||
--color-surprise: #a590ff;
|
||||
--color-info: #22c1ee;
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
--color-bg: #695eb8;
|
||||
--color-font: #fff;
|
||||
}
|
||||
|
||||
.pane__header,
|
||||
.theme--dropdown__menu,
|
||||
.CodeMirror-info,
|
||||
.modal {
|
||||
--color-bg: #fff;
|
||||
--color-font: #555;
|
||||
}
|
||||
|
||||
.modal__header {
|
||||
--color-bg: #eff0ed;
|
||||
--color-font: #444;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
--color-bg: #2e2f2b;
|
||||
--color-font: #e0e0e0;
|
||||
--hl: #999;
|
||||
}
|
||||
|
||||
.request-pane,
|
||||
.response-pane {
|
||||
--color-bg: #282925;
|
||||
--color-font: #ddd;
|
||||
}
|
||||
}
|
||||
|
||||
*[theme='one-dark'] {
|
||||
--hl-xxs: rgba(114, 121, 133, 0.05);
|
||||
--hl-xs: rgba(114, 121, 133, 0.1);
|
||||
--hl-sm: rgba(114, 121, 133, 0.2);
|
||||
--hl-md: rgba(114, 121, 133, 0.3);
|
||||
--hl-lg: rgba(114, 121, 133, 0.5);
|
||||
--hl-xl: rgba(114, 121, 133, 0.8);
|
||||
--hl: rgba(114, 121, 133, 1);
|
||||
|
||||
--color-success: #98c379;
|
||||
--color-notice: #d19a66;
|
||||
--color-warning: #d19a66;
|
||||
--color-danger: #e06c75;
|
||||
--color-surprise: #c678dd;
|
||||
--color-info: #56b6c2;
|
||||
|
||||
.sidebar,
|
||||
.pane__body {
|
||||
--color-success: #98c379;
|
||||
--color-notice: #d19a66;
|
||||
--color-warning: #d19a66;
|
||||
--color-danger: #e06c75;
|
||||
--color-surprise: #c678dd;
|
||||
--color-info: #56b6c2;
|
||||
}
|
||||
|
||||
// Make the tags a little lighter
|
||||
.pane__header .tag {
|
||||
--color-font: #bbbbbb;
|
||||
--color-success: #98c379;
|
||||
--color-notice: #d19a66;
|
||||
--color-warning: #d19a66;
|
||||
--color-danger: #e06c75;
|
||||
--color-surprise: #c678dd;
|
||||
--color-info: #56b6c2;
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
--color-bg: #20252c;
|
||||
--color-font: #bbbbbb;
|
||||
}
|
||||
|
||||
.pane__header,
|
||||
.theme--dropdown__menu,
|
||||
.CodeMirror-info {
|
||||
--color-bg: #272c35;
|
||||
--color-font: #bbbbbb;
|
||||
}
|
||||
|
||||
.modal {
|
||||
--color-bg: #272c35;
|
||||
--color-font: #bbbbbb;
|
||||
}
|
||||
|
||||
.modal__header {
|
||||
--color-bg: #272c35;
|
||||
--color-font: #bbbbbb;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
--color-bg: #20252c;
|
||||
--color-font: #bbbbbb;
|
||||
--hl: #bbbbbb;
|
||||
}
|
||||
|
||||
.request-pane,
|
||||
.response-pane {
|
||||
--color-bg: #272c35;
|
||||
--color-font: #bbbbbb;
|
||||
}
|
||||
}
|
||||
|
||||
*[theme='one-light'] {
|
||||
--hl-xxs: rgba(130, 130, 130, 0.05);
|
||||
--hl-xs: rgba(130, 130, 130, 0.1);
|
||||
--hl-sm: rgba(130, 130, 130, 0.2);
|
||||
--hl-md: rgba(130, 130, 130, 0.3);
|
||||
--hl-lg: rgba(130, 130, 130, 0.5);
|
||||
--hl-xl: rgba(130, 130, 130, 0.8);
|
||||
--hl: rgba(130, 130, 130, 1);
|
||||
|
||||
--color-success: #50a14f;
|
||||
--color-notice: #c18401;
|
||||
--color-warning: #c18401;
|
||||
--color-danger: #e45649;
|
||||
--color-surprise: #a626a4;
|
||||
--color-info: #0184bc;
|
||||
|
||||
.sidebar,
|
||||
.pane__body {
|
||||
--color-success: #50a14f;
|
||||
--color-notice: #c18401;
|
||||
--color-warning: #c18401;
|
||||
--color-danger: #e45649;
|
||||
--color-surprise: #a626a4;
|
||||
--color-info: #0184bc;
|
||||
}
|
||||
|
||||
// Make the tags a little lighter
|
||||
.pane__header .tag {
|
||||
--color-font: #777777;
|
||||
--color-success: #50a14f;
|
||||
--color-notice: #c18401;
|
||||
--color-warning: #c18401;
|
||||
--color-danger: #e45649;
|
||||
--color-surprise: #a626a4;
|
||||
--color-info: #0184bc;
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
--color-bg: #eaeaeb;
|
||||
--color-font: #777777;
|
||||
}
|
||||
|
||||
.pane__header,
|
||||
.theme--dropdown__menu,
|
||||
.CodeMirror-info {
|
||||
--color-bg: #fafafa;
|
||||
--color-font: #777777;
|
||||
}
|
||||
|
||||
.modal {
|
||||
--color-bg: #fafafa;
|
||||
--color-font: #777777;
|
||||
}
|
||||
|
||||
.modal__header {
|
||||
--color-bg: #fafafa;
|
||||
--color-font: #777777;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
--color-bg: #eaeaeb;
|
||||
--color-font: #777777;
|
||||
--hl: #777777;
|
||||
}
|
||||
|
||||
.request-pane,
|
||||
.response-pane {
|
||||
--color-bg: #fafafa;
|
||||
--color-font: #777777;
|
||||
}
|
||||
}
|
||||
|
||||
*[theme='purple'] {
|
||||
*[theme],
|
||||
*[subtheme] {
|
||||
--color-bg: #fff;
|
||||
--color-font: #555;
|
||||
|
||||
@@ -257,81 +10,12 @@ body {
|
||||
--color-surprise: #8570d2;
|
||||
--color-info: #0092bf;
|
||||
|
||||
// Light Parts
|
||||
.request-pane,
|
||||
.response-pane,
|
||||
.theme--dropdown__menu,
|
||||
.CodeMirror-info,
|
||||
.modal {
|
||||
--hl-xxs: rgba(130, 130, 130, 0.05);
|
||||
--hl-xs: rgba(130, 130, 130, 0.1);
|
||||
--hl-sm: rgba(130, 130, 130, 0.2);
|
||||
--hl-md: rgba(130, 130, 130, 0.3);
|
||||
--hl-lg: rgba(130, 130, 130, 0.5);
|
||||
--hl-xl: rgba(130, 130, 130, 0.8);
|
||||
--hl: rgba(130, 130, 130, 1);
|
||||
}
|
||||
|
||||
.request-pane .pane__body,
|
||||
.request-pane .pane__header {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
--color-success: #a9ea6e;
|
||||
--color-notice: #ffdb02;
|
||||
--color-warning: #ffac49;
|
||||
--color-danger: #ff7472;
|
||||
--color-surprise: #c5bbff;
|
||||
--color-info: #75ddff;
|
||||
|
||||
--color-bg: #695eb8;
|
||||
--color-font: #fff;
|
||||
|
||||
--hl-xxs: rgba(207, 190, 255, 0.05);
|
||||
--hl-xs: rgba(207, 190, 255, 0.1);
|
||||
--hl-sm: rgba(207, 190, 255, 0.2);
|
||||
--hl-md: rgba(207, 190, 255, 0.3);
|
||||
--hl-lg: rgba(207, 190, 255, 0.5);
|
||||
--hl-xl: rgba(207, 190, 255, 0.8);
|
||||
--hl: rgb(217, 204, 255);
|
||||
}
|
||||
|
||||
.tag {
|
||||
--hl: rgb(102, 99, 112);
|
||||
--hl-sm: rgba(240, 235, 255, 0.3);
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
--color-font: #eee;
|
||||
}
|
||||
|
||||
.pane {
|
||||
--color-bg: #fafaff;
|
||||
}
|
||||
|
||||
.CodeMirror-info,
|
||||
.theme--dropdown__menu {
|
||||
--color-bg: #fff;
|
||||
--color-font: #666;
|
||||
}
|
||||
|
||||
.theme--overlay {
|
||||
--color-bg: rgba(243, 242, 250, 0.8);
|
||||
--color-font: #555;
|
||||
}
|
||||
}
|
||||
|
||||
*[theme='dark'] {
|
||||
--color-success: #83c438;
|
||||
--color-notice: #d8c84d;
|
||||
--color-warning: #f48d02;
|
||||
--color-danger: #ff5b5a;
|
||||
--color-surprise: #9886ff;
|
||||
--color-info: #22c1ee;
|
||||
|
||||
--color-bg: #232421;
|
||||
--color-font: #ddd;
|
||||
--color-font-success: #fff;
|
||||
--color-font-notice: #fff;
|
||||
--color-font-warning: #fff;
|
||||
--color-font-danger: #fff;
|
||||
--color-font-surprise: #fff;
|
||||
--color-font-info: #fff;
|
||||
|
||||
--hl-xxs: rgba(130, 130, 130, 0.05);
|
||||
--hl-xs: rgba(130, 130, 130, 0.1);
|
||||
@@ -339,303 +23,12 @@ body {
|
||||
--hl-md: rgba(130, 130, 130, 0.3);
|
||||
--hl-lg: rgba(130, 130, 130, 0.5);
|
||||
--hl-xl: rgba(130, 130, 130, 0.8);
|
||||
--hl: rgba(140, 140, 140, 1);
|
||||
--hl: rgba(130, 130, 130, 1);
|
||||
|
||||
.tag {
|
||||
--color-success: #6ea932;
|
||||
--color-notice: #d0c14a;
|
||||
--color-warning: #d77802;
|
||||
--color-danger: #dc5251;
|
||||
--color-surprise: #8f7cdf;
|
||||
--color-info: #329fbf;
|
||||
}
|
||||
|
||||
.theme--overlay {
|
||||
--color-bg: rgba(20, 20, 20, 0.8);
|
||||
.theme--transparent-overlay {
|
||||
--color-bg: rgba(5, 5, 5, 0.7);
|
||||
--color-font: #ddd;
|
||||
}
|
||||
|
||||
.theme--dropdown__menu,
|
||||
.CodeMirror-info,
|
||||
.modal {
|
||||
--color-bg: #282925;
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
--color-font: #ccc;
|
||||
}
|
||||
|
||||
.CodeMirror-info,
|
||||
.theme--dropdown__menu {
|
||||
--color-font: #aaa;
|
||||
}
|
||||
}
|
||||
|
||||
*[theme='light'] {
|
||||
--color-success: #59a210;
|
||||
--color-notice: #ae9602;
|
||||
--color-warning: #d07502;
|
||||
--color-danger: #d04444;
|
||||
--color-surprise: #7d69cb;
|
||||
--color-info: #1c90b4;
|
||||
|
||||
&,
|
||||
.dropdown {
|
||||
--color-bg: #fff;
|
||||
--color-font: #333;
|
||||
}
|
||||
|
||||
--hl-xxs: rgba(130, 130, 130, 0.05);
|
||||
--hl-xs: rgba(130, 130, 130, 0.1);
|
||||
--hl-sm: rgba(130, 130, 130, 0.2);
|
||||
--hl-md: rgba(130, 130, 130, 0.3);
|
||||
--hl-lg: rgba(130, 130, 130, 0.5);
|
||||
--hl-xl: rgba(130, 130, 130, 0.8);
|
||||
--hl: rgba(130, 130, 130, 1);
|
||||
|
||||
.theme--overlay {
|
||||
--color-bg: rgba(255, 255, 255, 0.8);
|
||||
--color-font: #333;
|
||||
}
|
||||
}
|
||||
|
||||
*[theme='solarized-light'] {
|
||||
--color-success: #859900;
|
||||
--color-notice: #b58900;
|
||||
--color-warning: #cb4b16;
|
||||
--color-danger: #dc322f;
|
||||
--color-surprise: #6c71c4;
|
||||
--color-info: #2aa198;
|
||||
|
||||
--color-bg: #fdf6e3;
|
||||
--color-font: #657b83;
|
||||
|
||||
--hl-xxs: rgba(159, 167, 164, 0.05);
|
||||
--hl-xs: rgba(159, 167, 164, 0.1);
|
||||
--hl-sm: rgba(159, 167, 164, 0.2);
|
||||
--hl-md: rgba(142, 149, 146, 0.3);
|
||||
--hl-lg: rgba(142, 149, 146, 0.6);
|
||||
--hl-xl: rgba(142, 149, 146, 0.8);
|
||||
--hl: rgb(142, 149, 146);
|
||||
|
||||
.theme--overlay {
|
||||
--color-bg: rgba(238, 231, 213, 0.8);
|
||||
--color-font: #657b83;
|
||||
}
|
||||
|
||||
.CodeMirror-info,
|
||||
.theme--dropdown__menu,
|
||||
.modal {
|
||||
--color-bg: #fff8e5;
|
||||
}
|
||||
}
|
||||
|
||||
*[theme='solarized-dark'] {
|
||||
--color-success: #859900;
|
||||
--color-notice: #b58900;
|
||||
--color-warning: #cb4b16;
|
||||
--color-danger: #dc322f;
|
||||
--color-surprise: #6c71c4;
|
||||
--color-info: #2aa198;
|
||||
|
||||
--color-bg: #002b36;
|
||||
--color-font: #8ea0a2;
|
||||
|
||||
--hl-xxs: rgba(91, 118, 133, 0.05);
|
||||
--hl-xs: rgba(91, 118, 133, 0.1);
|
||||
--hl-sm: rgba(91, 118, 133, 0.2);
|
||||
--hl-md: rgba(91, 118, 133, 0.3);
|
||||
--hl-lg: rgba(91, 118, 133, 0.6);
|
||||
--hl-xl: rgba(91, 118, 133, 0.8);
|
||||
--hl: rgb(91, 118, 133);
|
||||
|
||||
.theme--overlay {
|
||||
--color-bg: rgba(0, 31, 41, 0.8);
|
||||
--color-font: #8ea0a2;
|
||||
}
|
||||
|
||||
.CodeMirror-info,
|
||||
.theme--dropdown__menu,
|
||||
.modal {
|
||||
--color-bg: #073642;
|
||||
}
|
||||
}
|
||||
|
||||
*[theme='material'] {
|
||||
--color-bg: #263238;
|
||||
--color-font: #dde1e1;
|
||||
|
||||
--color-success: #80cbc4;
|
||||
--color-notice: #ffcb6b;
|
||||
--color-warning: #f77669;
|
||||
--color-danger: #ff5370;
|
||||
--color-surprise: #c792ea;
|
||||
--color-info: #82b1ff;
|
||||
|
||||
--hl-xxs: rgba(114, 145, 143, 0.05);
|
||||
--hl-xs: rgba(114, 145, 143, 0.1);
|
||||
--hl-sm: rgba(114, 145, 143, 0.2);
|
||||
--hl-md: rgba(114, 145, 143, 0.3);
|
||||
--hl-lg: rgba(114, 145, 143, 0.6);
|
||||
--hl-xl: rgba(114, 145, 143, 0.8);
|
||||
--hl: rgb(114, 145, 143);
|
||||
|
||||
.tag {
|
||||
--color-success: #68a9a2;
|
||||
--color-notice: #e6b564;
|
||||
--color-warning: #e27164;
|
||||
--color-danger: #d64b66;
|
||||
--color-surprise: #b482d6;
|
||||
--color-info: #6c93d8;
|
||||
}
|
||||
|
||||
a {
|
||||
--color-surprise: #68a9a2;
|
||||
}
|
||||
|
||||
.modal > *,
|
||||
.CodeMirror-info,
|
||||
.theme--dropdown__menu {
|
||||
--color-bg: #303c43;
|
||||
--color-font: #dde1e1;
|
||||
}
|
||||
|
||||
.ReactTabs > *,
|
||||
.pane > *,
|
||||
.modal,
|
||||
.sidebar {
|
||||
--hl-xxs: rgba(114, 145, 143, 0);
|
||||
--hl-xs: rgba(114, 145, 143, 0);
|
||||
--hl-sm: rgba(114, 145, 143, 0);
|
||||
--hl-md: rgba(114, 145, 143, 0);
|
||||
--hl-lg: rgba(114, 145, 143, 0.1);
|
||||
--hl-xl: rgba(114, 145, 143, 0.1);
|
||||
--hl: rgb(125, 153, 151);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
--color-bg: #1f2b31;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
table,
|
||||
.sidebar__item,
|
||||
.btn,
|
||||
.tag,
|
||||
.theme--dropdown__menu,
|
||||
.CodeMirror-info,
|
||||
.CodeMirror,
|
||||
.pane__body,
|
||||
.modal__header,
|
||||
.sidebar__header,
|
||||
.form-control {
|
||||
--hl-xxs: rgba(114, 145, 143, 0.05);
|
||||
--hl-xs: rgba(114, 145, 143, 0.08);
|
||||
--hl-sm: rgba(114, 145, 143, 0.1);
|
||||
--hl-md: rgba(114, 145, 143, 0.2);
|
||||
--hl-lg: rgba(114, 145, 143, 0.4);
|
||||
--hl-xl: rgba(114, 145, 143, 0.5);
|
||||
}
|
||||
|
||||
.pane__body,
|
||||
.pane__header,
|
||||
::-webkit-scrollbar-track,
|
||||
::-webkit-scrollbar-thumb {
|
||||
--hl-xxs: rgba(114, 145, 143, 0.05);
|
||||
--hl-xs: rgba(114, 145, 143, 0.08);
|
||||
--hl-sm: rgba(114, 145, 143, 0.1);
|
||||
--hl-md: rgba(114, 145, 143, 0.15);
|
||||
--hl-lg: rgba(114, 145, 143, 0.2);
|
||||
--hl-xl: rgba(114, 145, 143, 0.2);
|
||||
}
|
||||
|
||||
.theme--overlay {
|
||||
--color-bg: rgba(29, 39, 44, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
*[theme='solarized'] {
|
||||
--color-success: #859900;
|
||||
--color-notice: #b58900;
|
||||
--color-warning: #cb4b16;
|
||||
--color-danger: #dc322f;
|
||||
--color-surprise: #6c71c4;
|
||||
--color-info: #2aa198;
|
||||
|
||||
--color-bg: #fdf6e3;
|
||||
--color-font: #657b83;
|
||||
|
||||
--hl-xxs: rgba(159, 167, 164, 0.05);
|
||||
--hl-xs: rgba(159, 167, 164, 0.1);
|
||||
--hl-sm: rgba(159, 167, 164, 0.2);
|
||||
--hl-md: rgba(142, 149, 146, 0.3);
|
||||
--hl-lg: rgba(142, 149, 146, 0.6);
|
||||
--hl-xl: rgba(142, 149, 146, 0.8);
|
||||
--hl: rgb(142, 149, 146);
|
||||
|
||||
.theme--overlay {
|
||||
--color-bg: rgba(238, 231, 213, 0.8);
|
||||
}
|
||||
|
||||
.theme--dropdown__menu,
|
||||
.CodeMirror-info,
|
||||
.modal {
|
||||
--color-bg: #fff8e5;
|
||||
--color-font: #657b83;
|
||||
}
|
||||
|
||||
.pane__header {
|
||||
--color-bg: #faf4e0;
|
||||
}
|
||||
|
||||
.sidebar__header {
|
||||
--color-bg: #073440;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
--color-bg: #073642;
|
||||
--color-font: #8ea0a2;
|
||||
|
||||
--hl-xxs: rgba(91, 127, 143, 0.05);
|
||||
--hl-xs: rgba(91, 127, 143, 0.1);
|
||||
--hl-sm: rgba(91, 127, 143, 0.2);
|
||||
--hl-md: rgba(91, 127, 143, 0.3);
|
||||
--hl-lg: rgba(91, 127, 143, 0.6);
|
||||
--hl-xl: rgba(91, 127, 143, 0.8);
|
||||
--hl: rgb(98, 127, 143);
|
||||
}
|
||||
}
|
||||
|
||||
*[theme='railscasts'] {
|
||||
--color-success: #a5c261;
|
||||
--color-notice: #ffc66d;
|
||||
--color-warning: #cc7833;
|
||||
--color-danger: #da4939;
|
||||
--color-surprise: #b6b3eb;
|
||||
--color-info: #6d9cbe;
|
||||
|
||||
--color-bg: #2b2b2b;
|
||||
--color-font: #e1deda;
|
||||
|
||||
--hl-xxs: rgba(120, 120, 120, 0.05);
|
||||
--hl-xs: rgba(120, 120, 120, 0.09);
|
||||
--hl-sm: rgba(120, 120, 120, 0.15);
|
||||
--hl-md: rgba(120, 120, 120, 0.25);
|
||||
--hl-lg: rgba(120, 120, 120, 0.4);
|
||||
--hl-xl: rgba(120, 120, 120, 0.7);
|
||||
--hl: rgba(130, 130, 130, 1);
|
||||
|
||||
.theme--overlay {
|
||||
--color-bg: rgba(30, 30, 30, 0.8);
|
||||
--color-font: #e1deda;
|
||||
}
|
||||
|
||||
.theme--dropdown__menu,
|
||||
.CodeMirror-info,
|
||||
.modal {
|
||||
--color-bg: #323232;
|
||||
}
|
||||
}
|
||||
|
||||
@opacity-subtle: 0.7;
|
||||
|
||||
@@ -19,13 +19,16 @@
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
opacity: 0.7; // not so bright!
|
||||
content: " ";
|
||||
content: ' ';
|
||||
z-index: -1;
|
||||
border-radius: 0.2em;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 0 0.1em rgba(0, 0, 0, 0.4);
|
||||
transition: background-color 300ms;
|
||||
|
||||
// not so bright!
|
||||
opacity: 0.8;
|
||||
filter: grayscale(20%);
|
||||
}
|
||||
|
||||
label {
|
||||
@@ -61,14 +64,14 @@
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
&[data-error="on"] {
|
||||
&[data-error='on'] {
|
||||
color: var(--color-font-danger);
|
||||
&::after {
|
||||
background: var(--color-danger);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-ignore="on"]::after {
|
||||
&[data-ignore='on']::after {
|
||||
background: var(--hl-xl);
|
||||
color: bar(--color-font);
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB |
@@ -12,11 +12,13 @@ import { init as initPlugins } from '../plugins';
|
||||
import DNDBackend from './dnd-backend';
|
||||
import './css/index.less';
|
||||
import { isDevelopment } from '../common/constants';
|
||||
import { setThemes } from '../plugins/misc';
|
||||
|
||||
// Handy little helper
|
||||
document.body.setAttribute('data-platform', process.platform);
|
||||
|
||||
(async function() {
|
||||
await setThemes();
|
||||
await db.initClient();
|
||||
|
||||
// Create Redux store
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"private": true,
|
||||
"version": "1.0.27",
|
||||
"version": "1.0.30",
|
||||
"name": "insomnia-app",
|
||||
"app": {
|
||||
"name": "insomnia",
|
||||
@@ -110,6 +110,7 @@
|
||||
"insomnia-importers": "^2.0.6",
|
||||
"insomnia-libcurl": "^0.0.10",
|
||||
"insomnia-plugin-base64": "^1.0.4",
|
||||
"insomnia-plugin-core-themes": "^1.0.3",
|
||||
"insomnia-plugin-file": "^1.0.4",
|
||||
"insomnia-plugin-hash": "^1.0.4",
|
||||
"insomnia-plugin-jsonpath": "^1.0.4",
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
# Insomnia Core Themes
|
||||
|
||||
[](https://www.npmjs.com/package/insomnia-plugin-core-themes)
|
||||
|
||||
This is a core Insomnia plugin.
|
||||
@@ -0,0 +1,14 @@
|
||||
module.exports.themes = [
|
||||
require('./themes/default'),
|
||||
require('./themes/material'),
|
||||
require('./themes/simple-light'),
|
||||
require('./themes/simple-dark'),
|
||||
require('./themes/one-light'),
|
||||
require('./themes/one-dark'),
|
||||
require('./themes/purple'),
|
||||
require('./themes/hyper'),
|
||||
require('./themes/railscasts'),
|
||||
require('./themes/solarized-light'),
|
||||
require('./themes/solarized'),
|
||||
require('./themes/solarized-dark')
|
||||
];
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "insomnia-plugin-core-themes",
|
||||
"version": "1.0.3",
|
||||
"author": "Gregory Schier <gschier1990@gmail.com>",
|
||||
"description": "Insomnia core themes",
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/getinsomnia/insomnia/tree/master/plugins/insomnia-plugin-core-themes",
|
||||
"bugs": {
|
||||
"url": "https://github.com/getinsomnia/insomnia"
|
||||
},
|
||||
"main": "index.js",
|
||||
"insomnia": {
|
||||
"name": "core-themes"
|
||||
},
|
||||
"scripts": {
|
||||
"test": "node --version"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
module.exports = {
|
||||
name: 'default',
|
||||
displayName: 'Default',
|
||||
theme: {
|
||||
background: {
|
||||
default: '#555',
|
||||
success: '#59a210',
|
||||
notice: '#ae9602',
|
||||
warning: '#d07502',
|
||||
danger: '#d04444',
|
||||
surprise: '#7d69cb',
|
||||
info: '#1c90b4'
|
||||
},
|
||||
foreground: {
|
||||
default: '#eee'
|
||||
},
|
||||
styles: {
|
||||
transparentOverlay: {
|
||||
background: {
|
||||
default: 'rgba(30, 30, 30, 0.8)'
|
||||
},
|
||||
foreground: {
|
||||
default: '#ddd'
|
||||
}
|
||||
},
|
||||
dialog: {
|
||||
background: {
|
||||
default: '#fff'
|
||||
},
|
||||
foreground: {
|
||||
default: '#333'
|
||||
}
|
||||
},
|
||||
sidebar: {
|
||||
background: {
|
||||
default: '#2e2f2b',
|
||||
success: '#7ecf2b',
|
||||
notice: '#f0e137',
|
||||
warning: '#ff9a1f',
|
||||
danger: '#ff5631',
|
||||
surprise: '#a896ff',
|
||||
info: '#46c1e6'
|
||||
},
|
||||
foreground: {
|
||||
default: 'e0e0e0'
|
||||
},
|
||||
highlight: {
|
||||
default: '#999'
|
||||
}
|
||||
},
|
||||
sidebarHeader: {
|
||||
background: {
|
||||
default: '#695eb8'
|
||||
},
|
||||
foreground: {
|
||||
default: '#fff'
|
||||
}
|
||||
},
|
||||
paneHeader: {
|
||||
foreground: {
|
||||
default: '#666'
|
||||
},
|
||||
background: {
|
||||
default: '#fff',
|
||||
success: '#75ba24',
|
||||
notice: '#d8c84d',
|
||||
warning: '#ec8702',
|
||||
danger: '#ee5655',
|
||||
surprise: '#a590ff',
|
||||
info: '#22c1ee'
|
||||
}
|
||||
},
|
||||
pane: {
|
||||
background: {
|
||||
default: '#282925',
|
||||
success: '{{ styles.sidebar.background.success }}',
|
||||
notice: '{{ styles.sidebar.background.notice }}',
|
||||
warning: '{{ styles.sidebar.background.warning }}',
|
||||
danger: '{{ styles.sidebar.background.danger }}',
|
||||
surprise: '{{ styles.sidebar.background.surprise }}',
|
||||
info: '{{ styles.sidebar.background.info }}'
|
||||
},
|
||||
foreground: {
|
||||
default: 'e0e0e0'
|
||||
},
|
||||
highlight: {
|
||||
default: '#999'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
module.exports = {
|
||||
name: 'hyper',
|
||||
displayName: 'Hyper',
|
||||
theme: {
|
||||
foreground: {
|
||||
default: '#ccc'
|
||||
},
|
||||
background: {
|
||||
default: '#000',
|
||||
success: '#87ee59',
|
||||
notice: '#f8d245',
|
||||
warning: '#f9ac2a',
|
||||
danger: '#ff505c',
|
||||
surprise: '#ec48f9',
|
||||
info: '#23dce8'
|
||||
},
|
||||
styles: {
|
||||
dialog: {
|
||||
background: {
|
||||
default: '#111'
|
||||
}
|
||||
},
|
||||
transparentOverlay: {
|
||||
background: {
|
||||
default: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
},
|
||||
paneHeader: {
|
||||
background: {
|
||||
default: '#000',
|
||||
success: '#6ac04b',
|
||||
notice: '#ebc742',
|
||||
warning: '#ea9f29',
|
||||
danger: '#df4b56',
|
||||
surprise: '#d945e5',
|
||||
info: '#20bec9'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,89 @@
|
||||
module.exports = {
|
||||
name: 'material',
|
||||
displayName: 'Material',
|
||||
theme: {
|
||||
background: {
|
||||
default: '#263238',
|
||||
success: '#80cbc4',
|
||||
notice: '#ffcb6b',
|
||||
warning: '#f77669',
|
||||
danger: '#ff5370',
|
||||
surprise: '#c792ea',
|
||||
info: '#82b1ff'
|
||||
},
|
||||
foreground: {
|
||||
default: '#dde1e1',
|
||||
success: '#fff',
|
||||
notice: '#fff',
|
||||
warning: '#fff',
|
||||
danger: '#fff',
|
||||
surprise: '#fff',
|
||||
info: '#fff'
|
||||
},
|
||||
highlight: {
|
||||
default: 'rgba(114, 145, 143, 1)',
|
||||
xxs: 'rgba(114, 145, 143, 0.05)',
|
||||
xs: 'rgba(114, 145, 143, 0.1)',
|
||||
sm: 'rgba(114, 145, 143, 0.15)',
|
||||
md: 'rgba(114, 145, 143, 0.2)',
|
||||
lg: 'rgba(114, 145, 143, 0.6)',
|
||||
xl: 'rgba(114, 145, 143, 0.8)'
|
||||
},
|
||||
styles: {
|
||||
link: {
|
||||
foreground: {
|
||||
default: '#68a9a2'
|
||||
}
|
||||
},
|
||||
dialog: {
|
||||
background: {
|
||||
default: '#303c43'
|
||||
},
|
||||
foreground: {
|
||||
default: '#dde1e1'
|
||||
}
|
||||
},
|
||||
paneHeader: {
|
||||
background: {
|
||||
success: '#68a9a2',
|
||||
notice: '#e6b564',
|
||||
warning: '#e27164',
|
||||
danger: '#d64b66',
|
||||
surprise: '#b482d6',
|
||||
info: '#6c93d8'
|
||||
}
|
||||
},
|
||||
sidebar: {
|
||||
highlight: {
|
||||
default: 'rgb(125, 153, 151)',
|
||||
xxs: 'rgba(114, 145, 143, 0)',
|
||||
xs: 'rgba(114, 145, 143, 0)',
|
||||
sm: 'rgba(114, 145, 143, 0)',
|
||||
md: 'rgba(114, 145, 143, 0)',
|
||||
lg: 'rgba(114, 145, 143, 0.1)',
|
||||
xl: 'rgba(114, 145, 143, 0.1)'
|
||||
}
|
||||
},
|
||||
sidebarHeader: {
|
||||
highlight: {
|
||||
xxs: 'rgba(114, 145, 143, 0.05)',
|
||||
xs: 'rgba(114, 145, 143, 0.08)',
|
||||
sm: 'rgba(114, 145, 143, 0.1)',
|
||||
md: 'rgba(114, 145, 143, 0.2)',
|
||||
lg: 'rgba(114, 145, 143, 0.4)',
|
||||
xl: 'rgba(114, 145, 143, 0.5)'
|
||||
}
|
||||
},
|
||||
sidebarActions: {
|
||||
highlight: {
|
||||
xxs: 'rgba(114, 145, 143, 0.05)',
|
||||
xs: 'rgba(114, 145, 143, 0.08)',
|
||||
sm: 'rgba(114, 145, 143, 0.1)',
|
||||
md: 'rgba(114, 145, 143, 0.2)',
|
||||
lg: 'rgba(114, 145, 143, 0.5)',
|
||||
xl: 'rgba(114, 145, 143, 0.7)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,60 @@
|
||||
module.exports = {
|
||||
name: 'one-dark',
|
||||
displayName: 'One Dark',
|
||||
theme: {
|
||||
background: {
|
||||
default: '#272c35',
|
||||
success: '#98c379',
|
||||
notice: '#d19a66',
|
||||
warning: '#d19a66',
|
||||
danger: '#e06c75',
|
||||
surprise: '#c678dd',
|
||||
info: '#56b6c2'
|
||||
},
|
||||
foreground: {
|
||||
default: '#bbb',
|
||||
success: '#fff',
|
||||
notice: '#fff',
|
||||
warning: '#fff',
|
||||
danger: '#fff',
|
||||
surprise: '#fff',
|
||||
info: '#fff'
|
||||
},
|
||||
highlight: {
|
||||
default: 'rgba(114, 121, 133, 1)',
|
||||
xxs: 'rgba(114, 121, 133, 0.05)',
|
||||
xs: 'rgba(114, 121, 133, 0.1)',
|
||||
sm: 'rgba(114, 121, 133, 0.2)',
|
||||
md: 'rgba(114, 121, 133, 0.3)',
|
||||
lg: 'rgba(114, 121, 133, 0.5)',
|
||||
xl: 'rgba(114, 121, 133, 0.8)'
|
||||
},
|
||||
styles: {
|
||||
sidebar: {
|
||||
background: {
|
||||
default: '#20252c'
|
||||
}
|
||||
},
|
||||
dialog: {
|
||||
background: {
|
||||
default: '#2b303a'
|
||||
}
|
||||
},
|
||||
paneHeader: {
|
||||
background: {
|
||||
success: '#8ab46d',
|
||||
notice: '#d19a66',
|
||||
warning: '#d19a66',
|
||||
danger: '#d86a6f',
|
||||
surprise: '#c678dd',
|
||||
info: '#51acb7'
|
||||
}
|
||||
},
|
||||
transparentOverlay: {
|
||||
background: {
|
||||
default: 'rgba(30, 33, 40, 0.8)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,61 @@
|
||||
module.exports = {
|
||||
name: 'one-light',
|
||||
displayName: 'One Light',
|
||||
theme: {
|
||||
background: {
|
||||
default: '#fafafa',
|
||||
success: '#50a14f',
|
||||
notice: '#c18401',
|
||||
warning: '#c18401',
|
||||
danger: '#e45649',
|
||||
surprise: '#a626a4',
|
||||
info: '#0184bc'
|
||||
},
|
||||
foreground: {
|
||||
default: '#777'
|
||||
},
|
||||
highlight: {
|
||||
default: 'rgba(114, 121, 133, 1)',
|
||||
xxs: 'rgba(114, 121, 133, 0.05)',
|
||||
xs: 'rgba(114, 121, 133, 0.1)',
|
||||
sm: 'rgba(114, 121, 133, 0.2)',
|
||||
md: 'rgba(114, 121, 133, 0.3)',
|
||||
lg: 'rgba(114, 121, 133, 0.5)',
|
||||
xl: 'rgba(114, 121, 133, 0.8)'
|
||||
},
|
||||
styles: {
|
||||
sidebar: {
|
||||
background: {
|
||||
default: '#eaeaeb',
|
||||
success: '#50a14f',
|
||||
notice: '#c18401',
|
||||
warning: '#c18401',
|
||||
danger: '#e45649',
|
||||
surprise: '#a626a4',
|
||||
info: '#0184bc'
|
||||
},
|
||||
foreground: {
|
||||
default: '#444'
|
||||
},
|
||||
highlight: {
|
||||
default: '#888'
|
||||
}
|
||||
},
|
||||
paneHeader: {
|
||||
background: {
|
||||
success: '{{ styles.sidebar.background.success }}',
|
||||
notice: '{{ styles.sidebar.background.notice }}',
|
||||
warning: '{{ styles.sidebar.background.warning }}',
|
||||
danger: '{{ styles.sidebar.background.danger }}',
|
||||
surprise: '{{ styles.sidebar.background.surprise }}',
|
||||
info: '{{ styles.sidebar.background.info }}'
|
||||
}
|
||||
},
|
||||
transparentOverlay: {
|
||||
background: {
|
||||
default: 'rgba(30, 33, 40, 0.8)'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,52 @@
|
||||
module.exports = {
|
||||
name: 'purple',
|
||||
displayName: 'Purple',
|
||||
theme: {
|
||||
foreground: {
|
||||
default: '#555'
|
||||
},
|
||||
styles: {
|
||||
link: {
|
||||
foreground: {
|
||||
default: '#68a9a2'
|
||||
}
|
||||
},
|
||||
sidebar: {
|
||||
background: {
|
||||
default: '#695eb8',
|
||||
success: '#a9ea6e',
|
||||
notice: '#ffdb02',
|
||||
warning: '#ffac49',
|
||||
danger: '#ff7472',
|
||||
surprise: '#c5bbff',
|
||||
info: '#75ddff'
|
||||
},
|
||||
foreground: {
|
||||
default: '#fff'
|
||||
},
|
||||
highlight: {
|
||||
default: 'rgb(217, 204, 255)',
|
||||
xxs: 'rgba(207, 190, 255, 0.05)',
|
||||
xs: 'rgba(207, 190, 255, 0.1)',
|
||||
sm: 'rgba(207, 190, 255, 0.2)',
|
||||
md: 'rgba(207, 190, 255, 0.3)',
|
||||
lg: 'rgba(207, 190, 255, 0.5)',
|
||||
xl: 'rgba(207, 190, 255, 0.8)'
|
||||
}
|
||||
},
|
||||
sidebarHeader: {
|
||||
foreground: {
|
||||
default: '#eee'
|
||||
}
|
||||
},
|
||||
transparentOverlay: {
|
||||
background: {
|
||||
default: 'rgba(243, 242, 250, 0.8)'
|
||||
},
|
||||
foreground: {
|
||||
default: '#555'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,44 @@
|
||||
module.exports = {
|
||||
name: 'railscasts',
|
||||
displayName: 'Railscasts',
|
||||
theme: {
|
||||
foreground: {
|
||||
default: '#ddd'
|
||||
},
|
||||
background: {
|
||||
default: '#2b2b2b',
|
||||
success: '#a5c261',
|
||||
notice: '#ffc66d',
|
||||
warning: '#e48a37',
|
||||
danger: '#dc4939',
|
||||
surprise: '#b6b3eb',
|
||||
info: '#6d9cbe'
|
||||
},
|
||||
styles: {
|
||||
paneHeader: {
|
||||
background: {
|
||||
default: '#2b2b2b',
|
||||
success: '#97b159',
|
||||
notice: '#efba66',
|
||||
warning: '#e48a37',
|
||||
danger: '#dc4939',
|
||||
surprise: '#a3a1d3',
|
||||
info: '#6d9cbe'
|
||||
}
|
||||
},
|
||||
dialog: {
|
||||
background: {
|
||||
default: '#323232'
|
||||
}
|
||||
},
|
||||
transparentOverlay: {
|
||||
background: {
|
||||
default: 'rgba(30, 30, 30, 0.8)'
|
||||
},
|
||||
foreground: {
|
||||
default: '#e1deda'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,35 @@
|
||||
module.exports = {
|
||||
name: 'dark',
|
||||
displayName: 'Simple Dark',
|
||||
theme: {
|
||||
foreground: {
|
||||
default: '#ddd'
|
||||
},
|
||||
background: {
|
||||
default: '#222',
|
||||
success: '#8fc860',
|
||||
notice: '#e5ca1e',
|
||||
warning: '#f9a230',
|
||||
danger: '#f06d6b',
|
||||
surprise: '#aca0f2',
|
||||
info: '#6eccec'
|
||||
},
|
||||
styles: {
|
||||
paneHeader: {
|
||||
background: {
|
||||
success: '#77a855',
|
||||
notice: '#d1b81c',
|
||||
warning: '#d9892c',
|
||||
danger: '#d35855',
|
||||
surprise: '#8e84cb',
|
||||
info: '#62a6c3'
|
||||
}
|
||||
},
|
||||
dialog: {
|
||||
background: {
|
||||
default: '#2a2a2a'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,16 @@
|
||||
module.exports = {
|
||||
name: 'light',
|
||||
displayName: 'Simple Light',
|
||||
theme: {
|
||||
styles: {
|
||||
transparentOverlay: {
|
||||
background: {
|
||||
default: 'rgba(240, 240, 240, 0.8)'
|
||||
},
|
||||
foreground: {
|
||||
default: '#555'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,27 @@
|
||||
module.exports = {
|
||||
name: 'solarized-dark',
|
||||
displayName: 'Solarized Dark',
|
||||
theme: {
|
||||
background: {
|
||||
default: '#073642',
|
||||
success: '#859900',
|
||||
notice: '#b58900',
|
||||
warning: '#cb4b16',
|
||||
danger: '#dc322f',
|
||||
surprise: '#6c71c4',
|
||||
info: '#2aa198'
|
||||
},
|
||||
foreground: {
|
||||
default: '#8ea0a2'
|
||||
},
|
||||
highlight: {
|
||||
default: 'rgb(142, 149, 146)',
|
||||
xxs: 'rgba(159, 167, 164, 0.05)',
|
||||
xs: 'rgba(159, 167, 164, 0.1)',
|
||||
sm: 'rgba(159, 167, 164, 0.2)',
|
||||
md: 'rgba(142, 149, 146, 0.3)',
|
||||
lg: 'rgba(142, 149, 146, 0.6)',
|
||||
xl: 'rgba(142, 149, 146, 0.8)'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,27 @@
|
||||
module.exports = {
|
||||
name: 'solarized-light',
|
||||
displayName: 'Solarized Light',
|
||||
theme: {
|
||||
background: {
|
||||
default: '#fdf6e3',
|
||||
success: '#859900',
|
||||
notice: '#b58900',
|
||||
warning: '#cb4b16',
|
||||
danger: '#dc322f',
|
||||
surprise: '#6c71c4',
|
||||
info: '#2aa198'
|
||||
},
|
||||
foreground: {
|
||||
default: '#657b83'
|
||||
},
|
||||
highlight: {
|
||||
default: 'rgb(142, 149, 146)',
|
||||
xxs: 'rgba(159, 167, 164, 0.05)',
|
||||
xs: 'rgba(159, 167, 164, 0.1)',
|
||||
sm: 'rgba(159, 167, 164, 0.2)',
|
||||
md: 'rgba(142, 149, 146, 0.3)',
|
||||
lg: 'rgba(142, 149, 146, 0.6)',
|
||||
xl: 'rgba(142, 149, 146, 0.8)'
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,37 @@
|
||||
module.exports = {
|
||||
name: 'solarized',
|
||||
displayName: 'Solarized',
|
||||
theme: {
|
||||
background: {
|
||||
default: '#fdf6e3',
|
||||
success: '#859900',
|
||||
notice: '#b58900',
|
||||
warning: '#cb4b16',
|
||||
danger: '#dc322f',
|
||||
surprise: '#6c71c4',
|
||||
info: '#2aa198'
|
||||
},
|
||||
foreground: {
|
||||
default: '#657b83'
|
||||
},
|
||||
highlight: {
|
||||
default: 'rgb(142, 149, 146)',
|
||||
xxs: 'rgba(159, 167, 164, 0.05)',
|
||||
xs: 'rgba(159, 167, 164, 0.1)',
|
||||
sm: 'rgba(159, 167, 164, 0.2)',
|
||||
md: 'rgba(142, 149, 146, 0.3)',
|
||||
lg: 'rgba(142, 149, 146, 0.6)',
|
||||
xl: 'rgba(142, 149, 146, 0.8)'
|
||||
},
|
||||
styles: {
|
||||
sidebar: {
|
||||
background: {
|
||||
default: '#073642'
|
||||
},
|
||||
foreground: {
|
||||
default: '#8ea0a2'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
Reference in new issue
Block a user