diff --git a/frontend/src/style/CSS Themes/Highlighting styles/tokyonight_day.css b/frontend/src/style/CSS Themes/Highlighting styles/tokyonight_day.css new file mode 100644 index 0000000..dc8c445 --- /dev/null +++ b/frontend/src/style/CSS Themes/Highlighting styles/tokyonight_day.css @@ -0,0 +1,26 @@ +/*! +This Highlight theme is based on: +Tokyo Night Day - https://github.com/tokyo-night/tokyo-night-vscode-theme + +Custom Highlight theme made by @MarkoSagadin, 2025 + */ + +:root, .card{ + --background: #e6e7ed; + --foreground: #343b58; + --black: #e6e7ed; + --red: #8c4351; + --green: #33635c; + --yellow: #8f5e15; + --blue: #2959aa; + --magenta: #5a3e8e; + --cyan: #0f4b6e; + --white: #343b58; + --bright_black: #6c6e75; + --bright_white: #343b58; + --constant: #965027; + --string: #385f0d; + --code-text: #343b58; + --code-comment: #6c6e75; + --code-background: #e6e7ed +} diff --git a/frontend/src/style/CSS Themes/Highlighting styles/tokyonight_day_and_storm_tokens.css b/frontend/src/style/CSS Themes/Highlighting styles/tokyonight_day_and_storm_tokens.css new file mode 100644 index 0000000..aef5f93 --- /dev/null +++ b/frontend/src/style/CSS Themes/Highlighting styles/tokyonight_day_and_storm_tokens.css @@ -0,0 +1,85 @@ +/*! +This Highlight tokens should be used with: +- Tokyo Night Day +- Tokyo Night Storm + */ + + +/* Guide to the tokens: https://pygments.org/docs/tokens/ */ +.highlight .hll { background-color: var(--yellow) } +.highlight__code { background: var(--code-background); color: var(--code-text); } +.highlight .c { color: var(--code-comment) } /* Comment */ +.highlight .err { color: var(--red) } /* Error */ +.highlight .g { color: var(--code-text) } /* Generic */ +.highlight .k { color: var(--blue); font-weight: bold; } /* Keyword */ +.highlight .l { color: var(--code-text) } /* Literal */ +.highlight .n { color: var(--constant) } /* Name */ +.highlight .o { color: var(--blue); font-weight: bold; } /* Operator */ +.highlight .x { color: var(--code-text) } /* Other */ +.highlight .p { color: var(--magenta) } /* Punctuation */ +.highlight .ch { color: var(--code-comment) } /* Comment.Hashbang */ +.highlight .cm { color: var(--code-comment) } /* Comment.Multiline */ +.highlight .cp { color: var(--yellow) } /* Comment.Preproc */ +.highlight .cpf { color: var(--code-comment) } /* Comment.PreprocFile */ +.highlight .c1 { color: var(--code-comment) } /* Comment.Single */ +.highlight .cs { color: var(--code-comment) } /* Comment.Special */ +.highlight .gd { color: var(--red) } /* Generic.Deleted */ +.highlight .ge { color: var(--code-text); text-decoration: underline } /* Generic.Emph */ +.highlight .gr { color: var(--code-text) } /* Generic.Error */ +.highlight .gh { color: var(--code-text); font-weight: bold } /* Generic.Heading */ +.highlight .gi { color: var(--code-text); font-weight: bold } /* Generic.Inserted */ +.highlight .go { color: var(--code-text) } /* Generic.Output */ +.highlight .gp { color: var(--code-text) } /* Generic.Prompt */ +.highlight .gs { color: var(--code-text) } /* Generic.Strong */ +.highlight .gu { color: var(--code-text); font-weight: bold } /* Generic.Subheading */ +.highlight .gt { color: var(--code-text) } /* Generic.Traceback */ +.highlight .kc { color: var(--constant) } /* Keyword.Constant */ +.highlight .kd { color: var(--magenta) } /* Keyword.Declaration */ +.highlight .kn { color: var(--red) } /* Keyword.Namespace */ +.highlight .kp { color: var(--red) } /* Keyword.Pseudo */ +.highlight .kr { color: var(--red) } /* Keyword.Reserved */ +.highlight .kt { color: var(--red) } /* Keyword.Type */ +.highlight .ld { color: var(--code-text) } /* Literal.Date */ +.highlight .m { color: var(--magenta) } /* Literal.Number */ +.highlight .s { color: var(--green) } /* Literal.String */ +.highlight .na { color: var(--green) } /* Name.Attribute */ +.highlight .nb { color: var(--cyan); font-style: italic } /* Name.Builtin */ +.highlight .nc { color: var(--yellow) } /* Name.Class */ +.highlight .no { color: var(--blue); font-style: italic } /* Name.Constant */ +.highlight .nd { color: var(--code-text) } /* Name.Decorator */ +.highlight .ni { color: var(--code-text) } /* Name.Entity */ +.highlight .ne { color: var(--red) } /* Name.Exception */ +.highlight .nf { color: var(--blue) } /* Name.Function */ +.highlight .nl { color: var(--green); font-style: italic } /* Name.Label */ +.highlight .nn { color: var(--code-text) } /* Name.Namespace */ +.highlight .nx { color: var(--blue) } /* Name.Other */ +.highlight .py { color: var(--green) } /* Name.Property */ +.highlight .nt { color: var(--red) } /* Name.Tag */ +.highlight .nv { color: var(--white); font-style: italic } /* Name.Variable */ +.highlight .ow { color: var(--magenta); font-weight: bold; } /* Operator.Word */ +.highlight .w { color: var(--code-text) } /* Text.Whitespace */ +.highlight .mb { color: var(--magenta) } /* Literal.Number.Bin */ +.highlight .mf { color: var(--magenta) } /* Literal.Number.Float */ +.highlight .mh { color: var(--magenta) } /* Literal.Number.Hex */ +.highlight .mi { color: var(--magenta) } /* Literal.Number.Integer */ +.highlight .mo { color: var(--magenta) } /* Literal.Number.Oct */ +.highlight .sa { color: var(--string) } /* Literal.String.Affix */ +.highlight .sb { color: var(--string) } /* Literal.String.Backtick */ +.highlight .sc { color: var(--string) } /* Literal.String.Char */ +.highlight .dl { color: var(--string) } /* Literal.String.Delimiter */ +.highlight .sd { color: var(--string) } /* Literal.String.Doc */ +.highlight .s2 { color: var(--string) } /* Literal.String.Double */ +.highlight .se { color: var(--string) } /* Literal.String.Escape */ +.highlight .sh { color: var(--string) } /* Literal.String.Heredoc */ +.highlight .si { color: var(--string) } /* Literal.String.Interpol */ +.highlight .sx { color: var(--string) } /* Literal.String.Other */ +.highlight .sr { color: var(--string) } /* Literal.String.Regex */ +.highlight .s1 { color: var(--string) } /* Literal.String.Single */ +.highlight .ss { color: var(--string) } /* Literal.String.Symbol */ +.highlight .bp { color: var(--code-text); font-style: italic } /* Name.Builtin.Pseudo */ +.highlight .fm { color: var(--green) } /* Name.Function.Magic */ +.highlight .vc { color: var(--yellow); font-style: italic } /* Name.Variable.Class */ +.highlight .vg { color: var(--code-text); font-style: italic } /* Name.Variable.Global */ +.highlight .vi { color: var(--yellow); font-style: italic } /* Name.Variable.Instance */ +.highlight .vm { color: var(--green); font-style: italic } /* Name.Variable.Magic */ +.highlight .il { color: var(--magenta) } /* Literal.Number.Integer.Long */ diff --git a/frontend/src/style/CSS Themes/Highlighting styles/tokyonight_storm.css b/frontend/src/style/CSS Themes/Highlighting styles/tokyonight_storm.css new file mode 100644 index 0000000..48144cf --- /dev/null +++ b/frontend/src/style/CSS Themes/Highlighting styles/tokyonight_storm.css @@ -0,0 +1,26 @@ +/*! +This Highlight theme is based on: +Tokyo Night Storm - https://github.com/tokyo-night/tokyo-night-vscode-theme + +Custom Highlight theme made by @MarkoSagadin, 2025 + */ + +:root, .card.nightMode{ + --background: #1a1b26; + --foreground: #a9b1d6; + --black: #414868; + --red: #f7768e; + --green: #73daca; + --yellow: #e0af68; + --blue: #7aa2f7; + --magenta: #bb9af7; + --cyan: #7dcfff; + --white: #c0caf5; + --bright_black: #414868; + --bright_white: #c0caf5; + --constant: #ff9e64; + --string: #9ece6a; + --code-text: #c0caf5; + --code-comment: #565f89; + --code-background: #1a1b26 +} diff --git a/frontend/src/style/CSS Themes/UI Themes/tokyonight_day.css b/frontend/src/style/CSS Themes/UI Themes/tokyonight_day.css new file mode 100644 index 0000000..e5be9f0 --- /dev/null +++ b/frontend/src/style/CSS Themes/UI Themes/tokyonight_day.css @@ -0,0 +1,24 @@ +/*! +This UI theme is based on: +Tokyo Night Day theme - https://github.com/tokyo-night/tokyo-night-vscode-theme + +Custom Ui theme made by @MarkoSagadin, 2025 + */ +:root, .card.nightMode{ + --main-background: #e6e7ed; + --secondary-background: #cdced4; + --tabs-label-background: #b3b4ba; + --accent-background: #8c4351; + --cloze-background: #5a3e8e; + --codeline-hover-background: rgba(108,110,117, 0.2); + --main-color: #0f4b6e; + --secondary-color: #6c6e75; + --accent-color: #2959aa; + --cloze-color: #e6e7ed; + --h1: #2959aa; + --h2: #5a3e8e; + --h3: #8c4351; + --h4: #8f5e15; + --h5: #385f0d; + --h6: #0f4b6e; +} diff --git a/frontend/src/style/CSS Themes/UI Themes/tokyonight_storm.css b/frontend/src/style/CSS Themes/UI Themes/tokyonight_storm.css new file mode 100644 index 0000000..0fd90d7 --- /dev/null +++ b/frontend/src/style/CSS Themes/UI Themes/tokyonight_storm.css @@ -0,0 +1,24 @@ +/*! +This UI theme is based on: +Tokyo Night Storm theme - https://github.com/tokyo-night/tokyo-night-vscode-theme + +Custom Ui theme made by @MarkoSagadin, 2025 + */ +:root, .card.nightMode{ + --main-background: #1a1b26; + --secondary-background: #565f89; + --tabs-label-background: #414868; + --accent-background: #f7768e; + --cloze-background: #7dcfff; + --codeline-hover-background: rgba(41, 46, 66, .8); + --main-color: #c0caf5; + --secondary-color: #a9b1d6; + --accent-color: #7aa2f7; + --cloze-color: #1a1b26; + --h1: #7aa2f7; + --h2: #bb9af7; + --h3: #f7768e; + --h4: #e0af68; + --h5: #9ece6a; + --h6: #7dcfff; +} diff --git a/frontend/src/style/CSS Themes/full_themes/tokyonight_day.css b/frontend/src/style/CSS Themes/full_themes/tokyonight_day.css new file mode 100644 index 0000000..4430fc9 --- /dev/null +++ b/frontend/src/style/CSS Themes/full_themes/tokyonight_day.css @@ -0,0 +1,6 @@ +@import url("../UI\ Themes/tokyonight_day.css"); +@import url("../Highlighting styles/tokyonight_day.css"); + +@import url("../Highlighting styles/tokyonight_day_and_storm_tokens.css"); + +@import url("../../themeless_main.sass"); diff --git a/frontend/src/style/CSS Themes/full_themes/tokyonight_day_and_storm.css b/frontend/src/style/CSS Themes/full_themes/tokyonight_day_and_storm.css new file mode 100644 index 0000000..76cf458 --- /dev/null +++ b/frontend/src/style/CSS Themes/full_themes/tokyonight_day_and_storm.css @@ -0,0 +1,9 @@ +@import url("../UI\ Themes/tokyonight_day.css"); +@import url("../Highlighting styles/tokyonight_day.css"); + +@import url("../UI\ Themes/tokyonight_storm.css"); +@import url("../Highlighting styles/tokyonight_storm.css"); + +@import url("../Highlighting styles/tokyonight_day_and_storm_tokens.css"); + +@import url("../../themeless_main.sass"); diff --git a/frontend/src/style/CSS Themes/full_themes/tokyonight_storm.css b/frontend/src/style/CSS Themes/full_themes/tokyonight_storm.css new file mode 100644 index 0000000..580190b --- /dev/null +++ b/frontend/src/style/CSS Themes/full_themes/tokyonight_storm.css @@ -0,0 +1,6 @@ +@import url("../UI\ Themes/tokyonight_storm.css"); +@import url("../Highlighting styles/tokyonight_storm.css"); + +@import url("../Highlighting styles/tokyonight_day_and_storm_tokens.css"); + +@import url("../../themeless_main.sass"); diff --git a/themes/README.md b/themes/README.md index 4906bf0..5d32ada 100644 --- a/themes/README.md +++ b/themes/README.md @@ -6,6 +6,7 @@ - [Rose Pine and Dawn](#Rose-Pine-and-Dawn) - [Catpuccin Latte and Macchiato](#Catpuccin-Latte-and-Macchiato) +- [Tokyo Night Day and Storm](#Tokyo-Night-Day-and-Storm) All dual themes are also available in individual Light and Dark versions. @@ -28,7 +29,14 @@ Inspired by: https://rosepinetheme.com/ Inspired by: https://github.com/catppuccin/catppuccin ![A demo image of the catpuccin latte theme](./docs/catpuccin-latte.webp) -### Catpuccin Macchiato +## Tokyo Night Day and Storm -Inspired by: https://github.com/catppuccin/catppuccin -![A demo image of the catpuccin macchiato theme](./docs/catpuccin-macchiato.webp) +Inspired by: https://github.com/tokyo-night/tokyo-night-vscode-theme + +## Tokyo Night Day + +![A demo image of the tokyo night day theme](./docs/tokyo-night-day.webp) + +## Tokyo Night Storm + +![A demo image of the toko night storm theme](./docs/tokyo-night-storm.webp) diff --git a/themes/docs/tokyo-night-day.webp b/themes/docs/tokyo-night-day.webp new file mode 100644 index 0000000..cb3d8e7 Binary files /dev/null and b/themes/docs/tokyo-night-day.webp differ diff --git a/themes/docs/tokyo-night-storm.webp b/themes/docs/tokyo-night-storm.webp new file mode 100644 index 0000000..6c7769d Binary files /dev/null and b/themes/docs/tokyo-night-storm.webp differ diff --git a/themes/tokyonight_day.css b/themes/tokyonight_day.css new file mode 100644 index 0000000..60451de --- /dev/null +++ b/themes/tokyonight_day.css @@ -0,0 +1,18 @@ +:root,.card.nightMode{--main-background: #e6e7ed;--secondary-background: #cdced4;--tabs-label-background: #b3b4ba;--accent-background: #8c4351;--cloze-background: #5a3e8e;--codeline-hover-background: rgba(108,110,117, .2);--main-color: #0f4b6e;--secondary-color: #6c6e75;--accent-color: #2959aa;--cloze-color: #e6e7ed;--h1: #2959aa;--h2: #5a3e8e;--h3: #8c4351;--h4: #8f5e15;--h5: #385f0d;--h6: #0f4b6e}:root,.card{--background: #e6e7ed;--foreground: #343b58;--black: #e6e7ed;--red: #8c4351;--green: #33635c;--yellow: #8f5e15;--blue: #2959aa;--magenta: #5a3e8e;--cyan: #0f4b6e;--white: #343b58;--bright_black: #6c6e75;--bright_white: #343b58;--constant: #965027;--string: #385f0d;--code-text: #343b58;--code-comment: #6c6e75;--code-background: #e6e7ed }.highlight .hll{background-color:var(--yellow)}.highlight__code{background:var(--code-background);color:var(--code-text)}.highlight .c{color:var(--code-comment)}.highlight .err{color:var(--red)}.highlight .g{color:var(--code-text)}.highlight .k{color:var(--blue);font-weight:700}.highlight .l{color:var(--code-text)}.highlight .n{color:var(--constant)}.highlight .o{color:var(--blue);font-weight:700}.highlight .x{color:var(--code-text)}.highlight .p{color:var(--magenta)}.highlight .ch,.highlight .cm{color:var(--code-comment)}.highlight .cp{color:var(--yellow)}.highlight .cpf,.highlight .c1,.highlight .cs{color:var(--code-comment)}.highlight .gd{color:var(--red)}.highlight .ge{color:var(--code-text);text-decoration:underline}.highlight .gr{color:var(--code-text)}.highlight .gh,.highlight .gi{color:var(--code-text);font-weight:700}.highlight .go,.highlight .gp,.highlight .gs{color:var(--code-text)}.highlight .gu{color:var(--code-text);font-weight:700}.highlight .gt{color:var(--code-text)}.highlight .kc{color:var(--constant)}.highlight .kd{color:var(--magenta)}.highlight .kn,.highlight .kp,.highlight .kr,.highlight .kt{color:var(--red)}.highlight .ld{color:var(--code-text)}.highlight .m{color:var(--magenta)}.highlight .s,.highlight .na{color:var(--green)}.highlight .nb{color:var(--cyan);font-style:italic}.highlight .nc{color:var(--yellow)}.highlight .no{color:var(--blue);font-style:italic}.highlight .nd,.highlight .ni{color:var(--code-text)}.highlight .ne{color:var(--red)}.highlight .nf{color:var(--blue)}.highlight .nl{color:var(--green);font-style:italic}.highlight .nn{color:var(--code-text)}.highlight .nx{color:var(--blue)}.highlight .py{color:var(--green)}.highlight .nt{color:var(--red)}.highlight .nv{color:var(--white);font-style:italic}.highlight .ow{color:var(--magenta);font-weight:700}.highlight .w{color:var(--code-text)}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:var(--magenta)}.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:var(--string)}.highlight .bp{color:var(--code-text);font-style:italic}.highlight .fm{color:var(--green)}.highlight .vc{color:var(--yellow);font-style:italic}.highlight .vg{color:var(--code-text);font-style:italic}.highlight .vi{color:var(--yellow);font-style:italic}.highlight .vm{color:var(--green);font-style:italic}.highlight .il{color:var(--magenta)}*{box-sizing:border-box}*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,code{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}html{font-size:62.5%}h1,h2,h3,h4{line-height:1.2}body{font-family:sans-serif;font-size:1.8rem;line-height:1.5;background:var(--main-background);overflow:hidden;counter-reset:tabs}h1{color:var(--h1)!important;font-size:3.2rem}h2{color:var(--h2);font-size:2.8rem}h3{color:var(--h3);font-size:2.4rem}h4{color:var(--h4);font-size:2.2rem}h5{color:var(--h5);font-size:2rem}h6{color:var(--h6);font-size:2rem}code{padding:1px 5px;border-radius:5px;font-size:1.7rem;background:var(--secondary-background)}a,em,strong{color:var(--accent-color)}p,h1,h2,h3,h4,h5,h6{margin-bottom:10px}.l-col-flex{display:flex;flex-flow:column nowrap}.l-row-flex{display:flex;flex-flow:row nowrap}@media (max-aspect-ratio: 1/1){.l-row-flex{flex-flow:column nowrap}}.l-viewport{width:100vw;height:100vh}.l-center{justify-content:center;align-items:center}.l-spacebetween{justify-content:space-between}.l-overflow-hidden{overflow:hidden}.tab{flex:0 1 auto;overflow:hidden;display:flex}.tab--isactive .tab__label,.tab--isfullscreen .tab__label{background:var(--main-background)!important;color:var(--accent-color)!important;border-right:1.5px solid var(--accent-color)!important}@media (min-aspect-ratio: 1/1){.tab--isactive .tab__label,.tab--isfullscreen .tab__label{border-bottom:1.5px solid var(--accent-color)!important;border-right:1px solid var(--secondary-background)!important}}.tab--isactive .tab__body,.tab--isfullscreen .tab__body{display:block}.tab--isfullscreen .tab__body{position:fixed!important;z-index:9999;height:100%}@media (min-aspect-ratio: 1/1){.tab--isfullscreen .tab__body{height:calc(100% - 35px);width:100%}}.tab__label{background:var(--tabs-label-background)!important;cursor:pointer;user-select:none;color:var(--secondary-color)!important;line-height:35px;text-decoration:none;margin:0!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:10px 0!important;width:35px!important;height:auto!important;border-top:1px solid var(--secondary-background)!important;border-bottom:1px solid var(--secondary-background)!important;border-right:1.5px solid var(--tabs-label-background)!important;display:inline-flex;flex-direction:column}.tab__label:focus-visible{box-shadow:none!important;outline:2px solid var(--accent-color)!important;outline-offset:-2px!important}@media (min-aspect-ratio: 1/1){.tab__label{padding:0 10px!important;height:35px!important;width:100%!important;flex-direction:row;border-bottom:1.5px solid var(--tabs-label-background)!important;border-left:1px solid var(--secondary-background)!important;border-right:1px solid var(--secondary-background)!important;border-top:none!important}.tab__label:before{counter-increment:tabs;content:counter(tabs);margin-right:5px;font-weight:700;color:var(--accent-color)}}.tab__label span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;writing-mode:vertical-lr}@media (min-aspect-ratio: 1/1){.tab__label span{writing-mode:lr!important}}.tab__body{display:none;background:var(--main-background);color:var(--main-color);overflow-y:scroll;width:calc(100% - 35px);height:100%}@media (min-aspect-ratio: 1/1){.tab__body{height:calc(100% - 35px);width:100%}}.tab__body:focus-visible{outline:3px solid var(--accent-color);outline-offset:-3px}.tab__body::-webkit-scrollbar{width:10px;border-left:1px solid var(--secondary-color);background:var(--secondary-background)}.tab__body::-webkit-scrollbar-thumb{background:var(--secondary-color);border-left:1px solid var(--secondary-color)}.tab__body__content{max-width:90vw;min-width:calc(50vw - 14px);padding:15px;margin:0 auto}@media (min-aspect-ratio: 1/1){.tab__body__content{max-width:70vw;padding:35px 25px}}.tab_group{display:flex;position:relative;background:var(--secondary-background);flex:1;flex-flow:column nowrap;min-height:50vh;min-width:auto}@media (min-aspect-ratio: 1/1){.tab_group{height:100%;min-width:50vw;min-height:auto;flex-direction:row}}.tab_group .tab__body{position:absolute;left:35px;top:0}@media (min-aspect-ratio: 1/1){.tab_group .tab__body{left:0;top:35px}}.tab_group+.tab_group{border-top:3px solid var(--accent-color)}@media (min-aspect-ratio: 1/1){.tab_group+.tab_group{border-top:none}}.highlight{counter-reset:line;text-align:left;margin-bottom:10px}.highlight--linenos .highlight__line:before{position:absolute;counter-increment:line;content:counter(line);height:100%;border-right:1px solid var(--main-color);color:var(--main-color);width:35px;padding:0 10px 0 0;text-align:right;left:0;cursor:default}.highlight--linenos .highlight__line:hover:before{color:var(--accent-color)}.highlight__line{display:block;position:relative;padding-left:50px;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}.highlight__line:hover{background:var(--codeline-hover-background);opacity:1}.highlight__line--scrollable-code{white-space:pre;overflow-wrap:normal}.highlight__line:empty:after{content:" "}.highlight__language{display:inline-block;padding:0 10px;background:var(--main-background);user-select:none;border-bottom:none;color:var(--accent-color)}.highlight__code{font-size:1.7rem;width:100%;border:1px solid var(--accent-color);border-left:5px solid var(--accent-color);padding:5px}.highlight__code--scrollable-code{overflow-x:scroll}.highlight+br{display:none}#content,.card,.card1{margin:0!important}.cloze{color:var(--cloze-color)!important;background:var(--cloze-background);font-weight:700;padding:1px 5px;border-radius:3px} +/*! +This UI theme is based on: +Tokyo Night Day theme - https://github.com/tokyo-night/tokyo-night-vscode-theme + +Custom Ui theme made by @MarkoSagadin, 2025 + */ +/*! +This Highlight theme is based on: +Tokyo Night Day - https://github.com/tokyo-night/tokyo-night-vscode-theme + +Custom Highlight theme made by @MarkoSagadin, 2025 + */ +/*! +This Highlight tokens should be used with: +- Tokyo Night Day +- Tokyo Night Storm + */ diff --git a/themes/tokyonight_day_and_storm.css b/themes/tokyonight_day_and_storm.css new file mode 100644 index 0000000..7747a06 --- /dev/null +++ b/themes/tokyonight_day_and_storm.css @@ -0,0 +1,30 @@ +:root,.card.nightMode{--main-background: #e6e7ed;--secondary-background: #cdced4;--tabs-label-background: #b3b4ba;--accent-background: #8c4351;--cloze-background: #5a3e8e;--codeline-hover-background: rgba(108,110,117, .2);--main-color: #0f4b6e;--secondary-color: #6c6e75;--accent-color: #2959aa;--cloze-color: #e6e7ed;--h1: #2959aa;--h2: #5a3e8e;--h3: #8c4351;--h4: #8f5e15;--h5: #385f0d;--h6: #0f4b6e}:root,.card{--background: #e6e7ed;--foreground: #343b58;--black: #e6e7ed;--red: #8c4351;--green: #33635c;--yellow: #8f5e15;--blue: #2959aa;--magenta: #5a3e8e;--cyan: #0f4b6e;--white: #343b58;--bright_black: #6c6e75;--bright_white: #343b58;--constant: #965027;--string: #385f0d;--code-text: #343b58;--code-comment: #6c6e75;--code-background: #e6e7ed }:root,.card.nightMode{--main-background: #1a1b26;--secondary-background: #565f89;--tabs-label-background: #414868;--accent-background: #f7768e;--cloze-background: #7dcfff;--codeline-hover-background: rgba(41, 46, 66, .8);--main-color: #c0caf5;--secondary-color: #a9b1d6;--accent-color: #7aa2f7;--cloze-color: #1a1b26;--h1: #7aa2f7;--h2: #bb9af7;--h3: #f7768e;--h4: #e0af68;--h5: #9ece6a;--h6: #7dcfff}:root,.card.nightMode{--background: #1a1b26;--foreground: #a9b1d6;--black: #414868;--red: #f7768e;--green: #73daca;--yellow: #e0af68;--blue: #7aa2f7;--magenta: #bb9af7;--cyan: #7dcfff;--white: #c0caf5;--bright_black: #414868;--bright_white: #c0caf5;--constant: #ff9e64;--string: #9ece6a;--code-text: #c0caf5;--code-comment: #565f89;--code-background: #1a1b26 }.highlight .hll{background-color:var(--yellow)}.highlight__code{background:var(--code-background);color:var(--code-text)}.highlight .c{color:var(--code-comment)}.highlight .err{color:var(--red)}.highlight .g{color:var(--code-text)}.highlight .k{color:var(--blue);font-weight:700}.highlight .l{color:var(--code-text)}.highlight .n{color:var(--constant)}.highlight .o{color:var(--blue);font-weight:700}.highlight .x{color:var(--code-text)}.highlight .p{color:var(--magenta)}.highlight .ch,.highlight .cm{color:var(--code-comment)}.highlight .cp{color:var(--yellow)}.highlight .cpf,.highlight .c1,.highlight .cs{color:var(--code-comment)}.highlight .gd{color:var(--red)}.highlight .ge{color:var(--code-text);text-decoration:underline}.highlight .gr{color:var(--code-text)}.highlight .gh,.highlight .gi{color:var(--code-text);font-weight:700}.highlight .go,.highlight .gp,.highlight .gs{color:var(--code-text)}.highlight .gu{color:var(--code-text);font-weight:700}.highlight .gt{color:var(--code-text)}.highlight .kc{color:var(--constant)}.highlight .kd{color:var(--magenta)}.highlight .kn,.highlight .kp,.highlight .kr,.highlight .kt{color:var(--red)}.highlight .ld{color:var(--code-text)}.highlight .m{color:var(--magenta)}.highlight .s,.highlight .na{color:var(--green)}.highlight .nb{color:var(--cyan);font-style:italic}.highlight .nc{color:var(--yellow)}.highlight .no{color:var(--blue);font-style:italic}.highlight .nd,.highlight .ni{color:var(--code-text)}.highlight .ne{color:var(--red)}.highlight .nf{color:var(--blue)}.highlight .nl{color:var(--green);font-style:italic}.highlight .nn{color:var(--code-text)}.highlight .nx{color:var(--blue)}.highlight .py{color:var(--green)}.highlight .nt{color:var(--red)}.highlight .nv{color:var(--white);font-style:italic}.highlight .ow{color:var(--magenta);font-weight:700}.highlight .w{color:var(--code-text)}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:var(--magenta)}.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:var(--string)}.highlight .bp{color:var(--code-text);font-style:italic}.highlight .fm{color:var(--green)}.highlight .vc{color:var(--yellow);font-style:italic}.highlight .vg{color:var(--code-text);font-style:italic}.highlight .vi{color:var(--yellow);font-style:italic}.highlight .vm{color:var(--green);font-style:italic}.highlight .il{color:var(--magenta)}*{box-sizing:border-box}*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,code{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}html{font-size:62.5%}h1,h2,h3,h4{line-height:1.2}body{font-family:sans-serif;font-size:1.8rem;line-height:1.5;background:var(--main-background);overflow:hidden;counter-reset:tabs}h1{color:var(--h1)!important;font-size:3.2rem}h2{color:var(--h2);font-size:2.8rem}h3{color:var(--h3);font-size:2.4rem}h4{color:var(--h4);font-size:2.2rem}h5{color:var(--h5);font-size:2rem}h6{color:var(--h6);font-size:2rem}code{padding:1px 5px;border-radius:5px;font-size:1.7rem;background:var(--secondary-background)}a,em,strong{color:var(--accent-color)}p,h1,h2,h3,h4,h5,h6{margin-bottom:10px}.l-col-flex{display:flex;flex-flow:column nowrap}.l-row-flex{display:flex;flex-flow:row nowrap}@media (max-aspect-ratio: 1/1){.l-row-flex{flex-flow:column nowrap}}.l-viewport{width:100vw;height:100vh}.l-center{justify-content:center;align-items:center}.l-spacebetween{justify-content:space-between}.l-overflow-hidden{overflow:hidden}.tab{flex:0 1 auto;overflow:hidden;display:flex}.tab--isactive .tab__label,.tab--isfullscreen .tab__label{background:var(--main-background)!important;color:var(--accent-color)!important;border-right:1.5px solid var(--accent-color)!important}@media (min-aspect-ratio: 1/1){.tab--isactive .tab__label,.tab--isfullscreen .tab__label{border-bottom:1.5px solid var(--accent-color)!important;border-right:1px solid var(--secondary-background)!important}}.tab--isactive .tab__body,.tab--isfullscreen .tab__body{display:block}.tab--isfullscreen .tab__body{position:fixed!important;z-index:9999;height:100%}@media (min-aspect-ratio: 1/1){.tab--isfullscreen .tab__body{height:calc(100% - 35px);width:100%}}.tab__label{background:var(--tabs-label-background)!important;cursor:pointer;user-select:none;color:var(--secondary-color)!important;line-height:35px;text-decoration:none;margin:0!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:10px 0!important;width:35px!important;height:auto!important;border-top:1px solid var(--secondary-background)!important;border-bottom:1px solid var(--secondary-background)!important;border-right:1.5px solid var(--tabs-label-background)!important;display:inline-flex;flex-direction:column}.tab__label:focus-visible{box-shadow:none!important;outline:2px solid var(--accent-color)!important;outline-offset:-2px!important}@media (min-aspect-ratio: 1/1){.tab__label{padding:0 10px!important;height:35px!important;width:100%!important;flex-direction:row;border-bottom:1.5px solid var(--tabs-label-background)!important;border-left:1px solid var(--secondary-background)!important;border-right:1px solid var(--secondary-background)!important;border-top:none!important}.tab__label:before{counter-increment:tabs;content:counter(tabs);margin-right:5px;font-weight:700;color:var(--accent-color)}}.tab__label span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;writing-mode:vertical-lr}@media (min-aspect-ratio: 1/1){.tab__label span{writing-mode:lr!important}}.tab__body{display:none;background:var(--main-background);color:var(--main-color);overflow-y:scroll;width:calc(100% - 35px);height:100%}@media (min-aspect-ratio: 1/1){.tab__body{height:calc(100% - 35px);width:100%}}.tab__body:focus-visible{outline:3px solid var(--accent-color);outline-offset:-3px}.tab__body::-webkit-scrollbar{width:10px;border-left:1px solid var(--secondary-color);background:var(--secondary-background)}.tab__body::-webkit-scrollbar-thumb{background:var(--secondary-color);border-left:1px solid var(--secondary-color)}.tab__body__content{max-width:90vw;min-width:calc(50vw - 14px);padding:15px;margin:0 auto}@media (min-aspect-ratio: 1/1){.tab__body__content{max-width:70vw;padding:35px 25px}}.tab_group{display:flex;position:relative;background:var(--secondary-background);flex:1;flex-flow:column nowrap;min-height:50vh;min-width:auto}@media (min-aspect-ratio: 1/1){.tab_group{height:100%;min-width:50vw;min-height:auto;flex-direction:row}}.tab_group .tab__body{position:absolute;left:35px;top:0}@media (min-aspect-ratio: 1/1){.tab_group .tab__body{left:0;top:35px}}.tab_group+.tab_group{border-top:3px solid var(--accent-color)}@media (min-aspect-ratio: 1/1){.tab_group+.tab_group{border-top:none}}.highlight{counter-reset:line;text-align:left;margin-bottom:10px}.highlight--linenos .highlight__line:before{position:absolute;counter-increment:line;content:counter(line);height:100%;border-right:1px solid var(--main-color);color:var(--main-color);width:35px;padding:0 10px 0 0;text-align:right;left:0;cursor:default}.highlight--linenos .highlight__line:hover:before{color:var(--accent-color)}.highlight__line{display:block;position:relative;padding-left:50px;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}.highlight__line:hover{background:var(--codeline-hover-background);opacity:1}.highlight__line--scrollable-code{white-space:pre;overflow-wrap:normal}.highlight__line:empty:after{content:" "}.highlight__language{display:inline-block;padding:0 10px;background:var(--main-background);user-select:none;border-bottom:none;color:var(--accent-color)}.highlight__code{font-size:1.7rem;width:100%;border:1px solid var(--accent-color);border-left:5px solid var(--accent-color);padding:5px}.highlight__code--scrollable-code{overflow-x:scroll}.highlight+br{display:none}#content,.card,.card1{margin:0!important}.cloze{color:var(--cloze-color)!important;background:var(--cloze-background);font-weight:700;padding:1px 5px;border-radius:3px} +/*! +This UI theme is based on: +Tokyo Night Day theme - https://github.com/tokyo-night/tokyo-night-vscode-theme + +Custom Ui theme made by @MarkoSagadin, 2025 + */ +/*! +This Highlight theme is based on: +Tokyo Night Day - https://github.com/tokyo-night/tokyo-night-vscode-theme + +Custom Highlight theme made by @MarkoSagadin, 2025 + */ +/*! +This UI theme is based on: +Tokyo Night Storm theme - https://github.com/tokyo-night/tokyo-night-vscode-theme + +Custom Ui theme made by @MarkoSagadin, 2025 + */ +/*! +This Highlight theme is based on: +Tokyo Night Storm - https://github.com/tokyo-night/tokyo-night-vscode-theme + +Custom Highlight theme made by @MarkoSagadin, 2025 + */ +/*! +This Highlight tokens should be used with: +- Tokyo Night Day +- Tokyo Night Storm + */ diff --git a/themes/tokyonight_storm.css b/themes/tokyonight_storm.css new file mode 100644 index 0000000..d3b2362 --- /dev/null +++ b/themes/tokyonight_storm.css @@ -0,0 +1,18 @@ +:root,.card.nightMode{--main-background: #1a1b26;--secondary-background: #565f89;--tabs-label-background: #414868;--accent-background: #f7768e;--cloze-background: #7dcfff;--codeline-hover-background: rgba(41, 46, 66, .8);--main-color: #c0caf5;--secondary-color: #a9b1d6;--accent-color: #7aa2f7;--cloze-color: #1a1b26;--h1: #7aa2f7;--h2: #bb9af7;--h3: #f7768e;--h4: #e0af68;--h5: #9ece6a;--h6: #7dcfff}:root,.card.nightMode{--background: #1a1b26;--foreground: #a9b1d6;--black: #414868;--red: #f7768e;--green: #73daca;--yellow: #e0af68;--blue: #7aa2f7;--magenta: #bb9af7;--cyan: #7dcfff;--white: #c0caf5;--bright_black: #414868;--bright_white: #c0caf5;--constant: #ff9e64;--string: #9ece6a;--code-text: #c0caf5;--code-comment: #565f89;--code-background: #1a1b26 }.highlight .hll{background-color:var(--yellow)}.highlight__code{background:var(--code-background);color:var(--code-text)}.highlight .c{color:var(--code-comment)}.highlight .err{color:var(--red)}.highlight .g{color:var(--code-text)}.highlight .k{color:var(--blue);font-weight:700}.highlight .l{color:var(--code-text)}.highlight .n{color:var(--constant)}.highlight .o{color:var(--blue);font-weight:700}.highlight .x{color:var(--code-text)}.highlight .p{color:var(--magenta)}.highlight .ch,.highlight .cm{color:var(--code-comment)}.highlight .cp{color:var(--yellow)}.highlight .cpf,.highlight .c1,.highlight .cs{color:var(--code-comment)}.highlight .gd{color:var(--red)}.highlight .ge{color:var(--code-text);text-decoration:underline}.highlight .gr{color:var(--code-text)}.highlight .gh,.highlight .gi{color:var(--code-text);font-weight:700}.highlight .go,.highlight .gp,.highlight .gs{color:var(--code-text)}.highlight .gu{color:var(--code-text);font-weight:700}.highlight .gt{color:var(--code-text)}.highlight .kc{color:var(--constant)}.highlight .kd{color:var(--magenta)}.highlight .kn,.highlight .kp,.highlight .kr,.highlight .kt{color:var(--red)}.highlight .ld{color:var(--code-text)}.highlight .m{color:var(--magenta)}.highlight .s,.highlight .na{color:var(--green)}.highlight .nb{color:var(--cyan);font-style:italic}.highlight .nc{color:var(--yellow)}.highlight .no{color:var(--blue);font-style:italic}.highlight .nd,.highlight .ni{color:var(--code-text)}.highlight .ne{color:var(--red)}.highlight .nf{color:var(--blue)}.highlight .nl{color:var(--green);font-style:italic}.highlight .nn{color:var(--code-text)}.highlight .nx{color:var(--blue)}.highlight .py{color:var(--green)}.highlight .nt{color:var(--red)}.highlight .nv{color:var(--white);font-style:italic}.highlight .ow{color:var(--magenta);font-weight:700}.highlight .w{color:var(--code-text)}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:var(--magenta)}.highlight .sa,.highlight .sb,.highlight .sc,.highlight .dl,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:var(--string)}.highlight .bp{color:var(--code-text);font-style:italic}.highlight .fm{color:var(--green)}.highlight .vc{color:var(--yellow);font-style:italic}.highlight .vg{color:var(--code-text);font-style:italic}.highlight .vi{color:var(--yellow);font-style:italic}.highlight .vm{color:var(--green);font-style:italic}.highlight .il{color:var(--magenta)}*{box-sizing:border-box}*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre,code{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}html{font-size:62.5%}h1,h2,h3,h4{line-height:1.2}body{font-family:sans-serif;font-size:1.8rem;line-height:1.5;background:var(--main-background);overflow:hidden;counter-reset:tabs}h1{color:var(--h1)!important;font-size:3.2rem}h2{color:var(--h2);font-size:2.8rem}h3{color:var(--h3);font-size:2.4rem}h4{color:var(--h4);font-size:2.2rem}h5{color:var(--h5);font-size:2rem}h6{color:var(--h6);font-size:2rem}code{padding:1px 5px;border-radius:5px;font-size:1.7rem;background:var(--secondary-background)}a,em,strong{color:var(--accent-color)}p,h1,h2,h3,h4,h5,h6{margin-bottom:10px}.l-col-flex{display:flex;flex-flow:column nowrap}.l-row-flex{display:flex;flex-flow:row nowrap}@media (max-aspect-ratio: 1/1){.l-row-flex{flex-flow:column nowrap}}.l-viewport{width:100vw;height:100vh}.l-center{justify-content:center;align-items:center}.l-spacebetween{justify-content:space-between}.l-overflow-hidden{overflow:hidden}.tab{flex:0 1 auto;overflow:hidden;display:flex}.tab--isactive .tab__label,.tab--isfullscreen .tab__label{background:var(--main-background)!important;color:var(--accent-color)!important;border-right:1.5px solid var(--accent-color)!important}@media (min-aspect-ratio: 1/1){.tab--isactive .tab__label,.tab--isfullscreen .tab__label{border-bottom:1.5px solid var(--accent-color)!important;border-right:1px solid var(--secondary-background)!important}}.tab--isactive .tab__body,.tab--isfullscreen .tab__body{display:block}.tab--isfullscreen .tab__body{position:fixed!important;z-index:9999;height:100%}@media (min-aspect-ratio: 1/1){.tab--isfullscreen .tab__body{height:calc(100% - 35px);width:100%}}.tab__label{background:var(--tabs-label-background)!important;cursor:pointer;user-select:none;color:var(--secondary-color)!important;line-height:35px;text-decoration:none;margin:0!important;border:none!important;box-shadow:none!important;border-radius:0!important;padding:10px 0!important;width:35px!important;height:auto!important;border-top:1px solid var(--secondary-background)!important;border-bottom:1px solid var(--secondary-background)!important;border-right:1.5px solid var(--tabs-label-background)!important;display:inline-flex;flex-direction:column}.tab__label:focus-visible{box-shadow:none!important;outline:2px solid var(--accent-color)!important;outline-offset:-2px!important}@media (min-aspect-ratio: 1/1){.tab__label{padding:0 10px!important;height:35px!important;width:100%!important;flex-direction:row;border-bottom:1.5px solid var(--tabs-label-background)!important;border-left:1px solid var(--secondary-background)!important;border-right:1px solid var(--secondary-background)!important;border-top:none!important}.tab__label:before{counter-increment:tabs;content:counter(tabs);margin-right:5px;font-weight:700;color:var(--accent-color)}}.tab__label span{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;writing-mode:vertical-lr}@media (min-aspect-ratio: 1/1){.tab__label span{writing-mode:lr!important}}.tab__body{display:none;background:var(--main-background);color:var(--main-color);overflow-y:scroll;width:calc(100% - 35px);height:100%}@media (min-aspect-ratio: 1/1){.tab__body{height:calc(100% - 35px);width:100%}}.tab__body:focus-visible{outline:3px solid var(--accent-color);outline-offset:-3px}.tab__body::-webkit-scrollbar{width:10px;border-left:1px solid var(--secondary-color);background:var(--secondary-background)}.tab__body::-webkit-scrollbar-thumb{background:var(--secondary-color);border-left:1px solid var(--secondary-color)}.tab__body__content{max-width:90vw;min-width:calc(50vw - 14px);padding:15px;margin:0 auto}@media (min-aspect-ratio: 1/1){.tab__body__content{max-width:70vw;padding:35px 25px}}.tab_group{display:flex;position:relative;background:var(--secondary-background);flex:1;flex-flow:column nowrap;min-height:50vh;min-width:auto}@media (min-aspect-ratio: 1/1){.tab_group{height:100%;min-width:50vw;min-height:auto;flex-direction:row}}.tab_group .tab__body{position:absolute;left:35px;top:0}@media (min-aspect-ratio: 1/1){.tab_group .tab__body{left:0;top:35px}}.tab_group+.tab_group{border-top:3px solid var(--accent-color)}@media (min-aspect-ratio: 1/1){.tab_group+.tab_group{border-top:none}}.highlight{counter-reset:line;text-align:left;margin-bottom:10px}.highlight--linenos .highlight__line:before{position:absolute;counter-increment:line;content:counter(line);height:100%;border-right:1px solid var(--main-color);color:var(--main-color);width:35px;padding:0 10px 0 0;text-align:right;left:0;cursor:default}.highlight--linenos .highlight__line:hover:before{color:var(--accent-color)}.highlight__line{display:block;position:relative;padding-left:50px;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}.highlight__line:hover{background:var(--codeline-hover-background);opacity:1}.highlight__line--scrollable-code{white-space:pre;overflow-wrap:normal}.highlight__line:empty:after{content:" "}.highlight__language{display:inline-block;padding:0 10px;background:var(--main-background);user-select:none;border-bottom:none;color:var(--accent-color)}.highlight__code{font-size:1.7rem;width:100%;border:1px solid var(--accent-color);border-left:5px solid var(--accent-color);padding:5px}.highlight__code--scrollable-code{overflow-x:scroll}.highlight+br{display:none}#content,.card,.card1{margin:0!important}.cloze{color:var(--cloze-color)!important;background:var(--cloze-background);font-weight:700;padding:1px 5px;border-radius:3px} +/*! +This UI theme is based on: +Tokyo Night Storm theme - https://github.com/tokyo-night/tokyo-night-vscode-theme + +Custom Ui theme made by @MarkoSagadin, 2025 + */ +/*! +This Highlight theme is based on: +Tokyo Night Storm - https://github.com/tokyo-night/tokyo-night-vscode-theme + +Custom Highlight theme made by @MarkoSagadin, 2025 + */ +/*! +This Highlight tokens should be used with: +- Tokyo Night Day +- Tokyo Night Storm + */