1"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[2792],{32006:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>r,contentTitle:()=>l,default:()=>h,frontMatter:()=>o,metadata:()=>a,toc:()=>c});var i=t(85893),s=t(11151);const o={sidebar_position:5},l="Aqua Theme",a={id:"themes/aqua",title:"Aqua Theme",description:"This theme is created by @pride7, featuring beautiful backgrounds made with Typst's visualization capabilities.",source:"@site/docs/themes/aqua.md",sourceDirName:"themes",slug:"/themes/aqua",permalink:"/docs/themes/aqua",draft:!1,unlisted:!1,editUrl:"https://github.com/touying-typ/touying/tree/main/docs/en/themes/aqua.md",tags:[],version:"current",sidebarPosition:5,frontMatter:{sidebar_position:5},sidebar:"tutorialSidebar",previous:{title:"University Theme",permalink:"/docs/themes/university"},next:{title:"Stargazer Theme",permalink:"/docs/themes/stargazer"}},r={},c=[{value:"Initialization",id:"initialization",level:2},{value:"Color Theme",id:"color-theme",level:2},{value:"Slide Function Family",id:"slide-function-family",level:2},{value:"Example",id:"example",level:2}];function d(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",hr:"hr",img:"img",li:"li",p:"p",pre:"pre",ul:"ul",...(0,s.a)(),...e.components};return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"aqua-theme",children:"Aqua Theme"}),"\n",(0,i.jsxs)(n.p,{children:["This theme is created by ",(0,i.jsx)(n.a,{href:"https://github.com/pride7",children:"@pride7"}),", featuring beautiful backgrounds made with Typst's visualization capabilities."]}),"\n",(0,i.jsx)(n.h2,{id:"initialization",children:"Initialization"}),"\n",(0,i.jsx)(n.p,{children:"You can initialize it with the following code:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.aqua: *\n\n#show: aqua-theme.with(\n aspect-ratio: "16-9",\n config-info(\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n ),\n)\n\n#title-slide()\n\n#outline-slide()\n'})}),"\n",(0,i.jsxs)(n.p,{children:["The ",(0,i.jsx)(n.code,{children:"aqua-theme"})," function accepts the following parameters:"]}),"\n",(0,i.jsxs)(n.ul,{children:["\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"aspect-ratio"}),': The aspect ratio of the slides, which can be "16-9" or "4-3", with a default of "16-9".']}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"header"}),": The content displayed in the header of the slides, with a default of ",(0,i.jsx)(n.code,{children:"utils.display-current-heading()"}),". You can also provide a function like ",(0,i.jsx)(n.code,{children:"self => self.info.title"})," to customize the header content."]}),"\n",(0,i.jsxs)(n.li,{children:[(0,i.jsx)(n.code,{children:"footer"}),": The content displayed on the right side of the footer, with a default of ",(0,i.jsx)(n.code,{children:"context utils.slide-counter.display()"}),"."]}),"\n"]}),"\n",(0,i.jsxs)(n.p,{children:["Additionally, the Aqua theme provides a ",(0,i.jsx)(n.code,{children:"#alert[..]"})," function, which you can use with the ",(0,i.jsx)(n.code,{children:"#show strong: alert"})," syntax to emphasize text within your slides."]}),"\n",(0,i.jsx)(n.h2,{id:"color-theme",children:"Color Theme"}),"\n",(0,i.jsx)(n.p,{children:"The Aqua theme uses the following color scheme by default:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'config-colors(\n primary: rgb("#003F88"),\n primary-light: rgb("#2159A5"),\n primary-lightest: rgb("#F2F4F8"),\n neutral-lightest: rgb("#FFFFFF"),\n)\n'})}),"\n",(0,i.jsxs)(n.p,{children:["You can modify this color scheme using the ",(0,i.jsx)(n.code,{children:"config-colors()"})," function to suit your preferences or to match the branding of your presentation."]}),"\n",(0,i.jsx)(n.h2,{id:"slide-function-family",children:"Slide Function Family"}),"\n",(0,i.jsx)(n.p,{children:"Aqua theme offers a series of custom slide functions:"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#title-slide(..args)\n"})}),"\n",(0,i.jsxs)(n.p,{children:[(0,i.jsx)(n.code,{children:"title-slide"})," will read information from ",(0,i.jsx)(n.code,{children:"self.info"})," for display."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#let outline-slide(self: none, enum-args: (:), leading: 50pt)\n"})}),"\n",(0,i.jsx)(n.p,{children:"Display an outline slide."}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#slide(\n repeat: auto,\n setting: body => body,\n composer: cols,\n // Aqua theme\n title: auto,\n)[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["A default ordinary slide function with title and footer, where ",(0,i.jsx)(n.code,{children:"title"})," defaults to the current section title."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#focus-slide[\n ...\n]\n"})}),"\n",(0,i.jsxs)(n.p,{children:["Used to draw the audience's attention. The background color is ",(0,i.jsx)(n.code,{children:"self.colors.primary"}),"."]}),"\n",(0,i.jsx)(n.hr,{}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:"#new-section-sli
1de(title)\n"})}),"\n",(0,i.jsx)(n.p,{children:"Start a new section with the given title."}),"\n",(0,i.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-typst",children:'#import "@preview/touying:0.7.4": *\n#import themes.aqua: *\n\n#show: aqua-theme.with(\n aspect-ratio: "16-9",\n config-info(\n title: [Title],\n subtitle: [Subtitle],\n author: [Authors],\n date: datetime.today(),\n institution: [Institution],\n ),\n)\n\n#title-slide()\n\n#outline-slide()\n\n= The Section\n\n== Slide Title\n\n#lorem(40)\n\n#focus-slide[\n Another variant with primary color in background...\n]\n\n== Summary\n\n#slide(self => [\n #align(center + horizon)[\n #set text(size: 3em, weight: "bold", fill: self.colors.primary)\n THANKS FOR ALL\n ]\n])\n'})}),"\n",(0,i.jsx)(n.img,{alt:"Touying example output",src:t(36269).Z+"",width:"3440",height:"2937"})]})}function h(e={}){const{wrapper:n}={...(0,s.a)(),...e.components};return n?(0,i.jsx)(n,{...e,children:(0,i.jsx)(d,{...e})}):d(e)}},36269:(e,n,t)=>{t.d(n,{Z:()=>i});const i=t.p+"assets/images/bffac717-078d92cad4285d6cf968eca4794e5131.png"},11151:(e,n,t)=>{t.d(n,{Z:()=>a,a:()=>l});var i=t(67294);const s={},o=i.createContext(s);function l(e){const n=i.useContext(o);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:l(e.components),i.createElement(o.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.