2019-03-08 04:32:08 +00:00
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' ;
2019-03-12 03:17:27 +00:00
import Notification from './Notification' ;
2020-04-17 12:21:07 +00:00
import TwitterHandle from './TwitterHandle' ;
2019-03-08 04:32:08 +00:00
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 ) ;
2019-04-09 02:54:12 +00:00
const backgroundColor = getActiveColorOrFallback ( [ 'shade0' ] , true ) ;
useEffect ( ( ) => {
window . document . body . style . backgroundColor = backgroundColor ;
} , [ backgroundColor ] ) ;
2019-03-08 04:32:08 +00:00
return (
< div
className = { ` ${ styles . app } ${ keyboarding ? styles . keyboarding : '' } ` }
style = { {
2019-04-09 02:54:12 +00:00
backgroundColor ,
'--selection-foreground-color' : backgroundColor ,
2019-03-08 04:32:08 +00:00
'--selection-background-color' : getActiveColorOrFallback ( [ 'accent5' ] ) ,
'--focus-outline-color' : getActiveColorOrFallback ( [ 'accent6' ] ) ,
} }
>
< div className = { styles . container } >
< header className = { styles . header } >
2019-03-08 13:19:46 +00:00
< h1 className = { styles . h1 } > < a href = "/" style = { { color : getActiveColorOrFallback ( [ 'shade7' ] ) } } > themer < / a > < / h 1 >
2020-04-17 12:21:07 +00:00
< span >
< TwitterHandle / >
< StarCount / >
< / s p a n >
2019-03-08 04:32:08 +00:00
< / h e a d e r >
< hr
className = { styles . hr }
style = { {
backgroundImage : `
linear - gradient (
to right ,
$ { getActiveColorOrFallback ( [ 'accent0' , 'shade2' ] ) } ,
$ { getActiveColorOrFallback ( [ 'accent1' , 'shade2' ] ) } ,
$ { getActiveColorOrFallback ( [ 'accent2' , 'shade2' ] ) } ,
$ { getActiveColorOrFallback ( [ 'accent3' , 'shade2' ] ) } ,
$ { getActiveColorOrFallback ( [ 'accent4' , 'shade2' ] ) } ,
$ { getActiveColorOrFallback ( [ 'accent4' , 'shade2' ] ) } ,
$ { getActiveColorOrFallback ( [ 'accent5' , 'shade2' ] ) } ,
$ { getActiveColorOrFallback ( [ 'accent6' , 'shade2' ] ) } ,
$ { getActiveColorOrFallback ( [ 'accent7' , 'shade2' ] ) }
)
` ,
} }
/ >
2019-04-20 22:09:37 +00:00
< p style = { { color : getActiveColorOrFallback ( [ 'shade6' ] ) } } > themer takes a set of colors and generates themes for your development environment ( editors , terminals , wallpapers , and more ) . < / p >
2019-03-08 04:32:08 +00:00
< h2 className = { styles . h2 } style = { { color : getActiveColorOrFallback ( [ 'shade7' ] ) } } > 1. Define colors < / h 2 >
< p className = { styles . help } style = { { color : getActiveColorOrFallback ( [ 'shade6' ] ) } } > Input your colors using any CSS format ( keyword , hsl , rgb , etc . ) . < / p >
< ColorSetInputs / >
< p className = { styles . preBuilt } style = { { color : getActiveColorOrFallback ( [ 'shade6' ] ) } } >
Or start with a pre - built color set :
< / p >
< PreBuiltList / >
< h2 className = { styles . h2 } style = { { color : getActiveColorOrFallback ( [ 'shade7' ] ) } } > 2. Preview < / h 2 >
< div className = { styles . previewsContainer } >
< TextPreviews / >
< WallpaperPreview / >
< / d i v >
< h2 className = { styles . h2 } style = { { color : getActiveColorOrFallback ( [ 'shade7' ] ) } } > 3. Download < / h 2 >
2020-05-14 13:25:37 +00:00
< p className = { styles . help } style = { { color : getActiveColorOrFallback ( [ 'shade6' ] ) } } > Select which themes you ' d like to generate from your color set . Installation instructions will be included in a README file . < / p >
2019-03-08 04:32:08 +00:00
< Download / >
< / d i v >
< div className = { styles . shape } style = { { '--shape-color' : getActiveColorOrFallback ( [ 'shade1' ] , true ) } } >
< div className = { styles . container } >
< p style = { { color : getActiveColorOrFallback ( [ 'shade7' ] ) } } >
< span style = { { color : getActiveColorOrFallback ( [ 'accent1' ] ) } } > Pro tip : < / s p a n >
{ ' ' }
The current URL uniquely identifies your current theme . Bookmark it , email it , or share it however you like .
2020-02-01 14:18:55 +00:00
{ ' ' }
2019-03-08 04:32:08 +00:00
< CopyUrl className = { styles . copyUrl } / >
< / p >
< / d i v >
< / d i v >
< footer className = { styles . footer } style = { { color : getActiveColorOrFallback ( [ 'shade3' ] ) } } >
2020-05-28 13:26:50 +00:00
< div > themer is open source software , made by < Link href = "https://mjswensen.com" > mjswensen < /Link> with <Link href="https:/ / github . com / mjswensen / themer / graphs / contributors " > contributors < / L i n k > , a n d i s r e l e a s e d u n d e r t h e M I T l i c e n s e < / d i v >
2020-03-24 03:57:10 +00:00
< div className = { styles . follow } > follow < Link href = "https://twitter.com/themerdev" > @ themerdev < / L i n k > o n T w i t t e r f o r n e w t h e m e s , w a l l p a p e r s , a n d f e a t u r e s a s s o o n a s t h e y l a u n c h < / d i v >
2020-05-28 13:26:50 +00:00
< div className = { styles . support } > enjoying themer ? show your support by purchasing a theme , sending a tip through < Link href = "https://brave.com/the537" > Brave < /Link>, or starring the <Link href="https:/ / github . com / mjswensen / themer " > GitHub repository < / L i n k > < / d i v >
2019-03-08 04:32:08 +00:00
< / f o o t e r >
2019-03-12 03:17:27 +00:00
< Notification / >
2019-03-08 04:32:08 +00:00
< / d i v >
) ;
}