settings/theme/Yaru/Code-block

settings/theme/Yaru | #Yaru

How to use: @import "/api/code/nremiel/settings%2Ftheme%2FYaru%2FCode-block/style.css";

style.css

code:style.css

@import "/api/code/nremiel/settings%2Ftheme%2FYaru%2FCode-block/light.css";

@import "/api/code/nremiel/settings%2Ftheme%2FYaru%2FCode-block/dark.css";

@media (prefers-color-scheme: light) {

:root,

body,

body>* {

--code-block-color-scheme: "nremiel.yaru";

}

@media screen and (prefers-color-scheme: dark) {

:root,

body,

body {

--code-block-color-scheme: "nremiel.yaru-dark";

}

Koloraroj

Hela

settings/theme/osto

code:light.css

@import "/api/code/nremiel/settings%2Ftheme%2FYaru%2FCode-block/common.css";

@container style(--code-block-color-scheme: "nremiel.yaru") {

:root,

body,

* {

--is-yaru: y;

--yaru-color-palette: "yaru";

}

.code,

.code-block,

span.code-block,

code.code-body,

code.highlight {

--c-caret-cursor: var(--c-tx-cursor);

--c-bg-code: var(--c-bg-text);

--c-bg-code: var(--c-light-3);

--c-tx-code: var(--c-tx-text);

--c-bg-console: rgb(31, 31, 31);

--c-tx-console: var(--c-light-4);

/* Diff */

--c-tx-diff-added-line: var(--c-green-5);

--c-tx-diff-changed-line: var(--c-orange-4);

--c-tx-diff-diff-file: var(--c-blue-4);

--c-tx-diff-location: var(--c-yellow-5);

--c-tx-diff-removed-line: var(--c-red-1);

/* Global Styles */

--c-bg-background-pattern: var(--c-light-2);

--c-tx-bracket-match: var(--c-green-5);

--fw-bracket-match: bold;

--c-bg-current-line: var(--c-light-3);

--c-bg-current-line: hsl(from var(--c-light-4) h s l / 5%);

--c-bg-current-line-number: var(--c-light-3);

--c-tx-current-line-number: var(--c-light-7);

--c-tx-cursor: var(--c-orange-5);

--c-tx-draw-spaces: var(--c-light-6);

--c-bg-line-numbers: var(--c-light-2);

--c-tx-line-numbers: var(--c-light-6);

--c-bg-map-overlay: var(--c-dark-1);

--c-bg-right-margin: var(--c-dark-1);

--c-tx-right-margin: var(--c-dark-1);

--c-bg-search-match: var(--c-green-1);

--c-tx-search-match: var(--c-dark-4);

--c-bg-text: var(--c-light-2);

--c-tx-text: var(--c-dark-3);

/* Defaults */

--c-tx-base-n-integer: var(--c-purple-4);

--c-tx-boolean: var(--c-purple-4);

--c-tx-comment: var(--c-purple-4);

--fs-comment: italic;

--c-tx-constant: var(--c-purple-4);

--c-tx-decimal: var(--c-purple-4);

--txd-deletion: line-through;

--c-tx-doc-comment-element: var(--c-dark-3);

--c-tx-floating-point: var(--c-purple-4);

--c-tx-function: var(--c-purple-3);

--fw-function: bold;

--c-tx-heading: var(--c-purple-5);

--fw-heading: bold;

--c-tx-keyword: var(--c-green-5);

--fw-keyword: bold;

--txds-link-destination: var(--c-blue-3) underline;

--fs-link-destination: italic;

--c-tx-link-text: var(--c-red-3);

--c-tx-list-marker: var(--c-orange-5);

--fw-list-marker: bold;

--txds-net-address: var(--c-blue-3) underline;

--c-tx-number: var(--c-blue-3);

--c-tx-preformatted-section: var(--c-purple-4);

--c-tx-preprocessor: var(--c-dark-6);

--fw-preprocessor: bold;

--c-tx-shebang: var(--c-purple-1);

--fw-shebang: bold;

--c-tx-special-char: var(--c-red-2);

--c-tx-special-char: normal;

--c-tx-string: var(--c-yellow-5);

--fw-tx-strong-emphasis: bold;

--c-tx-type: var(--c-blue-4);

--fw-tx-type: bold;

--txd-underlined: underline;

--txds-warning: wavy var(--c-yellow-4);

/* CSS */

--c-tx-css-id-selector: var(--c-dark-2);

--c-tx-css-property-name: var(--c-dark-2);

--c-tx-css-pseudo-selector: var(--c-purple-2);

--c-tx-css-selector-symbol: var(--c-orange-3);

--c-tx-css-type-selector: var(--c-dark-2);

--fw-css-id-selector: bold;

--fw-css-property-name: bold;

--fw-css-pseudo-selector: bold;

--fw-css-selector-symbol: bold;

--fw-css-type-selector: bold;

--c-tx-css-vendor-specific: var(--c-yellow-5);

/* */

/* La Paledo de Yaru */

/* */

--c-bg-button-interagujo-neutral: rgb(13, 118, 29);

--c-blue-1: #75d3f4;

--c-blue-2: #47c4f1;

--c-blue-3: #19B6EE;

--c-blue-4: #007aa6;

--c-blue-5: #335280;

--c-dark-1: #77767B;

--c-dark-2: #5E5C64;

--c-dark-3: #504E55;

--c-dark-4: #3D3846;

--c-dark-5: #241F31;

--c-dark-6: #000000;

--c-libadwaita-dark: #262626;

--c-libadwaita-dark-alt: #303030;

--c-green-1: #5AED70;

--c-green-2: #47D35C;

--c-green-3: #34B948;

--c-green-4: #219E34;

--c-green-5: #0e8420;

--c-light-1: #FFFFFF;

--c-light-2: #FCFCFC;

--c-light-3: #F6F5F4;

--c-light-4: #DEDDDA;

--c-light-5: #C0BFBC;

--c-light-6: #B0AFAC;

--c-light-7: #9A9996;

--c-orange-1: #F29879;

--c-orange-2: #F08763;

--c-orange-3: #ED764D;

--c-orange-4: #EB6536;

--c-orange-5: #E95420;

--c-purple-1: #924D8B;

--c-purple-2: #762572;

--c-purple-3: #77216F;

--c-purple-4: #5E2750;

--c-purple-5: #2C001E;

--c-red-1: #EA485C;

--c-red-2: #DE374C;

--c-red-3: #D3273B;

--c-red-4: #c7162b;

--c-red-5: #a91224;

--c-yellow-1: #FCCD87;

--c-yellow-2: #FBC16A;

--c-yellow-3: #FBB44C;

--c-yellow-4: #FAA82F;

--c-yellow-5: #F99B11;

--c-libadwaita-dark: #262626;

--c-libadwaita-dark-alt: #303030;

}

Malhela

settings/theme/radiado-dark

code:dark.css

@import "/api/code/nremiel/settings%2Ftheme%2FYaru%2FCode-block/common.css";

@container style(--code-block-color-scheme: "nremiel.yaru-dark") {

:root,

body,

* {

--is-yaru: y;

--yaru-color-palette: "yaru-dark";

}

.code,

.code-block,

span.code-block

code.code-body,

code.highlight {

--c-bg-code: var(--c-libadwaita-dark);

--c-bg-code: hsl(from var(--c-libadwaita-dark) h s 11%);

--c-tx-code: var(--c-light-2);

--c-tx-diff-added-line: var(--c-green-5);

--c-tx-diff-changed-line: var(--c-orange-3);

--c-tx-diff-diff-file: var(--c-blue-2);

--c-tx-diff-location: var(--c-yellow-4);

--c-tx-diff-removed-line: var(--c-red-1);

/* Global Styles */

/* --c-bg-background-pattern: var(--c-libadwaita-dark-alt); */

--c-bg-background-pattern: var(--c-libadwaita-dark);

--c-bg-current-line: var(--c-libadwaita-dark-alt);

--c-bg-current-line-number: var(--c-libadwaita-dark-alt);

--c-bg-line-numbers: var(--c-libadwaita-dark);

--c-tx-bracket-match: var(--green-5);

--c-bg-current-line: var(--libadwaita-dark-alt);

--c-bg-current-line-number: var(--libadwaita-dark-alt);

--c-tx-current-line-number: var(--light-7);

--c-tx-cursor: var(--orange-5);

--c-tx-draw-spaces: var(--dark-3);

--c-bg-line-numbers: var(--libadwaita-dark);

--c-tx-line-numbers: var(--dark-2);

--c-bg-map-overlay: var(--dark-1);

--c-bg-right-margin: var(--dark-1);

--c-tx-right-margin: var(--dark-1);

--c-bg-search-match: var(--green-5);

--c-tx-search-match: var(--light-2);

--c-bg-text: var(--libadwaita-dark);

--c-tx-text: var(--light-5);

/* Defaults */

--c-tx-base-n-integer: var(--c-purple-2);

--c-tx-boolean: var(--c-purple-2);

--c-tx-comment: var(--c-purple-1);

--fs-comment: italic;

--c-tx-constant: var(--c-purple-2);

--c-tx-decimal: var(--c-purple-2);

--txd-deletion: line-through;

--c-tx-doc-comment-element: var(--c-light-7);

--c-tx-floating-point: var(--c-purple-2);

--c-tx-function: var(--c-purple-2);

--fw-function: bold;

--c-tx-heading: var(--c-purple-2);

--fw-heading: bold;

--c-tx-keyword: var(--c-green-5);

--fw-keyword: bold;

--txds-link-destination: var(--c-blue-2) underline;

--fs-link-destination: italic;

--c-tx-link-text: var(--c-red-2);

--c-tx-list-marker: var(--c-orange-5);

--fw-list-marker: bold;

--txds-net-address: var(--c-blue-2) underline;

--c-tx-number: var(--c-blue-2);

--c-tx-preformatted-section: var(--c-purple-2);

--c-tx-preprocessor: var(--c-light-2);

--fw-preprocessor: bold;

--c-tx-shebang: var(--c-purple-1);

--fw-shebang: bold;

--c-tx-special-char: var(--c-red-1);

--c-tx-special-char: normal;

--c-tx-string: var(--c-yellow-2);

--fw-tx-strong-emphasis: bold;

--c-tx-type: var(--c-blue-2);

--fw-tx-type: bold;

--txd-underlined: underline;

--txds-warning: wavy var(--c-yellow-4);

/* CSS */

--c-tx-css-id-selector: var(--c-light-2);

--c-tx-css-property-name: var(--c-light-2);

--c-tx-css-pseudo-selector: var(--c-purple-2);

--c-tx-css-selector-symbol: var(--c-orange-3);

--c-tx-css-type-selector: var(--c-light-2);

--fw-css-id-selector: bold;

--fw-css-property-name: bold;

--fw-css-pseudo-selector: bold;

--fw-css-selector-symbol: bold;

--fw-css-type-selector: bold;

--c-tx-css-vendor-specific: var(--c-yellow-5);

}

Code-block

code:common.css

@import "/api/code/nremiel/settings%2Ftheme%2FYaru/palette.css";

@container style(--is-yaru: y) {

body>* {

--fs-code-block: 1em;

}

.line .cli {

background-color: var(--c-bg-console);

& .command {

color: var(--c-tx-text);

}

.line {

&.cursor-line span.code-block,

&.cursor-line span.code-block * {

background-color: var(--c-bg-current-line) !important;

caret-color: var(--c-tx-cursor);

}

& .code-block,

& span.code-block {

/* box-shadow: var(--shadow-box-slipo); */

background-color: var(--c-bg-code);

& code.highlight {

font-size: var(--fs-code-block);

font-family: var(--code) !important;

font-feature-settings: var(--ffs-code);

color: var(--c-tx-code);

background-color: var(--c-bg-code);

/* CSS */

& .hljs-comment,

& .hljs-quote {

color: var(--c-tx-comment);

font-style: var(--fs-comment);

}

& .hljs-attribute {

color: var(--c-tx-css-property-name);

font-weight: var(--fw-css-property-name);

}

& .hljs-attr {

/* 変数 */

color: var(--c-tx-text);

color: var(--c-tx-css-property-name);

}

& .hljs-built_in {

color: var(--c-tx-function);

font-weight: var(--fw-function);

}

& .hljs-meta,

& .hljs-meta .hljs-meta-string {

color: var(--c-tx-keyword);

font-weight: var(--fw-keyword);

}

& .hljs-keyword {

color: var(--c-tx-css-id-selector);

font-weight: var(--fw-css-id-selector);

}

& .hljs-addition {

color: var(--c-tx-css-id-selector);

font-weight: var(--fw-css-id-selector);

}

& .hljs-selector-tag {

color: var(--c-tx-css-id-selector);

font-weight: var(--fw-css-id-selector);

}

& .hljs-selector-class {

color: var(--c-tx-css-type-selector);

font-weight: var(--fw-css-type-selector);

}

& .hljs-selector-pseudo {

/* color: var(--c-tx-css-pseudo-selector);

font-weight: var(--fw-css-pseudo-selector); */

}

hljs-selector-attr {

color: var(--c-tx-css-pseudo-selector);

font-weight: var(--fw-css-pseudo-selector);

}

& .hljs-number {

color: var(--c-tx-base-n-integer);

}

& .hljs-string,

& .hljs-literal,

& .hljs-doctag,

& .hljs-regexp {

color: var(--c-tx-string);

}