to avoid content overflowing
24 | this.el.style.overflow = "hidden";
25 | // Check if the element is being closed or is already closed
26 | if (this.isClosing || !this.el.open) {
27 | this.open();
28 | // Check if the element is being openned or is already open
29 | } else if (this.isExpanding || this.el.open) {
30 | this.shrink();
31 | }
32 | }
33 |
34 | shrink() {
35 | // Set the element as "being closed"
36 | this.isClosing = true;
37 | // Store the current height of the element
38 | const startHeight = `${this.el.offsetHeight}px`;
39 | // Calculate the height of the summary
40 | const endHeight = `${this.summary.offsetHeight}px`;
41 | // If there is already an animation running
42 | if (this.animation) {
43 | // Cancel the current animation
44 | this.animation.cancel();
45 | }
46 | // Start a WAAPI animation
47 | this.animation = this.el.animate(
48 | {
49 | // Set the keyframes from the startHeight to endHeight
50 | height: [startHeight, endHeight],
51 | },
52 | {
53 | duration: 400,
54 | easing: "ease-out",
55 | }
56 | );
57 | // When the animation is complete, call onAnimationFinish()
58 | this.animation.onfinish = () => this.onAnimationFinish(false);
59 | // If the animation is cancelled, isClosing variable is set to false
60 | this.animation.oncancel = () => (this.isClosing = false);
61 | }
62 |
63 | open() {
64 | // Apply a fixed height on the element
65 | this.el.style.height = `${this.el.offsetHeight}px`;
66 | // Force the [open] attribute on the details element
67 | this.el.open = true;
68 | // Wait for the next frame to call the expand function
69 | window.requestAnimationFrame(() => this.expand());
70 | }
71 |
72 | expand() {
73 | // Set the element as "being expanding"
74 | this.isExpanding = true;
75 | // Get the current fixed height of the element
76 | const startHeight = `${this.el.offsetHeight}px`;
77 | // Calculate the open height of the element (summary height + content height)
78 | const endHeight = `${this.summary.offsetHeight + this.content.offsetHeight}px`;
79 | // If there is already an animation running
80 | if (this.animation) {
81 | // Cancel the current animation
82 | this.animation.cancel();
83 | }
84 | // Start a WAAPI animation
85 | this.animation = this.el.animate(
86 | {
87 | // Set the keyframes from the startHeight to endHeight
88 | height: [startHeight, endHeight],
89 | },
90 | {
91 | duration: 400,
92 | easing: "ease-out",
93 | }
94 | );
95 | // When the animation is complete, call onAnimationFinish()
96 | this.animation.onfinish = () => this.onAnimationFinish(true);
97 | // If the animation is cancelled, isExpanding variable is set to false
98 | this.animation.oncancel = () => (this.isExpanding = false);
99 | }
100 |
101 | onAnimationFinish(open) {
102 | // Set the open attribute based on the parameter
103 | this.el.open = open;
104 | // Clear the stored animation
105 | this.animation = null;
106 | // Reset isClosing & isExpanding
107 | this.isClosing = false;
108 | this.isExpanding = false;
109 | // Remove the overflow hidden and the fixed height
110 | this.el.style.height = this.el.style.overflow = "";
111 | }
112 | }
113 |
114 | document.querySelectorAll("details").forEach((el) => {
115 | new Accordion(el);
116 | });
117 |
--------------------------------------------------------------------------------
/src/js/main.js:
--------------------------------------------------------------------------------
1 | let formatter = {
2 | // prettier-ignore
3 | fonts: {
4 | normal: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}~",
5 | sans: "\"\\ !#$%&'()*+,-./𝟢𝟣𝟤𝟥𝟦𝟧𝟨𝟩𝟪𝟫:;<=>?@𝖠𝖡𝖢𝖣𝖤𝖥𝖦𝖧𝖨𝖩𝖪𝖫𝖬𝖭𝖮𝖯𝖰𝖱𝖲𝖳𝖴𝖵𝖶𝖷𝖸𝖹[]^_`𝖺𝖻𝖼𝖽𝖾𝖿𝗀𝗁𝗂𝗃𝗄𝗅𝗆𝗇𝗈𝗉𝗊𝗋𝗌𝗍𝗎𝗏𝗐𝗑𝗒𝗓{|}~",
6 | sansBold: "\"\\ !#$%&'()*+,-./𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵:;<=>?@𝗔𝗕𝗖𝗗𝗘𝗙𝗚𝗛𝗜𝗝𝗞𝗟𝗠𝗡𝗢𝗣𝗤𝗥𝗦𝗧𝗨𝗩𝗪𝗫𝗬𝗭[]^_`𝗮𝗯𝗰𝗱𝗲𝗳𝗴𝗵𝗶𝗷𝗸𝗹𝗺𝗻𝗼𝗽𝗾𝗿𝘀𝘁𝘂𝘃𝘄𝘅𝘆𝘇{|}~",
7 | sansItalic: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@𝘈𝘉𝘊𝘋𝘌𝘍𝘎𝘏𝘐𝘑𝘒𝘓𝘔𝘕𝘖𝘗𝘘𝘙𝘚𝘛𝘜𝘝𝘞𝘟𝘠𝘡[]^_`𝘢𝘣𝘤𝘥𝘦𝘧𝘨𝘩𝘪𝘫𝘬𝘭𝘮𝘯𝘰𝘱𝘲𝘳𝘴𝘵𝘶𝘷𝘸𝘹𝘺𝘻{|}~",
8 | sansBoldItalic: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@𝘼𝘽𝘾𝘿𝙀𝙁𝙂𝙃𝙄𝙅𝙆𝙇𝙈𝙉𝙊𝙋𝙌𝙍𝙎𝙏𝙐𝙑𝙒𝙓𝙔𝙕[]^_`𝙖𝙗𝙘𝙙𝙚𝙛𝙜𝙝𝙞𝙟𝙠𝙡𝙢𝙣𝙤𝙥𝙦𝙧𝙨𝙩𝙪𝙫𝙬𝙭𝙮𝙯{|}~",
9 | monospace: "\"\\ !#$%&'()*+,-./𝟶𝟷𝟸𝟹𝟺𝟻𝟼𝟽𝟾𝟿:;<=>?@𝙰𝙱𝙲𝙳𝙴𝙵𝙶𝙷𝙸𝙹𝙺𝙻𝙼𝙽𝙾𝙿𝚀𝚁𝚂𝚃𝚄𝚅𝚆𝚇𝚈𝚉[]^_`𝚊𝚋𝚌𝚍𝚎𝚏𝚐𝚑𝚒𝚓𝚔𝚕𝚖𝚗𝚘𝚙𝚚𝚛𝚜𝚝𝚞𝚟𝚠𝚡𝚢𝚣{|}~",
10 | fullwidth: "\"＼ ！＃＄％＆＇（）＊＋，－．／０１２３４５６７８９：；<＝>？＠ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ［］＾＿｀ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ｛｜｝～",
11 | fraktur: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@𝔄𝔅ℭ𝔇𝔈𝔉𝔊ℌℑ𝔍𝔎𝔏𝔐𝔑𝔒𝔓𝔔ℜ𝔖𝔗𝔘𝔙𝔚𝔛𝔜ℨ[]^_`𝔞𝔟𝔠𝔡𝔢𝔣𝔤𝔥𝔦𝔧𝔨𝔩𝔪𝔫𝔬𝔭𝔮𝔯𝔰𝔱𝔲𝔳𝔴𝔵𝔶𝔷{|}~",
12 | boldFraktur: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@𝕬𝕭𝕮𝕯𝕰𝕱𝕲𝕳𝕴𝕵𝕶𝕷𝕸𝕹𝕺𝕻𝕼𝕽𝕾𝕿𝖀𝖁𝖂𝖃𝖄𝖅[]^_`𝖆𝖇𝖈𝖉𝖊𝖋𝖌𝖍𝖎𝖏𝖐𝖑𝖒𝖓𝖔𝖕𝖖𝖗𝖘𝖙𝖚𝖛𝖜𝖝𝖞𝖟{|}~",
13 | serifBold: "\"\\ !#$%&'()*+,-./𝟎𝟏𝟐𝟑𝟒𝟓𝟔𝟕𝟖𝟗:;<=>?@𝐀𝐁𝐂𝐃𝐄𝐅𝐆𝐇𝐈𝐉𝐊𝐋𝐌𝐍𝐎𝐏𝐐𝐑𝐒𝐓𝐔𝐕𝐖𝐗𝐘𝐙[]^_`𝐚𝐛𝐜𝐝𝐞𝐟𝐠𝐡𝐢𝐣𝐤𝐥𝐦𝐧𝐨𝐩𝐪𝐫𝐬𝐭𝐮𝐯𝐰𝐱𝐲𝐳{|}~",
14 | serifItalic: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@𝐴𝐵𝐶𝐷𝐸𝐹𝐺𝐻𝐼𝐽𝐾𝐿𝑀𝑁𝑂𝑃𝑄𝑅𝑆𝑇𝑈𝑉𝑊𝑋𝑌𝑍[]^_`𝑎𝑏𝑐𝑑𝑒𝑓𝑔ℎ𝑖𝑗𝑘𝑙𝑚𝑛𝑜𝑝𝑞𝑟𝑠𝑡𝑢𝑣𝑤𝑥𝑦𝑧{|}~",
15 | serifBoldItalic: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@𝑨𝑩𝑪𝑫𝑬𝑭𝑮𝑯𝑰𝑱𝑲𝑳𝑴𝑵𝑶𝑷𝑸𝑹𝑺𝑻𝑼𝑽𝑾𝑿𝒀𝒁[]^_`𝒂𝒃𝒄𝒅𝒆𝒇𝒈𝒉𝒊𝒋𝒌𝒍𝒎𝒏𝒐𝒑𝒒𝒓𝒔𝒕𝒖𝒗𝒘𝒙𝒚𝒛{|}~",
16 | doubleStruck: "\"\\ !#$%&'()*+,-./𝟘𝟙𝟚𝟛𝟜𝟝𝟞𝟟𝟠𝟡:;<=>?@𝔸𝔹ℂ𝔻𝔼𝔽𝔾ℍ𝕀𝕁𝕂𝕃𝕄ℕ𝕆ℙℚℝ𝕊𝕋𝕌𝕍𝕎𝕏𝕐ℤ[]^_`𝕒𝕓𝕔𝕕𝕖𝕗𝕘𝕙𝕚𝕛𝕜𝕝𝕞𝕟𝕠𝕡𝕢𝕣𝕤𝕥𝕦𝕧𝕨𝕩𝕪𝕫{|}~",
17 | script: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@𝒜ℬ𝒞𝒟ℰℱ𝒢ℋℐ𝒥𝒦ℒℳ𝒩𝒪𝒫𝒬ℛ𝒮𝒯𝒰𝒱𝒲𝒳𝒴𝒵[]^_`𝒶𝒷𝒸𝒹ℯ𝒻ℊ𝒽𝒾𝒿𝓀𝓁𝓂𝓃ℴ𝓅𝓆𝓇𝓈𝓉𝓊𝓋𝓌𝓍𝓎𝓏{|}~",
18 | boldScript: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@𝓐𝓑𝓒𝓓𝓔𝓕𝓖𝓗𝓘𝓙𝓚𝓛𝓜𝓝𝓞𝓟𝓠𝓡𝓢𝓣𝓤𝓥𝓦𝓧𝓨𝓩[]^_`𝓪𝓫𝓬𝓭𝓮𝓯𝓰𝓱𝓲𝓳𝓴𝓵𝓶𝓷𝓸𝓹𝓺𝓻𝓼𝓽𝓾𝓿𝔀𝔁𝔂𝔃{|}~",
19 | circled: "\"⦸ !#$%&'()⊛⊕,⊖⨀⊘⓪①②③④⑤⑥⑦⑧⑨:;⧀⊜⧁?@ⒶⒷⒸⒹⒺⒻⒼⒽⒾⒿⓀⓁⓂⓃⓄⓅⓆⓇⓈⓉⓊⓋⓌⓍⓎⓏ[]^_`ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢⓣⓤⓥⓦⓧⓨⓩ{⦶}~",
20 | circledNegative: "\"\\ !#$%&'()*+,-./⓿❶❷❸❹❺❻❼❽❾:;<=>?@🅐🅑🅒🅓🅔🅕🅖🅗🅘🅙🅚🅛🅜🅝🅞🅟🅠🅡🅢🅣🅤🅥🅦🅧🅨🅩[]^_`🅐🅑🅒🅓🅔🅕🅖🅗🅘🅙🅚🅛🅜🅝🅞🅟🅠🅡🅢🅣🅤🅥🅦🅧🅨🅩{|}~",
21 | squared: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@🄰🄱🄲🄳🄴🄵🄶🄷🄸🄹🄺🄻🄼🄽🄾🄿🅀🅁🅂🅃🅄🅅🅆🅇🅈🅉[]^_`🄰🄱🄲🄳🄴🄵🄶🄷🄸🄹🄺🄻🄼🄽🄾🄿🅀🅁🅂🅃🅄🅅🅆🅇🅈🅉{|}~",
22 | squaredNegative: "\"⧅ !#$%&'()⧆⊞,⊟⊡⧄0123456789:;<=>?@🅰🅱🅲🅳🅴🅵🅶🅷🅸🅹🅺🅻🅼🅽🅾🅿🆀🆁🆂🆃🆄🆅🆆🆇🆈🆉[]^_`🅰🅱🅲🅳🅴🅵🅶🅷🅸🅹🅺🅻🅼🅽🅾🅿🆀🆁🆂🆃🆄🆅🆆🆇🆈🆉{|}~",
23 | parenthesized: "\"\\ !#$%&'()*+,-./0⑴⑵⑶⑷⑸⑹⑺⑻⑼:;<=>?@⒜⒝⒞⒟⒠⒡⒢⒣⒤⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵[]^_`⒜⒝⒞⒟⒠⒡⒢⒣⒤⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮⒯⒰⒱⒲⒳⒴⒵{|}~",
24 | smallCaps: "\"\\ !#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`ᴀʙᴄᴅᴇꜰɢʜɪᴊᴋʟᴍɴᴏᴩꞯʀꜱᴛᴜᴠᴡxʏᴢ{|}~",
25 | subscript: "\"\\ !#$%&'₍₎*₊,₋./₀₁₂₃₄₅₆₇₈₉:;<₌>?@ᴀʙᴄᴅᴇꜰɢʜɪᴊᴋʟᴍɴᴏᴘ🇶ʀꜱᴛᴜᴠᴡxʏᴢ[]^_`ₐᵦ𝒸𝒹ₑ𝒻𝓰ₕᵢⱼₖₗₘₙₒₚᵩᵣₛₜᵤᵥ𝓌ₓᵧ𝓏{|}~",
26 | superscript: "\"\\ !#$%&'⁽⁾*⁺,⁻./⁰¹²³⁴⁵⁶⁷⁸⁹:;<⁼>?@ᴬᴮᶜᴰᴱᶠᴳᴴᴵᴶᴷᴸᴹᴺᴼᴾᵠᴿˢᵀᵁⱽᵂˣʸᶻ[]^_`ᵃᵇᶜᵈᵉᶠᵍʰⁱʲᵏˡᵐⁿᵒᵖᵠʳˢᵗᵘᵛʷˣʸᶻ{|}~",
27 | inverted: "„\\ ¡#$%⅋,)(*+‘-˙/0ƖՇƐᔭϛ9𝘓86:;<=>¿@∀ꓭↃꓷƎℲ⅁HIſꓘ⅂WNOԀῸꓤS⊥∩ꓥMX⅄Z][^‾`ɐqɔpǝɟƃɥıɾʞןɯuodbɹsʇnʌʍxʎz}|{~",
28 | mirrored: "\"/ !#$%&')(*+,-.\\0߁ςƐ߂टმ٢8୧:;<=>⸮@AꓭↃꓷƎꟻӘHIႱꓘ⅃MИOꟼϘЯꙄTUVWXYZ][^_`ɒdↄbɘʇϱʜiįʞlmᴎoqpᴙꙅɈυvwxγz}|{~",
29 | rotatedLeft: "=/ !#$%&-⏝⏜*+`ǀ∙\\ⴰ↽വ𝈐ፓහமΓꝏᓂ⠒;˅𝄥∧ᣇ@ᗉߘ𝈱⌓ш𝈯ᘎ⌶𝄩⥟𝈎⨼∑Zⴰᓇⵚᓚᔕ⊢⊃𝈷ᕒ×⤚𝇙⎵⎴‹|`ơᓄ𝈱ᓀш𝈯თ𝈦𝄩ᓜ𝈎⨼ᗴ⊂ⴰᓇᓂᓚᔕ𝀏⊃𝈷З×⤚𝇙⏟_⏞ಽ",
30 | rotatedRight: "=/ !#$%&-⏜⏝*+`ǀ∙\\ⴰ⇀ᘚω𝈦හの⨼ꝏᓄ⠒;∧𝄥˅?@ᗆϖᴒᗜጠ╖ᘏ⌶𝄩ᓚ⌤⌐ᕒZⴰᓀᓄᓓᔕ⊣⊂<ᓬ×⤙𝇙⎴⎵›|`⌕ᓂᴒ௨ጠ╖மፓ𝄩ᓚ⌤⌐ᴟᴝⴰᓀᓄᓓᔕ𝀏⊂<ᓬ×⤙𝇙⏞_⏟ಽ",
31 | },
32 |
33 | // initialize formatter with CodeMirror
34 | init: function (textarea) {
35 | // no code highlighting and wrap long lines
36 | this.CodeMirror = CodeMirror.fromTextArea(textarea, {
37 | mode: null,
38 | lineWrapping: true,
39 | });
40 |
41 | // list of font characters for checking if character is formatted
42 | this.allCharacters = new Set(Object.values(this.fonts).join(""));
43 |
44 | // mapping functions
45 | const bold = () => this.formatSelections("sansBold");
46 | const italic = () => this.formatSelections("sansItalic");
47 | const monospace = () => this.formatSelections("monospace");
48 | const strikethrough = () =>
49 | this.formatSelections("", {
50 | append: "̶",
51 | });
52 | const underline = () =>
53 | this.formatSelections("", {
54 | append: "͟",
55 | });
56 | const superscript = () => this.formatSelections("superscript");
57 | const subscript = () => this.formatSelections("subscript");
58 |
59 | // add keymaps
60 | this.CodeMirror.setOption("extraKeys", {
61 | "Ctrl-B": bold,
62 | "Ctrl-I": italic,
63 | "Ctrl-M": monospace,
64 | "Ctrl-U": underline,
65 | "Alt-K": strikethrough,
66 | "Shift-Alt-5": strikethrough,
67 | "Shift-Ctrl-=": superscript,
68 | "Ctrl-.": superscript,
69 | "Ctrl-=": subscript,
70 | "Ctrl-,": subscript,
71 | });
72 | },
73 |
74 | // check if text is already formatted with a certain font
75 | alreadyFormatted: function (text, font) {
76 | const fontCharacters = new Set(this.fonts[font]);
77 | // flag as already formatted if all characters are in font or not in any other font
78 | return Array.from(text).every((char) => fontCharacters.has(char) || !this.allCharacters.has(char));
79 | },
80 |
81 | // check if text is already formatted with a certain font
82 | alreadyAppended: function (text, append) {
83 | // check if at least half the characters are the append character
84 | return Array.from(text).filter((char) => char == append).length >= text.length / 2;
85 | },
86 |
87 | // format text into selected font
88 | formatText: function (text, font, options) {
89 | // set font to normal if already formatted with selected font
90 | if (this.fonts[font] && this.alreadyFormatted(text, font)) {
91 | font = "normal";
92 | }
93 | // remove and don't append if character is already appended
94 | if (options?.append) {
95 | options.remove = options.append;
96 | options.append = !this.alreadyAppended(text, options.append) ? options.append : "";
97 | }
98 | // Array.from() splits the string by symbol and not by code points
99 | let newText = Array.from(text);
100 | // exchange font symbols
101 | if (this.fonts[font]) {
102 | const targetFont = Array.from(this.fonts[font]);
103 | const charLists = Object.values(this.fonts);
104 | // map characters to new font
105 | newText = newText.map((char) => {
106 | let index;
107 | // find the index of the character in some font
108 | const found = charLists.some((charList) => {
109 | index = Array.from(charList).indexOf(char);
110 | return index > -1;
111 | });
112 | // if found, replace with the corresponding character in the target font
113 | // if not found, keep the character the same
114 | return found ? targetFont[index] : char;
115 | });
116 | }
117 | // reverse text if reverse option is set
118 | newText = options?.reverse ? newText.reverse() : newText;
119 | // remove appended symbol of specific type from the end
120 | newText = options?.remove
121 | ? newText.map((char) => char.replace(new RegExp(options.remove + "$", "u"), ""))
122 | : newText;
123 | // append symbol (underline, strikethrough, etc.) to end of each character if append is set
124 | newText = options?.append ? newText.map((char) => char + options.append) : newText;
125 | // remove appended symbols (underline, strikethrough, etc.) if using eraser
126 | // \u035f = Underline, \u0333 = Double Underline, \u0335 = Short Strikethrough \u0336 = Strikethrough
127 | newText = options?.clear ? newText.map((char) => char.replace(/\u035f|\u0333|\u0335|\u0336/gu, "")) : newText;
128 | // set textarea content and select text around the replacement
129 | return newText.join("");
130 | },
131 |
132 | // format selected text
133 | formatSelections: function (font, options) {
134 | // for each selection (there can be multiple), format the text
135 | const newTexts = this.CodeMirror.getSelections().map((selection) => this.formatText(selection, font, options));
136 | // replace all selections with replacements
137 | this.CodeMirror.replaceSelections(newTexts, "around");
138 | },
139 |
140 | // open twitter with the text value as the post
141 | tweet: function () {
142 | const text = this.CodeMirror.getValue();
143 | const encoded = encodeURIComponent(text);
144 | const twitterUrl = `https://twitter.com/intent/tweet?text=${encoded}`;
145 | const win = window.open(twitterUrl, "_blank");
146 | win.focus();
147 | },
148 |
149 | // copy the text to the clipboard
150 | copy: function (el) {
151 | // create dummy textarea with text content
152 | const textarea = document.createElement("textarea");
153 | textarea.value = this.CodeMirror.getValue();
154 | document.body.appendChild(textarea);
155 | // select all
156 | textarea.select();
157 | textarea.setSelectionRange(0, 99999);
158 | // copy
159 | document.execCommand("copy");
160 | // remove textarea
161 | textarea.parentElement.removeChild(textarea);
162 | // set tooltip text
163 | el.title = "Copied!";
164 | },
165 | };
166 |
167 | let tooltip = {
168 | // put the original title back (eg. "Copied!" => "Copy to clipboard")
169 | resetTooltip: function (el) {
170 | el.title = el.dataset.originalTitle;
171 | },
172 | };
173 |
174 | // when the page loads
175 | window.addEventListener(
176 | "load",
177 | function () {
178 | // textarea for initializing CodeMirror
179 | const textarea = document.querySelector("textarea");
180 | // initialize formatter
181 | formatter.init(textarea);
182 | // add click event listeners to format buttons
183 | document.querySelectorAll(".control-btns button").forEach(function (btn) {
184 | btn.addEventListener(
185 | "click",
186 | function () {
187 | // format highlighted text into selected font
188 | formatter.formatSelections(this.className, { ...this.dataset });
189 | },
190 | false
191 | );
192 | });
193 | // set dark mode on preference
194 | if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
195 | document.body.setAttribute("data-theme", "dark");
196 | }
197 | },
198 | false
199 | );
200 |
--------------------------------------------------------------------------------
12 |