Skip to content

Instantly share code, notes, and snippets.

@andrey-skl
Last active September 24, 2018 08:55
Show Gist options
  • Save andrey-skl/db8a552d7b650a499408373f1b37e1ed to your computer and use it in GitHub Desktop.
Save andrey-skl/db8a552d7b650a499408373f1b37e1ed to your computer and use it in GitHub Desktop.
(function setTheme() {
let properties = {
'--ring-line-color': '#263b4c',
'--ring-dark-line-color': '#263b4c',
'--ring-borders-color': '#b8d1e5',
'--ring-icon-color': 'var(--ring-borders-color)',
'--ring-border-disabled-color': '#dbdbdb',
'--ring-icon-disabled-color': 'var(--ring-border-disabled-color)',
'--ring-border-hover-color': '#80c6ff',
'--ring-icon-hover-color': 'var(--ring-border-hover-color)',
'--ring-main-color': '#008eff',
'--ring-main-hover-color': '#007ee5',
'--ring-icon-error-color': '#ff5555',
'--ring-icon-warning-color': '#ffb86c',
'--ring-icon-success-color': '#59a869',
'--ring-pale-control-color': '#cfdbe5',
'--ring-popup-border-components': '0, 10, 15',
'--ring-popup-border-color': 'rgba(var(--ring-popup-border-components), 0.1)',
'--ring-popup-shadow-color': 'rgba(var(--ring-popup-border-components), 0.15)',
'--ring-message-shadow-color': 'rgba(var(--ring-popup-border-components), 0.3)',
'--ring-search-color': '#669ecc',
'--ring-hint-color': '#406380',
'--ring-link-color': '#8be9fd',
'--ring-link-hover-color': '#ff79c6',
'--ring-error-color': '#ff5555',
'--ring-warning-color': '#ffb86c',
'--ring-success-color': '#50fa7b',
'--ring-text-color': '#f8f8f2',
'--ring-dark-text-color': '#fff',
'--ring-heading-color': '#f8f8f2',
'--ring-secondary-color': '#6272a4',
'--ring-dark-secondary-color': '#888',
'--ring-disabled-color': '#bbb',
'--ring-dark-active-color': '#ccc',
'--ring-content-background-color': '#282a36',
'--ring-sidebar-background-color': '#282a36',
'--ring-selected-background-color': '#44475a',
'--ring-hover-background-color': '#44475a',
'--ring-dark-selected-background-color': '#44475a',
'--ring-message-background-color': 'rgba(0, 21, 38, 0.9)',
'--ring-navigation-background-color': '#000',
'--ring-border-radius': '3px',
'--ring-border-radius-small': '2px',
'--ring-font-size-larger': '17px',
'--ring-font-size': '15px',
'--ring-font-size-smaller': '14px',
'--ring-line-height-taller': '21px',
'--ring-line-height': '20px',
'--ring-line-height-lower': '18px',
'--ring-line-height-lowest': '16px',
'--ring-ease': '0.3s ease-out',
'--ring-fast-ease': '0.15s ease-out',
'--ring-font-family': '"Comic Sans MS", system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif',
'--ring-font-family-monospace': 'Menlo, "Bitstream Vera Sans Mono", "Ubuntu Mono", Consolas, "Courier New", Courier, monospace',
'--ring-invisible-element-z-index': -1,
'--ring-fixed-z-index': 1,
'--ring-overlay-z-index': 5,
'--ring-alert-z-index': 6
}
Object.entries(properties).forEach(([key, value]) => {
document.documentElement.style.setProperty(key, value);
});
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment