76 lines
1.5 KiB
JavaScript
76 lines
1.5 KiB
JavaScript
import React, { useState } from 'react'
|
|
import { createGlobalStyle } from 'styled-components'
|
|
import tw, { theme, GlobalStyles as BaseStyles } from 'twin.macro'
|
|
|
|
const CustomStyles = createGlobalStyle`
|
|
body {
|
|
-webkit-tap-highlight-color: ${theme`colors.accent`};
|
|
}
|
|
|
|
:root{
|
|
--primary: #3d3d3d;
|
|
--secondary: #535353;
|
|
--trinary: #2c2c2c;
|
|
|
|
--primary-text: #ffffff;
|
|
--secondary-text: #a0a0a0;
|
|
|
|
--primary-invert: #f3f3f3;
|
|
--secondary-invert: #dbdbdb;
|
|
--trinary-invert: #ffffff;
|
|
|
|
--primary-invert-text: #3d3d3d;
|
|
--secondary-invert-text: #535353;
|
|
|
|
--accent: #00C800;
|
|
--accent-dark: #008f00;
|
|
--accent-light: #00ed00;
|
|
--accent2: #3080FF;
|
|
--accent2-dark: #225ab4;
|
|
--accent3: #804000;
|
|
--accent3-dark: #472400;
|
|
--accent4: #F8B02C;
|
|
--accent4-dark: #bd8724;
|
|
--accent5: #9E3086;
|
|
--accent5-dark: #6b215b;
|
|
}
|
|
|
|
.light\-theme{
|
|
--primary: #f3f3f3;
|
|
--secondary: #dbdbdb;
|
|
--trinary: #ffffff;
|
|
--primary-text: #3d3d3d;
|
|
--secondary-text: #535353;
|
|
|
|
|
|
--primary-invert: #3d3d3d;
|
|
--secondary-invert: #535353;
|
|
--trinary-invert: #2c2c2c;
|
|
--primary-text-invert: #ffffff;
|
|
--secondary-text-invert: #a0a0a0;
|
|
}
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0.5rem;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--secondary);
|
|
border-radius: 0.25rem;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--accent-dark);
|
|
}
|
|
`
|
|
|
|
const GlobalStyles = () => {
|
|
return <>
|
|
<BaseStyles />
|
|
<CustomStyles />
|
|
</>
|
|
}
|
|
|
|
export default GlobalStyles |