hkuglldocnbodn
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

178 lines
3.8 KiB

  1. import React from 'react';
  2. import * as allThemes from '@theme-ui/presets';
  3. import { Select, Theme, ThemeProviderProps } from 'theme-ui';
  4. import { darken, lighten } from '@theme-ui/color';
  5. import { i18n } from './i18next';
  6. import { useThemeSystem } from './components/ThemeSystemProvider';
  7. const { dark, bulma, tailwind, ...remainingThemes } = allThemes;
  8. export const variants: any = {
  9. buttons: {
  10. primary: {
  11. color: 'background',
  12. bg: 'primary',
  13. cursor: 'pointer',
  14. '&:hover': {
  15. textDecoration: 'none',
  16. cursor: 'pointer',
  17. color: 'background',
  18. },
  19. '&:disabled': {
  20. opacity: 0.5,
  21. cursor: 'not-allowed',
  22. },
  23. },
  24. secondary: {
  25. color: 'background',
  26. bg: 'secondary',
  27. },
  28. muted: {
  29. bg: 'muted',
  30. color: 'text',
  31. },
  32. highlight: {
  33. bg: 'highlight',
  34. color: 'text',
  35. '&:hover': {
  36. backgroundColor: 'muted',
  37. },
  38. },
  39. danger: {
  40. backgroundColor: 'danger',
  41. },
  42. outline: {
  43. color: 'text',
  44. borderColor: 'muted',
  45. borderWidth: '2px',
  46. borderStyle: 'solid',
  47. backgroundColor: 'transparent',
  48. },
  49. },
  50. forms: {
  51. select: {
  52. // borderColor: lighten('muted', 0.4),
  53. backgroundColor: 'background',
  54. color: 'text',
  55. },
  56. },
  57. alerts: {
  58. primary: {
  59. color: 'background',
  60. bg: 'primary',
  61. },
  62. muted: {
  63. color: 'text',
  64. bg: 'muted',
  65. },
  66. },
  67. };
  68. const defaultTheme: ThemeProviderProps<Theme> = {
  69. ...dark,
  70. fonts: {
  71. body:
  72. 'Lato, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
  73. heading: 'inherit',
  74. monospace: 'Menlo, monospace',
  75. },
  76. colors: {
  77. ...dark.colors,
  78. background: '#222',
  79. // primary: '#DA1B9A',
  80. primary: '#A4288B',
  81. secondary: '#2030DF',
  82. text: '#DEDEDE',
  83. accent: '#F3B90C',
  84. danger: '#dc3545',
  85. muted: '#303030',
  86. highlight: '#00BC8C',
  87. },
  88. buttons: {
  89. ...variants.buttons,
  90. primary: {
  91. ...variants.buttons.primary,
  92. color: 'text',
  93. bg: 'primary',
  94. '&:hover': {
  95. bg: 'primary',
  96. },
  97. },
  98. secondary: {
  99. ...variants.buttons.secondary,
  100. color: 'text',
  101. bg: 'secondary',
  102. },
  103. highlight: {
  104. ...variants.buttons.highlight,
  105. color: 'text',
  106. bg: lighten('muted', 0.1),
  107. },
  108. },
  109. alerts: {
  110. ...variants.alerts,
  111. primary: {
  112. ...variants.alerts.primary,
  113. color: 'text',
  114. bg: 'primary',
  115. },
  116. secondary: {
  117. ...variants.alerts.secondary,
  118. color: 'text',
  119. bg: 'secondary',
  120. },
  121. highlight: {
  122. ...variants.alerts.highlight,
  123. color: 'text',
  124. bg: lighten('muted', 0.1),
  125. },
  126. },
  127. };
  128. export const themes = {
  129. chapo: { ...defaultTheme },
  130. dark,
  131. ...remainingThemes,
  132. };
  133. // console.log({ themes })
  134. interface ThemeSelectorProps {
  135. value: string;
  136. onChange: (name: string) => void;
  137. }
  138. export function ThemeSelector({ value, onChange }: ThemeSelectorProps) {
  139. const { setCurrentTheme } = useThemeSystem();
  140. // console.log({ context });
  141. function handleThemeChange(e: React.ChangeEvent<HTMLSelectElement>) {
  142. setCurrentTheme(e.target.value);
  143. onChange(e.target.value);
  144. }
  145. return (
  146. <Select
  147. value={value}
  148. onChange={handleThemeChange}
  149. // ml={2}
  150. // className="ml-2 custom-select custom-select-sm w-auto"
  151. >
  152. <option disabled>{i18n.t('theme')}</option>
  153. {Object.keys(themes).map(theme => (
  154. <option key={theme} value={theme}>
  155. {theme}
  156. </option>
  157. ))}
  158. </Select>
  159. );
  160. }
  161. // create custom event to allow theme to be changed from anywhere
  162. export function changeTheme(themeName = 'chapo') {
  163. const event = new CustomEvent('change-theme', { detail: themeName });
  164. document.dispatchEvent(event);
  165. }
  166. export default defaultTheme;