26 lines
No EOL
14 KiB
HTML
26 lines
No EOL
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Themes | Profectus</title>
|
|
<meta name="description" content="A game engine that grows with you.">
|
|
<link rel="stylesheet" href="/assets/style.c74ed65d.css">
|
|
<link rel="modulepreload" href="/assets/app.1f0d41ed.js">
|
|
<link rel="modulepreload" href="/assets/guide_themes.md.f41015ce.lean.js">
|
|
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
|
<link rel="manifest" href="/site.webmanifest">
|
|
<meta name="twitter:title" content="Themes | Profectus">
|
|
<meta property="og:title" content="Themes | Profectus">
|
|
</head>
|
|
<body>
|
|
<div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-40587210><div class="sidebar-button" data-v-40587210><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/" aria-label="Profectus, back to home" data-v-40587210 data-v-016a8bd8><!----> Profectus</a><div class="flex-grow" data-v-40587210></div><div class="nav" data-v-40587210><nav class="nav-links" data-v-40587210 data-v-35b91e7e><!--[--><div class="item" data-v-35b91e7e><div class="nav-link" data-v-35b91e7e data-v-49fe041d><a class="item active" href="/guide/" data-v-49fe041d>Guide <!----></a></div></div><div class="item" data-v-35b91e7e><div class="nav-link" data-v-35b91e7e data-v-49fe041d><a class="item" href="/api/" data-v-49fe041d>API <!----></a></div></div><div class="item" data-v-35b91e7e><div class="nav-link" data-v-35b91e7e data-v-49fe041d><a class="item isExternal" href="https://forums.moddingtree.com" target="_blank" rel="noopener noreferrer" data-v-49fe041d>Forums <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-49fe041d><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-35b91e7e><div class="nav-link" data-v-35b91e7e data-v-49fe041d><a class="item isExternal" href="https://discord.gg/F3xveHV" target="_blank" rel="noopener noreferrer" data-v-49fe041d>Discord <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-49fe041d><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-35b91e7e><div class="nav-link" data-v-35b91e7e data-v-49fe041d><a class="item isExternal" href="https://github.com/profectus-engine/Profectus" target="_blank" rel="noopener noreferrer" data-v-49fe041d>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-49fe041d><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-35b91e7e><div class="nav-link" data-v-35b91e7e data-v-49fe041d><a class="item isExternal" href="https://github.com/profectus-engine/profectus-docs" target="_blank" rel="noopener noreferrer" data-v-49fe041d>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-49fe041d><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav></div><!--[--><!--]--></header><aside class="sidebar" data-v-17c48e2f><nav class="nav-links nav" data-v-17c48e2f data-v-35b91e7e><!--[--><div class="item" data-v-35b91e7e><div class="nav-link" data-v-35b91e7e data-v-49fe041d><a class="item active" href="/guide/" data-v-49fe041d>Guide <!----></a></div></div><div class="item" data-v-35b91e7e><div class="nav-link" data-v-35b91e7e data-v-49fe041d><a class="item" href="/api/" data-v-49fe041d>API <!----></a></div></div><div class="item" data-v-35b91e7e><div class="nav-link" data-v-35b91e7e data-v-49fe041d><a class="item isExternal" href="https://forums.moddingtree.com" target="_blank" rel="noopener noreferrer" data-v-49fe041d>Forums <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-49fe041d><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-35b91e7e><div class="nav-link" data-v-35b91e7e data-v-49fe041d><a class="item isExternal" href="https://discord.gg/F3xveHV" target="_blank" rel="noopener noreferrer" data-v-49fe041d>Discord <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-49fe041d><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="item" data-v-35b91e7e><div class="nav-link" data-v-35b91e7e data-v-49fe041d><a class="item isExternal" href="https://github.com/profectus-engine/Profectus" target="_blank" rel="noopener noreferrer" data-v-49fe041d>Github <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-49fe041d><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><!--]--><!----><div class="item" data-v-35b91e7e><div class="nav-link" data-v-35b91e7e data-v-49fe041d><a class="item isExternal" href="https://github.com/profectus-engine/profectus-docs" target="_blank" rel="noopener noreferrer" data-v-49fe041d>GitHub <svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-49fe041d><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div></nav><!--[--><!--]--><ul class="sidebar-links" data-v-17c48e2f><!--[--><li class="sidebar-link"><p class="sidebar-link-item">Getting Started</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/">Introduction</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/setup">Setting Up</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/updating">Updating Profectus</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Creating Your Project</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/project-info">Project Info</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/project-entry">Project Entry</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/layers">Layers</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/guide/changelog">Changelog</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item active" href="/guide/themes">Themes</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#modifying-themes">Modifying Themes</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#theme-options">Theme Options</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#floatingtabs">floatingTabs</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#mergeadjacent">mergeAdjacent</a><!----></li></ul></li></ul></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">Creating Features</p><!----></li><!--]--></ul><!--[--><!--]--></aside><div class="sidebar-mask"></div><main class="page" data-v-8fcebc32><div class="container" data-v-8fcebc32><!--[--><!--]--><div style="position:relative;" class="content" data-v-8fcebc32><div><h1 id="themes" tabindex="-1">Themes <a class="header-anchor" href="#themes" aria-hidden="true">#</a></h1><p>Themes are objects that change how the project's interface should look. This is done mostly by changing the values of various CSS variables. You can look at the existing themes as a reference for the kind of values these CSS variables expect. They can also set various theme options that change how parts of the screen are laid out, which are described <a href="#theme-options">below</a>.</p><p>They are stored in <code>/src/data/themes.ts</code>.</p><h2 id="modifying-themes" tabindex="-1">Modifying Themes <a class="header-anchor" href="#modifying-themes" aria-hidden="true">#</a></h2><p>You can add a theme by adding a property to the <code>Themes</code> enum and then including the theme in the exported object. It's recommended to use the spread operator if you'd like to have a theme look like another, but override specific options / CSS variables.</p><p>Themes added in this way will be automatically included in the Themes dropdown in the Options tab. Removing themes from the enum and exported object will similarly hide them from the dropdown.</p><p>If you'd like to change which theme is the default, you may modify the initial player settings object in the <code>/src/game/settings.ts</code> file. Keep in mind you'll also want to change it in the <code>hardResetSettings</code> function in the same file.</p><h2 id="theme-options" tabindex="-1">Theme Options <a class="header-anchor" href="#theme-options" aria-hidden="true">#</a></h2><h3 id="floatingtabs" tabindex="-1">floatingTabs <a class="header-anchor" href="#floatingtabs" aria-hidden="true">#</a></h3><ul><li>Type: <code>boolean</code></li></ul><p>Toggles whether to display tab buttons in a tab list, similar to how a browser displays tabs; or to display them as floating buttons, similar to how TMT displays buttons.</p><h3 id="mergeadjacent" tabindex="-1">mergeAdjacent <a class="header-anchor" href="#mergeadjacent" aria-hidden="true">#</a></h3><ul><li>Type: <code>boolean</code></li></ul><p>If true, elements in a row or column will have their margins removed and border radiuses set to 0 between elements. This will cause the elements to appear as segments in a single object.</p><p>Currently, this can only merge in a single dimension. Rows of columns or columns of rows will not merge into a single rectangular object.</p></div></div><footer class="page-footer" data-v-8fcebc32 data-v-b65b4b36><div class="edit" data-v-b65b4b36><div class="edit-link" data-v-b65b4b36 data-v-55695e90><a class="link" href="https://github.com/profectus-engine/profectus-docs/edit/main/guide/themes.md" target="_blank" rel="noopener noreferrer" data-v-55695e90>Edit this page on GitHub <svg class="icon outbound icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-55695e90><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div></div><div class="updated" data-v-b65b4b36><!----></div></footer><div class="next-and-prev-link" data-v-8fcebc32 data-v-e65a9748><div class="container" data-v-e65a9748><div class="prev" data-v-e65a9748><a class="link" href="/guide/changelog" data-v-e65a9748><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-prev" data-v-e65a9748><path d="M19,11H7.4l5.3-5.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-7,7c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l7,7c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L7.4,13H19c0.6,0,1-0.4,1-1S19.6,11,19,11z"></path></svg><span class="text" data-v-e65a9748>Changelog</span></a></div><div class="next" data-v-e65a9748><!----></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
|
|
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_changelog.md\":\"fcdbc813\",\"guide_index.md\":\"5e3b8868\",\"guide_layers.md\":\"9b9b2d84\",\"guide_project-entry.md\":\"346c63e7\",\"guide_project-info.md\":\"12d9a8f2\",\"guide_setup.md\":\"6fd69476\",\"guide_themes.md\":\"f41015ce\",\"guide_updating.md\":\"812c69a7\",\"index.md\":\"e75d498a\"}")</script>
|
|
<script type="module" async src="/assets/app.1f0d41ed.js"></script>
|
|
|
|
</body>
|
|
</html> |