import React, { useState, useEffect, useContext } from 'react'; import styles from './Main.module.css'; import ColorSetInputs from './ColorSetInputs'; import TextPreviews from './TextPreviews'; import WallpaperPreview from './WallpaperPreview'; import PreBuiltList from './PreBuiltList'; import Download from './Download'; import Link from './Link'; import CopyUrl from './CopyUrl'; import StarCount from './StarCount'; import ThemeContext from './ThemeContext'; import Notification from './Notification'; import TwitterHandle from './TwitterHandle'; export default () => { const [keyboarding, setKeyboarding] = useState(false); const onKeyDown = (evt) => { if (evt.key === 'Tab') { setKeyboarding(true); } }; const onMouseDown = () => { setKeyboarding(false); } useEffect(() => { window.document.addEventListener('keydown', onKeyDown); return () => { window.document.removeEventListener('keydown', onKeyDown); }; }); useEffect(() => { window.document.addEventListener('mousedown', onMouseDown); return () => { window.document.removeEventListener('mousedown', onMouseDown); } }); const { getActiveColorOrFallback } = useContext(ThemeContext); const backgroundColor = getActiveColorOrFallback(['shade0'], true); useEffect(() => { window.document.body.style.backgroundColor = backgroundColor; }, [ backgroundColor ]); return (
themer takes a set of colors and generates themes for your development environment (editors, terminals, wallpapers, and more).
Input your colors using any CSS format (keyword, hsl, rgb, etc.).
Or start with a pre-built color set:
Select which themes you'd like to generate from your color set. Installation instructions will be included in a README file.
Pro tip:
{' '}
The current URL uniquely identifies your current theme. Bookmark it, email it, or share it however you like.
{' '}