- tip: You can also change all these settings quickly using the command line (
-
- )
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
- Account settings have moved. You can now access them by hovering over the
- account button in the top right corner, then clicking "Account settings".
-
-
-
-
-
-
-
-
-
- tags
-
-
-
- With tags, you can compare how fast you're typing in different
- situations. You can see your active tags above the test words. They will
- remain active until you deactivate them, or refresh the page.
-
-
-
-
-
-
-
-
-
- presets
-
-
-
- Create settings presets that can be applied with one click. Remember to
- edit your preset if you make any changes - they don't save on their own.
-
-
-
-
-
-
-
-
-
- result saving
-
-
-
- Disable result saving, in case you want to practice without affecting
- your account stats.
-
-
-
-
-
-
-
-
-
- test difficulty
-
-
-
- Normal is the classic typing test experience. Expert fails the test if
- you submit (press space) an incorrect word. Master fails if you press a
- single incorrect key (meaning you have to achieve 100% accuracy).
-
+ tip: You can also change all these settings quickly using the command
+ line (
+
+ )
-
- Press
- tab
- ,
- esc
- or
- enter
- to quickly restart the test, or to quickly jump to the test page. These
- options disable tab navigation on most parts of the website. Using the
- "esc" option will move opening the commandline to the
- tab
- key.
+
+
+
+
-
-
-
-
-
+
+
+
-
-
-
-
- repeat quotes
-
+
+
+
+ Account settings have moved. You can now access them by hovering over
+ the account button in the top right corner, then clicking "Account
+ settings".
+
+
-
- This setting changes the restarting behavior when typing in quote mode.
- Changing it to 'typing' will repeat the quote if you restart while
- typing.
-
-
-
-
-
-
+
+
+
+
-
-
+
+
-
-
-
- blind mode
-
-
-
- No errors or incorrect words are highlighted. Helps you to focus on raw
- speed. If enabled, quick end is recommended.
-
-
-
-
-
-
-
-
-
- always show words history
-
-
-
- This option will automatically show the words history at the end of the
- test. Can cause slight lag with a lot of words.
-
-
-
-
-
-
-
-
-
- single list command line
-
-
-
- When enabled, it will show the command line with all commands in a
- single list instead of submenu arrangements. Selecting 'manual' will
- expose all commands only after typing
- >
- .
-
-
-
-
-
-
-
-
-
- min speed
-
-
-
- Automatically fails a test if your speed falls below a threshold.
-
-
-
-
-
-
-
-
+
+
+
+ blind mode
+
+
+
+ No errors or incorrect words are highlighted. Helps you to focus on
+ raw speed. If enabled, quick end is recommended.
+
+
+
+
+
-
-
-
-
-
- min accuracy
-
-
-
- Automatically fails a test if your accuracy falls below a threshold.
-
-
-
-
-
-
-
-
+
+
+
+ always show words history
+
+
+
+ This option will automatically show the words history at the end of
+ the test. Can cause slight lag with a lot of words.
+
+
+
+
+
-
-
-
-
-
- min burst
-
-
-
- Automatically fails a test if your raw for a single word falls below
- this threshold. Selecting 'flex' allows for this threshold to
- automatically decrease for longer words.
-
-
-
-
-
-
-
-
-
+
+
+
+ single list command line
+
+
+
+ When enabled, it will show the command line with all commands in a
+ single list instead of submenu arrangements. Selecting 'manual' will
+ expose all commands only after typing
+ >
+ .
+
+
+
+
+
+
+
+
+ min speed
+
+
+
+ Automatically fails a test if your speed falls below a threshold.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ min accuracy
+
+
+
+ Automatically fails a test if your accuracy falls below a threshold.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ min burst
+
+
+
+ Automatically fails a test if your raw for a single word falls below
+ this threshold. Selecting 'flex' allows for this threshold to
+ automatically decrease for longer words.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ british english
+
+
+
+ When enabled, the website will use the British spelling instead of
+ American. Note that this might not replace all words correctly. If
+ you find any issues, please let us know.
+
+
+
+
+
+
+
+
+
+ language
+
+
+
Change in which language you want to type.
+
+
+
+
+
+
+
+ funbox
+
+
+
+ These are special modes that change the website in some special way
+ (by altering the word generation, behavior of the website or the
+ looks). Give each one of them a try!
+
+
+
+
+
+
+
+ custom layoutfluid
+
+
+
+ Select which layouts you want the layoutfluid funbox to cycle
+ through.
+
+
+
+
+
+
+
+
+
+ polyglot languages
+
+
+
+ Select which languages you want the polyglot funbox to use.
+
+
+
+
+
+
-
-
-
-
- british english
-
-
-
- When enabled, the website will use the British spelling instead of
- American. Note that this might not replace all words correctly. If you
- find any issues, please let us know.
-
-
-
-
-
-
-
-
-
- language
-
-
-
Change in which language you want to type.
-
-
-
-
-
-
-
- funbox
-
-
-
- These are special modes that change the website in some special way (by
- altering the word generation, behavior of the website or the looks).
- Give each one of them a try!
-
-
-
-
-
-
-
- custom layoutfluid
-
-
-
- Select which layouts you want the layoutfluid funbox to cycle through.
-
-
-
-
-
-
-
-
-
- polyglot languages
-
-
-
- Select which languages you want the polyglot funbox to use.
-
-
-
-
-
-
-
-
-
-
-
-
- freedom mode
-
-
-
- Allows you to delete any word, even if it was typed correctly.
-
-
-
-
-
-
-
-
-
- strict space
-
-
-
- Pressing space at the beginning of a word will insert a space character
- when this mode is enabled.
-
-
-
-
-
-
-
-
-
- opposite shift mode
-
-
-
- This mode will force you to use opposite
- shift
- keys for shifting. Using an incorrect one will count as an error. This
- feature ignores keys in locations
- B
- ,
- Y
- , and
- ^
- because many people use the other hand for those keys. If you're using
- external software to emulate your layout (including QMK), you should use
- the "keymap" mode - the standard "on" will not work. This will enforce
- opposite shift based on the "keymap layout" setting.
-
-
-
-
-
-
-
-
-
-
- stop on error
-
-
-
- Letter mode will stop input when pressing any incorrect letters. Word
- mode will not allow you to continue to the next word until you correct
- all mistakes.
-
-
-
-
-
-
-
-
-
-
- confidence mode
-
-
-
- When enabled, you will not be able to go back to previous words to fix
- mistakes. When turned up to the max, you won't be able to backspace at
- all.
-
-
-
+
+
+
+
+
+ freedom mode
+
+
+
+ Allows you to delete any word, even if it was typed correctly.
+
+
+
+
+
+
+
+
+
+ strict space
+
+
+
+ Pressing space at the beginning of a word will insert a space
+ character when this mode is enabled.
+
+
+
+
+
+
+
+
+
+ opposite shift mode
+
+
+
+ This mode will force you to use opposite
+ shift
+ keys for shifting. Using an incorrect one will count as an error.
+ This feature ignores keys in locations
+ B
+ ,
+ Y
+ , and
+ ^
+ because many people use the other hand for those keys. If you're
+ using external software to emulate your layout (including QMK), you
+ should use the "keymap" mode - the standard "on" will not work. This
+ will enforce opposite shift based on the "keymap layout" setting.
+
+
+
+
+
+
+
+
+
+
+ stop on error
+
+
+
+ Letter mode will stop input when pressing any incorrect letters.
+ Word mode will not allow you to continue to the next word until you
+ correct all mistakes.
+
+
+
+
+
+
+
+
+
+
+ confidence mode
+
+
+
+ When enabled, you will not be able to go back to previous words to
+ fix mistakes. When turned up to the max, you won't be able to
+ backspace at all.
+
+
+
-
-
-
-
-
-
-
- quick end
-
-
-
- This only applies to the words mode - when enabled, the test will end as
- soon as the last word has been typed, even if it's incorrect. When
- disabled, you need to manually confirm the last incorrect entry with a
- space.
-
-
-
-
-
-
-
-
-
- indicate typos
-
-
-
- Shows typos that you've made. "Below" shows what you typed below the
- letters, "replace" will replace the letters with the ones you typed and
- "both" will do the same as replace and below, but it will show the
- correct letters below your mistakes.
-
-
-
-
-
-
-
-
-
-
-
- hide extra letters
-
-
-
- Hides extra letters. This will completely avoid words jumping lines (due
- to changing width), but might feel a bit confusing when you press a key
- and nothing happens.
-
-
-
-
-
-
-
-
-
- composition display
-
-
-
- Change how composition is displayed. "off" will just underline the
- letter if composition is active. "below" will show the composed
- character below the test. "replace" will replace the letter in the test
- with the composed character.
-
-
-
-
-
-
-
-
-
-
- lazy mode
-
-
-
- Replaces accents / diacritics / special characters with their normal
- letter equivalents.
-
-
-
-
-
-
-
-
-
- layout emulator
-
-
-
- With this setting you can emulate other layouts. This setting is best
- kept off, as it can break things like dead keys and alt layers.
-
-
-
-
-
-
-
-
- code unindent on backspace
-
+
+
+
+
+
+
+
+ quick end
+
+
+
+ This only applies to the words mode - when enabled, the test will
+ end as soon as the last word has been typed, even if it's incorrect.
+ When disabled, you need to manually confirm the last incorrect entry
+ with a space.
+
+
+
+
+
+
+
+
+
+ indicate typos
+
+
+
+ Shows typos that you've made. "Below" shows what you typed below the
+ letters, "replace" will replace the letters with the ones you typed
+ and "both" will do the same as replace and below, but it will show
+ the correct letters below your mistakes.
+
+
+
+
+
+
+
+
+
+
+
+ hide extra letters
+
+
+
+ Hides extra letters. This will completely avoid words jumping lines
+ (due to changing width), but might feel a bit confusing when you
+ press a key and nothing happens.
+
+
+
+
+
+
+
+
+
+ composition display
+
+
+
+ Change how composition is displayed. "off" will just underline the
+ letter if composition is active. "below" will show the composed
+ character below the test. "replace" will replace the letter in the
+ test with the composed character.
+
+
+
+
+
+
+
+
+
+
+ lazy mode
+
+
+
+ Replaces accents / diacritics / special characters with their normal
+ letter equivalents.
+
+
+
+
+
+
+
+
+
+ layout emulator
+
+
+
+ With this setting you can emulate other layouts. This setting is
+ best kept off, as it can break things like dead keys and alt layers.
+
+
+
+
+
+
+
+
+ code unindent on backspace
+
+
+
+ Automatically go back to the previous line when deleting line
+ leading tab characters. Only works in code languages.
+
+
+
+
+
+
+
-
- Automatically go back to the previous line when deleting line leading
- tab characters. Only works in code languages.
+
+
+
+
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- sound volume
-
-
-
Change the volume of the sound effects.
-
-
-
100
-
+
+
+
+
+
+ sound volume
+
+
+
Change the volume of the sound effects.
+
+
+
100
+
+
+
+
+
+
+ play sound on click
+
+
+
Plays a short sound when you press a key.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ play sound on error
+
+
+
+ Plays a short sound if you press an incorrect key or press space too
+ early.
+
+
+
+
+
+
+
+
+
+
+
+
+ play time warning
+
+
+
+ Play a short warning sound if you are close to the end of a timed
+ test.
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- play sound on click
-
-
-
Plays a short sound when you press a key.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- play sound on error
-
-
-
- Plays a short sound if you press an incorrect key or press space too
- early.
-
-
-
-
-
-
-
-
-
-
-
-
- play time warning
-
-
-
- Play a short warning sound if you are close to the end of a timed test.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- smooth caret
-
-
-
- The caret will move smoothly between letters and words.
-
-
-
-
-
-
-
-
-
-
-
- caret style
-
-
-
Change the style of the caret during the test.
-
-
-
-
-
-
-
-
-
-
-
- pace caret
-
-
-
- Displays a second caret that moves at constant speed. The 'average'
- option averages the speed of last 10 results. The 'tag pb' option takes
- the highest PB of any active tag. The 'daily' option takes the highest
- speed of the last 24 hours.
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ smooth caret
+
+
+
+ The caret will move smoothly between letters and words.
+
+
+
+
+
+
+
+
+
+
+ caret style
+
+
+
Change the style of the caret during the test.
+
+
+
+
+
+
+
+
+
+
+
+ pace caret
+
+
+
+ Displays a second caret that moves at constant speed. The 'average'
+ option averages the speed of last 10 results. The 'tag pb' option
+ takes the highest PB of any active tag. The 'daily' option takes the
+ highest speed of the last 24 hours.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ repeated pace
+
+
+
+ When repeating a test, a pace caret will automatically be enabled
+ for one test with the speed of your previous test. It does not
+ override the pace caret if it's already enabled.
+
+
+
+
+
+
+
+
+
+ pace caret style
+
+
+
+ Change the style of the pace caret during the test.
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- repeated pace
-
-
-
- When repeating a test, a pace caret will automatically be enabled for
- one test with the speed of your previous test. It does not override the
- pace caret if it's already enabled.
-
-
-
-
-
-
-
-
-
- pace caret style
-
-
-
- Change the style of the pace caret during the test.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- live progress style
-
-
-
- Change the style of the timer/word count during a test. "Flash" styles
- will briefly show the timer in timed modes every 15 seconds.
-
-
-
-
-
-
-
-
-
-
-
-
-
- live speed style
-
-
-
- Change the style of the live speed displayed during the test.
-
-
-
-
-
-
-
-
-
-
- live accuracy style
-
-
-
- Change the style of the live accuracy displayed during the test.
-
-
-
-
-
-
-
-
-
-
- live burst style
-
-
-
- Change the style of the live burst speed displayed during the test.
-
-
-
-
-
-
-
-
-
-
- live stats color
-
-
-
- Change the color of the progress, live speed, accuracy and burst text.
-
-
-
-
-
-
-
-
-
-
-
- live stats opacity
-
-
-
- Change the opacity of the progress, live speed, burst and accuracy text.
-
-
-
-
-
-
-
-
-
-
-
- highlight mode
-
-
-
Change what is highlighted during the test.
-
-
-
-
-
-
-
-
-
-
-
-
- typed effect
-
-
-
Change how typed words are shown.
-
-
-
-
-
-
-
-
-
-
- tape mode
-
-
-
- Only shows one line which scrolls horizontally. Setting this to 'word'
- will make it scroll after every word and 'letter' will scroll after
- every keypress. Works best with smooth line scroll enabled and a
- monospace font.
-
-
-
-
-
-
-
-
-
-
- tape margin
-
-
-
- When in tape mode, set the carets position from the left edge of the
- typing test as a percentage (for example, 50% centers it).
-
-
-
-
+
+
+
+
+
+ live progress style
+
+
+
+ Change the style of the timer/word count during a test. "Flash"
+ styles will briefly show the timer in timed modes every 15 seconds.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ live speed style
+
+
+
+ Change the style of the live speed displayed during the test.
+
+
+
+
+
+
+
+
+
+
+ live accuracy style
+
+
+
+ Change the style of the live accuracy displayed during the test.
+
+
+
+
+
+
+
+
+
+
+ live burst style
+
+
+
+ Change the style of the live burst speed displayed during the test.
+
+
+
+
+
+
+
+
+
+
+ live stats color
+
+
+
+ Change the color of the progress, live speed, accuracy and burst
+ text.
+
+
+
+
+
+
+
+
+
+
+
+ live stats opacity
+
+
+
+ Change the opacity of the progress, live speed, burst and accuracy
+ text.
+
+
+
+
+
+
+
+
+
+
+
+ highlight mode
+
+
+
Change what is highlighted during the test.
+
+
+
+
+
+
+
+
+
+
+
+
+ typed effect
+
+
+
Change how typed words are shown.
+
+
+
+
+
+
+
+
+
+
+ tape mode
+
+
+
+ Only shows one line which scrolls horizontally. Setting this to
+ 'word' will make it scroll after every word and 'letter' will scroll
+ after every keypress. Works best with smooth line scroll enabled and
+ a monospace font.
+
+
+
+
+
+
+
+
+
+
+ tape margin
+
+
+
+ When in tape mode, set the carets position from the left edge of the
+ typing test as a percentage (for example, 50% centers it).
+
+
+
+
+
+
-
-
-
-
-
- smooth line scroll
-
-
-
- When enabled, the line transition will be animated.
-
-
-
-
-
-
-
-
-
- show all lines
-
-
-
- When enabled, the website will show all lines for word, custom and quote
- mode tests - otherwise the lines will be limited to 3, and will
- automatically scroll. Using this could cause the timer text and live
- speed to not be visible.
-
-
-
-
-
-
-
-
-
00
- always show decimal places
-
-
-
- Always shows decimal places for values on the result page, without the
- need to hover over the stats.
-
-
-
-
-
-
-
-
-
- typing speed unit
-
-
-
Display typing speed in the specified unit.
-
-
-
-
-
-
-
-
-
-
- start graphs at zero
-
-
-
- Force graph axis to always start at zero, no matter what the data is.
- Turning this off may exaggerate the value changes.
-
-
-
-
-
-
-
-
-
- max line width
-
-
-
- Change the maximum width of the typing test, measured in characters.
- Setting this to 0 will align the words to the edges of the content area.
-
-
-
-
+
+
+
+ smooth line scroll
+
+
+
+ When enabled, the line transition will be animated.
+
+
+
+
+
-
-
-
-
-
- font size
-
-
-
Change the font size of the test words.
-
-
-
+
+
+
+ show all lines
+
+
+
+ When enabled, the website will show all lines for word, custom and
+ quote mode tests - otherwise the lines will be limited to 3, and
+ will automatically scroll. Using this could cause the timer text and
+ live speed to not be visible.
+
+
+
+
+
-
-
-
-
-
- font family
-
-
-
- Change the font family used by the website. Using a local font will
- override your choice.
-
- Note: Local fonts are not sent to the server and will not persist across
- devices.
-
-
-
-
-
-
-
+
+
+
00
+ always show decimal places
+
+
+
+ Always shows decimal places for values on the result page, without
+ the need to hover over the stats.
+
+
+
+
+
+
+
+
+
+ typing speed unit
+
+
+
Display typing speed in the specified unit.
+
+
+
+
+
+
+
+
+
+
+ start graphs at zero
+
+
+
+ Force graph axis to always start at zero, no matter what the data
+ is. Turning this off may exaggerate the value changes.
+
+
+
+
+
+
+
+
+
+ max line width
+
+
+
+ Change the maximum width of the typing test, measured in characters.
+ Setting this to 0 will align the words to the edges of the content
+ area.
+
+
+
+
+
+
+
+
+
+
+ font size
+
+
+
Change the font size of the test words.
+
+
+
+
+
+
+
+
+
+ font family
+
+
+
+ Change the font family used by the website. Using a local font will
+ override your choice.
+
+ Note: Local fonts are not sent to the server and will not persist
+ across devices.
+
+
+
+
+
+
+
-
-
-
-
- or
-
+
+
+
+
+ or
+
+
+
+
-
-
-
-
-
-
- keymap
-
-
-
- Displays your current layout while taking a test. React shows what you
- pressed and Next shows what you need to press next.
-
-
-
-
-
-
-
-
-
-
-
- keymap layout
-
-
-
Controls which layout is displayed on the keymap.
-
-
-
-
-
-
-
- keymap style
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- keymap legend style
-
-
-
-
-
-
-
-
-
-
-
-
- keymap show top row
-
-
-
-
-
-
-
-
-
-
-
- keymap size
-
-
-
Change the size of the keymap.
-
-
-
1.0
-
+
+
+
+ keymap
+
+
+
+ Displays your current layout while taking a test. React shows what
+ you pressed and Next shows what you need to press next.
+
+
+
+
+
+
+
+
+
+
+
+ keymap layout
+
+
+
+ Controls which layout is displayed on the keymap.
+
+
+
+
+
+
+
+
+ keymap style
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ keymap legend style
+
+
+
+
+
+
+
+
+
+
+
+ keymap show top row
+
+
+
+
+
+
+
+
+
+
+
+ keymap size
+
+
+
Change the size of the keymap.
+
+
+
1.0
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- flip test colors
-
-
-
- By default, typed text is brighter than the future text. When enabled,
- the colors will be flipped and the future text will be brighter than the
- already typed text.
-
-
-
-
-
-
-
-
-
- colorful mode
-
+
+
+
-
- When enabled, the test words will use the main color, instead of the
- text color, making the website more colorful.
+
+
+
-
-
-
-
-
-
-
-
- custom background
-
-
-
- Set an image url or local image to be a custom background image. Local
- image always take priority over the image url. Cover fits the image to
- cover the screen. Contain fits the image to be fully visible. Max fits
- the image corner to corner.
-
-
- Note: The local image is stored in your browser's local storage and will
- not be uploaded to the server. This means that if you clear your
- browser's local storage or use a different browser, the local image will
- be lost.
-
-
-
-
-
-
-
-
-
-
-
- or
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ flip test colors
+
+
+
+ By default, typed text is brighter than the future text. When
+ enabled, the colors will be flipped and the future text will be
+ brighter than the already typed text.
+
+
+
+
+
-
-
-
-
-
- custom background filter
-
-
-
Apply various effects to the custom background.
-
-
-
blur
-
-
-
-
-
brightness
-
-
-
-
-
saturate
-
-
-
-
-
opacity
-
-
+
+
+
+ colorful mode
+
+
+
+ When enabled, the test words will use the main color, instead of the
+ text color, making the website more colorful.
+
+
+
+
+
-
-
-
-
-
- auto switch theme
-
-
-
- Enabling this will automatically switch the theme between light and dark
- depending on the system theme.
-
-
-
-
-
-
-
-
light
-
-
dark
-
-
-
-
-
- randomize theme
-
-
-
- After completing a test, the theme will be set to a random one. The
- random themes are not saved to your config. If set to 'favorite' only
- favorite themes will be randomized. If set to 'light' or 'dark', only
- presets with light or dark background colors will be randomized,
- respectively. If set to 'auto' dark or light themes are used, depending
- on your system theme. If set to 'custom', custom themes will be
- randomized.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- theme
-
-
-
-
-
-
-
+
+
+
+ custom background
+
+
+
+ Set an image url or local image to be a custom background image.
+ Local image always take priority over the image url. Cover fits the
+ image to cover the screen. Contain fits the image to be fully
+ visible. Max fits the image corner to corner.
+
+
+ Note: The local image is stored in your browser's local storage and
+ will not be uploaded to the server. This means that if you clear
+ your browser's local storage or use a different browser, the local
+ image will be lost.
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
+
+
+ or
+
-
-
-
-
-
-
-
+
+
-
-
-
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+ custom background filter
+
+
+
+ Apply various effects to the custom background.
+
+
+
+
blur
+
+
-
-
-
-
-
-
-
+
+
brightness
+
+
-
-
-
-
-
-
-
-
-
-
+
+
saturate
+
+
-
-
-
-
-
-
-
+
+
opacity
+
+
+
+
+
+
+
+ auto switch theme
+
+
+
+ Enabling this will automatically switch the theme between light and
+ dark depending on the system theme.
+
+
+
+
+
+
+
+
light
+
+
dark
+
+
+
+
+
+ randomize theme
+
+
+
+ After completing a test, the theme will be set to a random one. The
+ random themes are not saved to your config. If set to 'favorite'
+ only favorite themes will be randomized. If set to 'light' or
+ 'dark', only presets with light or dark background colors will be
+ randomized, respectively. If set to 'auto' dark or light themes are
+ used, depending on your system theme. If set to 'custom', custom
+ themes will be randomized.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ theme
+
+
+
+
+
+
+
- colorful mode
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ colorful mode
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
- key tips
-
-
-
Shows the keybind tips at the bottom of the page.
-
-
-
-
-
-
-
-
- out of focus warning
-
-
-
- Shows an out of focus reminder after 1 second of being 'out of focus'
- (not being able to type).
-
-
-
-
-
-
-
-
-
- caps lock warning
-
-
-
Displays a warning when caps lock is on.
-
-
-
-
-
-
-
-
- average
-
-
-
- Displays your average speed and/or accuracy over the last 10 tests.
-
-
-
-
-
-
+
+
+
+
+
+ key tips
+
+
+
+ Shows the keybind tips at the bottom of the page.
+
+
+
+
+
+
+
+
+
+ out of focus warning
+
+
+
+ Shows an out of focus reminder after 1 second of being 'out of
+ focus' (not being able to type).
+
+
+
+
+
+
+
+
+
+ caps lock warning
+
+
+
Displays a warning when caps lock is on.
+
+
+
+
+
+
+
+
+ average
+
+
+
+ Displays your average speed and/or accuracy over the last 10 tests.
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
- import/export settings
-
-
-
Import or export the settings as JSON.
-
-
-
-
-
-
-
-
- ads
-
-
-
- You can disable or enable ads at any time. "Result" will show one ad on
- the result page, "on" will add floating vertical banners, and "sellout"
- will add multiple ads on every page.
-
-
- (changes will take effect after a refresh).
-
-
-
-
-
-
-
-
-
-
-
- update cookie preferences
-
-
-
- If you changed your mind about which cookies you consent to, you can
- change your preferences here.
-
-
-
-
-
-
-
-
- animation fps limit
-
-
-
- Limit the maximum fps for animations. Setting this to "native" will run
- the animations as fast as possible (at your monitor's refresh rate).
- Setting this above your monitor's refresh rate will have no effect.
-
-
-
-
-
-
- or
-
-
-
-
-
-
-
-
- reset settings
-
-
-
- Resets settings to the default (but doesn't touch your tags and
- presets).
-
- You can't undo this action!
-
-
-
+
+
+
+
+ or
+
+
+
+
+
+
+
+
+ reset settings
+
+
+
+ Resets settings to the default (but doesn't touch your tags and
+ presets).
+
+ You can't undo this action!
+
+
+
+
+
+
+
+
+ Account settings have moved. You can now access them by hovering
+ over the account button in the top right corner, then clicking
+ "Account settings".
+
+
+
-
-
-
- Account settings have moved. You can now access them by hovering over
- the account button in the top right corner, then clicking "Account
- settings".
-
-
-
diff --git a/frontend/src/ts/anim.ts b/frontend/src/ts/anim.ts
index 48b81f4dd095..0446820a07e1 100644
--- a/frontend/src/ts/anim.ts
+++ b/frontend/src/ts/anim.ts
@@ -1,6 +1,7 @@
import { engine } from "animejs";
import { LocalStorageWithSchema } from "./utils/local-storage-with-schema";
import { z } from "zod";
+import { createSignal } from "solid-js";
export const fpsLimitSchema = z.number().int().min(15).max(1000);
@@ -10,14 +11,19 @@ const fpsLimit = new LocalStorageWithSchema({
fallback: 1000,
});
+const [fpsLimitSignal, setFpsLimitSignal] = createSignal(fpsLimit.get());
+
export function setfpsLimit(fps: number): boolean {
const result = fpsLimit.set(fps);
+ if (result) {
+ setFpsLimitSignal(fps);
+ }
applyEngineSettings();
return result;
}
export function getfpsLimit(): number {
- return fpsLimit.get();
+ return fpsLimitSignal();
}
export function applyEngineSettings(): void {
diff --git a/frontend/src/ts/commandline/util.ts b/frontend/src/ts/commandline/util.ts
index 2bc0451ea613..6f4ef8d74ce9 100644
--- a/frontend/src/ts/commandline/util.ts
+++ b/frontend/src/ts/commandline/util.ts
@@ -11,22 +11,8 @@ import {
} from "./commandline-metadata";
import { Command } from "./types";
import * as ConfigSchemas from "@monkeytype/schemas/configs";
-import { z, ZodSchema, ZodFirstPartySchemaTypes } from "zod";
-
-function getOptions(schema: T): undefined | z.infer[] {
- if (schema instanceof z.ZodLiteral) {
- return [schema.value] as z.infer[];
- } else if (schema instanceof z.ZodEnum) {
- return schema.options as z.infer[];
- } else if (schema instanceof z.ZodBoolean) {
- return [true, false] as z.infer[];
- } else if (schema instanceof z.ZodUnion) {
- return (schema.options as ZodSchema[])
- .flatMap(getOptions)
- .filter((it) => it !== undefined) as z.infer[];
- }
- return undefined;
-}
+import { ZodSchema, ZodFirstPartySchemaTypes } from "zod";
+import { getOptions } from "../utils/zod";
export function buildCommandForConfigKey<
K extends keyof CommandlineConfigMetadataObject,
diff --git a/frontend/src/ts/components/common/AnimatedModal.tsx b/frontend/src/ts/components/common/AnimatedModal.tsx
index df29fe8f7904..92f172a14638 100644
--- a/frontend/src/ts/components/common/AnimatedModal.tsx
+++ b/frontend/src/ts/components/common/AnimatedModal.tsx
@@ -45,9 +45,14 @@ type AnimatedModalProps = ParentProps<{
onBackdropClick?: (e: MouseEvent) => void;
onScroll?: (e: Event) => void;
+ closeOnWrapperClick?: boolean;
+ closeOnEscape?: boolean;
+
title?: string;
modalClass?: string;
+ dialogClass?: string;
wrapperClass?: string;
+ //todo check if wrapper and dialog can be merged into one
}>;
const DEFAULT_ANIMATION_DURATION = 125;
@@ -279,6 +284,7 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
const handleKeyDown = (e: KeyboardEvent): void => {
if (e.key === "Escape" && visibility()) {
+ if (props.closeOnEscape === false) return;
e.preventDefault();
e.stopPropagation();
if (props.onEscape) {
@@ -290,6 +296,7 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
};
const handleBackdropClick = (e: MouseEvent): void => {
+ if (props.closeOnWrapperClick === false) return;
if (e.target === dialogEl()?.native) {
if (props.onBackdropClick) {
props.onBackdropClick(e);
@@ -311,12 +318,17 @@ export function AnimatedModal(props: AnimatedModalProps): JSXElement {
ref={dialogRef}
class={cn(
"fixed top-0 left-0 z-1000 m-0 hidden h-screen max-h-screen w-screen max-w-screen border-none bg-[rgba(0,0,0,0.5)] p-8 backdrop:bg-transparent",
- props.wrapperClass,
+ props.dialogClass,
)}
onKeyDown={handleKeyDown}
onMouseDown={handleBackdropClick}
>
-
+ Account settings have moved. You can now access them by hovering over
+ the account button in the top right corner, then clicking
+ "Account settings".
+
+
+ }
+ />
+ );
+}
diff --git a/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx
new file mode 100644
index 000000000000..d1dc578a0ca4
--- /dev/null
+++ b/frontend/src/ts/components/pages/settings/custom-setting/CustomBackground.tsx
@@ -0,0 +1,203 @@
+import {
+ ConfigSchema,
+ CustomBackgroundSchema,
+} from "@monkeytype/schemas/configs";
+import { createForm } from "@tanstack/solid-form";
+import { createResource, createSignal, JSXElement, For, Show } from "solid-js";
+
+import { configMetadata } from "../../../../config/metadata";
+import { setConfig } from "../../../../config/setters";
+import { getConfig } from "../../../../config/store";
+import { applyCustomBackground } from "../../../../controllers/theme-controller";
+import { showNoticeNotification } from "../../../../states/notifications";
+import FileStorage from "../../../../utils/file-storage";
+import { getOptions } from "../../../../utils/zod";
+import { AnimeShow } from "../../../common/anime";
+import { Button } from "../../../common/Button";
+import { Conditional } from "../../../common/Conditional";
+import { Fa } from "../../../common/Fa";
+import { Separator } from "../../../common/Separator";
+import { InputField } from "../../../ui/form/InputField";
+import { fromSchema } from "../../../ui/form/utils";
+import { Setting } from "../Setting";
+
+export function CustomBackground(): JSXElement {
+ const [showSavedIndicator, setShowSavedIndicator] = createSignal(false);
+
+ const form = createForm(() => ({
+ defaultValues: {
+ customBackground: getConfig.customBackground,
+ },
+ onSubmit: ({ value }) => {
+ const val = value.customBackground;
+ if (val === getConfig.customBackground) return;
+ setShowSavedIndicator(true);
+ setTimeout(() => {
+ setShowSavedIndicator(false);
+ }, 2000);
+ setConfig("customBackground", val);
+ },
+ }));
+
+ const [hasLocalBackground] = createResource(
+ () => FileStorage.track("LocalBackgroundFile"),
+ async () => FileStorage.hasFile("LocalBackgroundFile"),
+ );
+
+ const readFileAsDataURL = async (file: File): Promise => {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onload = () => resolve(reader.result as string);
+ reader.onerror = reject;
+ reader.readAsDataURL(file);
+ });
+ };
+
+ return (
+
+ {configMetadata.customBackground.description}
+
+
+ Note: The local image is stored in your browser's local storage
+ and will not be uploaded to the server. This means that if you clear
+ your browser's local storage or use a different browser, the
+ local image will be lost.
+