SORRY I SHOULD HAVE BEEN SPECIFIC
the settings option, where you change the font size and the theme! Howwww
I'M NOT SURE HOW MUCH DETAIL YOU WANT BUT I'LL TRY
How to change themes in Twine — a ✨ tutorial ✨:
Edit: Realised you also asked for font-size and font-family? Added that to the bottom ✌🏼
You can find everything related Settings in Twine here, but I'll try to explain as much as I can
SO first you'll have to navigate into the Story JavaScript:
This is the code we'll use (I'll try to explain line by line what the code does):
Line 1. - We're creating a variable that's going to hold the names of the different themes how we want them displayed in Settings. Mine are Light Theme, Dark Theme and Black Theme (or Nyx' Theme)
Line 3. - We're creating a variable to set the theme when the user selects an option. This variable will hold a function to do the work for us.
Line 4. - We're creating a variable that selects the <html> tag in your html file, which is the element that will hold the different classes to style the theme
This is the normal <html> tag:
This is how the <html> tag will look when the "dark" theme is selected:
Line 5 and 6. - We're making sure that whenever the "default" theme is set, which in this case is the Light Theme, the "dark" theme class and the "black" theme class is removed from the <html> tag
Line 8. - We're using the JavaScript switch statement to switch between themes, you don't really need to understand how this works, just copy it, but make sure that each case is called the corresponding name as the name in line 1
Line 10 - We're telling the <html> tag to add a class called "dark" if the Dark Theme is selected
Line 14 - We're telling the <html> tag to add a class called "black" if the Black Theme is selected
Line 19 - We're using Twine's Setting.addList() method to make these settings appear in the Settings dialog box,
Line 20 - We're typing in what we want the label to be for this particular setting
Line 21 - We're telling Twine what list of theme names to display in the dropdown in Settings, which is the list we stored in the variable settingThemeNames on line 1
Line 22 and 23 - We're telling Twine what function to run when something is changed, which is the function we stored in the variable setTheme on line 3
-
Now all you have to do is change the CSS for the respective themes by using html.dark for the "dark theme" for every element you want to change in the Dark Theme, and html.black for every element you want to change in the Black Theme:
In the above example I've changed the font colour of every h1 heading in the "dark" theme to brown and every h1 heading in the "black" theme to black. These will override the styles you have for your default <html> tag
-
How to do font-family and font-size settings:
Basically the same thing, except this time with fonts!
The only real difference here, as you can see above, is the name of the variables, ie. settingFontFamily to set the names you want to display in your Settings dropdown. setFont to hold the function.
On line 29 we create a variable called passages that selects the <div id=“passages”> element in your html, which is the one that holds all your passages (obviously):
Then we do the exact same thing as before with the switch statement, except on line 32 and 37 we use the passages variable to change the inline fontFamily style of the <div id=“passages”> element to whichever font we want to use.
In the above photo you can see that the inline style is currently set to ‘Poppins’, sans-serif
Then we do the same as before with the Setting.addList() method, except this time with the corresponding info.
-
With font-size it’s basically the same again, except this time with font-size:
Only difference here is that we have more cases under the switch statement. We’re still using the same passages variable to target the same <div id=“passages”> element, but this time we’re changing the inline font-size style to different pixels (you can use other units as well, like rem, em etc.)
And... I think that's it! Let me know if you have more questions or if something was unclear ✨
Hope that helps ✨🤎