Тред кастомных тем объявляется открытым!

Аноним OP 2026-10-12 09:00:01 #1 №360930

179179560107124401.png

с новым движком пришла возможность пилить свои css для ежача, в треде пилим делимся своими темами собраными на коленке

Аноним 2026-10-12 09:00:45 #2 №360931

>>360930
Так и на старом движке была такая возможность

Аноним 2026-10-12 09:01:13 #3 №360933

>>360931
круто

Аноним 2026-10-12 09:02:31 #4 №360934

>>360930
Но раз пошло такое дело, вот тема а-ля "двач"


:root {
  --ch-bg: #eee;
  --ch-postbg: #ddd;
  --ch-highlight: #eedacb;
  --ch-text: #333;
  --ch-alt: #5d5d5d;
  --ch-link: #f60;
  --ch-hover: #a74300;
  --ch-title: #004a99;
  --ch-green: #789922;
  --ch-spec: #800080;
  --ch-border: #d2d2d2;
  --ch-spoiler: #bbb;
  --ch-btnbg: #eaeaea;
  --ch-btnborder: #e0e0e0;
  --ch-btnhover: #cacaca;
  --ch-inputbg: #f5f5f5;
  --ch-shadow: 0 2px 8px rgba(0, 0, 0, .18);

  --color-bg: var(--ch-bg);
  --color-surface: var(--ch-postbg);
  --color-surface-2: var(--ch-btnbg);
  --color-header: var(--ch-bg);
  --color-text: var(--ch-text);
  --color-muted: var(--ch-alt);
  --color-border: var(--ch-border);
  --color-accent: var(--ch-link);
  --color-accent-ink: #fff;
  --color-accent-hover: var(--ch-hover);
  --color-quote: var(--ch-green);
  --color-subject: var(--ch-title);
  --color-trip: #228854;
  --color-capcode: #c00;
  --color-danger: #c33;

  --form-field-bg: var(--ch-inputbg);
  --form-border: var(--ch-btnborder);
  --form-border-focus: var(--ch-btnhover);
  --form-text: var(--ch-text);

  --font-base: "Trebuchet MS", Trebuchet, Tahoma, Arial, sans-serif;
  --font-size: 15px;
  --line-height: 1.35;
  --radius: 3px;
  --radius-lg: 3px;
  --shadow: var(--ch-shadow);
}

:root[data-theme='dark'] {
  --ch-bg: #15202b;
  --ch-postbg: #192734;
  --ch-highlight: #2a3a4a;
  --ch-text: #ccc;
  --ch-alt: #7d7d7d;
  --ch-link: #c3672a;
  --ch-hover: #e08a50;
  --ch-title: #6995c5;
  --ch-green: #789922;
  --ch-spec: #b070b0;
  --ch-border: #38444d;
  --ch-spoiler: #000;
  --ch-btnbg: #192734;
  --ch-btnborder: #38444d;
  --ch-btnhover: #22303c;
  --ch-inputbg: #10171e;
  --ch-shadow: 0 2px 10px rgba(0, 0, 0, .55);
  --color-accent-ink: #fff;
}

body { background: var(--ch-bg) !important; color: var(--ch-text); }
a:hover { color: var(--ch-hover); }

html body .post--op {
  background: transparent !important;
  border-left: 0 !important;
  padding: 4px 2px !important;
}
html body .post--reply {
  background: var(--ch-postbg) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 3px !important;
  padding: 4px 8px 6px !important;
  margin: 0 4px 4px !important;
}
html body .post--mine { border-color: var(--ch-green) !important; }
html body .post--new { box-shadow: inset 2px 0 0 var(--ch-link) !important; }

html body .post.post--flash { background: var(--ch-highlight) !important; }

html body .post__intro { margin-bottom: 4px !important; font-size: 13.5px; }
html body .post__subject { color: var(--ch-title) !important; font-size: 1.1em; }
html body .post__name { color: var(--ch-alt) !important; }
html body .post__name--op { color: var(--ch-green) !important; }
html body .post__time { color: var(--ch-alt) !important; }
html body .post__no,
html body .post__num { color: var(--ch-alt) !important; }
html body .post__no:hover,
html body .post__num:hover { color: var(--ch-hover) !important; }
html body .post__counter { color: var(--ch-green) !important; font-weight: 400 !important; }
html body .post__reply-btn {
  border-color: var(--ch-btnborder) !important;
  background: var(--ch-btnbg) !important;
  color: var(--ch-text) !important;
  padding: 1px 6px !important;
  border-radius: 3px !important;
}
html body .post__reply-btn:hover { background: var(--ch-btnhover) !important; color: var(--ch-text) !important; }
html body .post__refs,
html body .post__refs a { font-size: 12px; }

html body .post__body a { color: var(--ch-link); }
html body .post__body a:hover { color: var(--ch-hover); }
html body .post__body .quote { color: var(--ch-green) !important; }
html body .post__body .heading { color: var(--ch-spec) !important; }
html body .post__body .spoiler {
  background: var(--ch-spoiler) !important;
  color: transparent !important;
}
html body .post__body .spoiler:hover { color: var(--ch-text) !important; }
html body .post__body code,
html body .post__body pre { background: var(--ch-btnbg) !important; border-color: var(--ch-border) !important; }

html body .index__thread {
  border-top: 1px solid var(--ch-border);
  padding-top: 8px;
  margin-top: 8px;
}
html body .index__omitted,
html body .index__omitted-link { color: var(--ch-alt) !important; }

html body .site-header {
  background: var(--ch-bg) !important;
  border-bottom: 1px solid var(--ch-border) !important;
  box-shadow: none !important;
}
html body .site-header__link,
html body .site-header__board { color: var(--ch-link) !important; }
html body .site-header__link:hover,
html body .site-header__board:hover { color: var(--ch-hover) !important; }
html body .board-title,
html body .board-title__link { color: var(--ch-title) !important; }

html body .sidebar {
  gap: 10px !important;
  padding: 4px 8px !important;
  font-size: 13.5px;
  line-height: 1.3;
}
html body .sidebar__section {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html body .sidebar__title {
  background: var(--ch-postbg) !important;
  color: var(--ch-text) !important;
  padding: 1px 2px !important;
  margin-bottom: 5px;
  font-weight: 400 !important;
  font-size: 13.5px;
  line-height: 17.5px;
}
html body .sidebar__list {
  padding: 0 0 0 15px !important;
  gap: 0 !important;
}
html body .sidebar__list li { line-height: 20px; }
html body .sidebar__link {
  color: var(--ch-link) !important;
  font-size: 15px !important;
  line-height: 20px;
}
html body .sidebar__link:hover { color: var(--ch-hover) !important; }

html body .catalog__grid {
  grid-template-columns: repeat(auto-fill, 240px) !important;
  justify-content: center;
  gap: 20px !important;
}
html body .catalog__cell {
  height: 400px !important;
  padding: 0 !important;
  background: var(--ch-postbg) !important;
  border: 1px solid var(--ch-btnhover) !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  line-height: normal !important;
  text-align: center;
  transform: none !important;
}
html body .catalog__cell:hover { border-color: var(--ch-alt) !important; }
html body .catalog__thumb {
  width: auto !important;
  max-width: 216px;
  height: auto !important;
  max-height: 220px;
  margin: 10px auto !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html body .catalog__thumb--none {
  width: 216px !important;
  height: 120px !important;
  background: var(--ch-bg) !important;
}
html body .catalog__stats {
  justify-content: center;
  margin: 0 !important;
  padding: 2px;
  background: var(--ch-btnhover);
  color: var(--ch-text) !important;
}
html body .catalog__subject {
  padding: 0 4px 2px;
  background: var(--ch-btnhover);
  color: var(--ch-text) !important;
  white-space: normal !important;
  max-height: 4.6em;
}
html body .catalog__excerpt {
  padding: 6px;
  font-size: 12.6px;
  opacity: 1 !important;
  color: var(--ch-text) !important;
}

html body .post__thumb-link[data-gal-type='video'] .post__thumb {
  border: 1px dashed var(--ch-alt) !important;
  border-radius: 0 !important;
}
html body .post__thumb-link[data-gal-type='video'] .post__play { display: none !important; }
html body .post__thumb { border-radius: 0 !important; }

html body .btn,
html body .pf__tool,
html body .ef__tool,
html body .rf__cancel,
html body .scroll-btn {
  background: var(--ch-btnbg) !important;
  color: var(--ch-text) !important;
  border: 1px solid var(--ch-btnborder) !important;
  border-radius: 3px !important;
}
html body .btn:hover,
html body .pf__tool:hover,
html body .ef__tool:hover,
html body .rf__cancel:hover,
html body .scroll-btn:hover { background: var(--ch-btnhover) !important; color: var(--ch-text) !important; }
html body .pf__tool--active,
html body .ef__tool--active { background: var(--ch-btnhover) !important; }
html body input:not([type='checkbox']):not([type='radio']):not([type='range']),
html body textarea,
html body select {
  background: var(--ch-inputbg);
  color: var(--ch-text);
  border-color: var(--ch-btnborder);
}
html body .pf__drop--over { background: var(--ch-highlight) !important; }
html body .pf__thumb--audio { background: var(--ch-postbg) !important; }
html body .pf__error { background: #fdd !important; color: #900 !important; }
:root[data-theme='dark'] body .pf__error { background: #3a1e22 !important; color: #f99 !important; }

html body .modal,
html body .settings__box,
html body .rf__box,
html body .ef__box,
html body .hk__box {
  background: var(--ch-bg) !important;
  color: var(--ch-text) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 3px !important;
  box-shadow: var(--ch-shadow) !important;
}
html body .modal__bar,
html body .settings__tablist {
  background: var(--ch-postbg) !important;
  border-color: var(--ch-border) !important;
}
html body .modal__title,
html body .rf__title,
html body .ef__title,
html body .hk__title { color: var(--ch-title) !important; }
html body .settings__tab { color: var(--ch-text) !important; }
html body .settings__tab:hover:not(.settings__tab--active) { background: var(--ch-btnhover) !important; }
html body .settings__tab--active { background: var(--ch-bg) !important; color: var(--ch-link) !important; font-weight: 700; }
html body .modal__close:hover,
html body .rf__close:hover,
html body .ef__close:hover,
html body .settings__close:hover { color: var(--ch-hover) !important; }
html body .hk kbd { background: var(--ch-btnbg) !important; color: var(--ch-text) !important; }
html body .hk__close { background: var(--ch-btnbg) !important; color: var(--ch-text) !important; border: 1px solid var(--ch-btnborder) !important; }

html body .pm__card {
  background: var(--ch-bg) !important;
  border: 1px solid var(--ch-border) !important;
  border-radius: 3px !important;
  box-shadow: var(--ch-shadow) !important;
}
html body .pm__card::before,
html body .pm__glow { display: none !important; }
html body .pm__icon { background: var(--ch-postbg) !important; color: var(--ch-link) !important; box-shadow: none !important; }
html body .pm__eyebrow { color: var(--ch-alt) !important; }
html body .pm__body { background: var(--ch-postbg) !important; border-color: var(--ch-border) !important; }

html body .pn-toast {
  background: var(--ch-postbg) !important;
  border: 1px solid var(--ch-border) !important;
  border-left: 3px solid var(--ch-link) !important;
  border-radius: 3px !important;
  box-shadow: var(--ch-shadow) !important;
}
html body .pn-toast--reply { border-left-color: var(--ch-green) !important; }
html body .pn-type,
html body .pn-name { color: var(--ch-link) !important; }
html body .pn-toast--reply .pn-type { color: var(--ch-green) !important; }
html body .pn-where { color: var(--ch-alt) !important; }
html body .pn-text { color: var(--ch-text) !important; }
html body .pn-close { background: transparent !important; color: var(--ch-alt) !important; }
html body .pn-close:hover { background: var(--ch-btnhover) !important; color: var(--ch-text) !important; }

html body .pv {
  background: var(--ch-postbg) !important;
  border: 1px solid var(--ch-btnhover) !important;
  border-radius: 3px !important;
  box-shadow: var(--ch-shadow) !important;
}

html body .favpanel__head { background: var(--ch-postbg) !important; border-color: var(--ch-border) !important; }
html body .favpanel__body { background: var(--ch-bg) !important; border-color: var(--ch-border) !important; }
html body .favpanel__toggle,
html body .favpanel__folder-head { color: var(--ch-title) !important; }

html body .ap {
  background: var(--ch-btnbg) !important;
  border: 1px solid var(--ch-btnborder) !important;
  box-shadow: none !important;
  color: var(--ch-text) !important;
}
html body .ap--floating { box-shadow: var(--ch-shadow) !important; }
html body .ap__btn,
html body .ap__grip,
html body .ap__x,
html body .ap__pop {
  background: var(--ch-bg) !important;
  border: 1px solid var(--ch-btnborder) !important;
  color: var(--ch-text) !important;
}
html body .ap__btn:hover,
html body .ap__grip:hover,
html body .ap__x:hover,
html body .ap__pop:hover { background: var(--ch-btnhover) !important; color: var(--ch-text) !important; }

Аноним 2026-10-12 09:03:30 #5 №360935

>>360934
это ты ее автор? если да то подожди чутка, мне пару вопросов тебе задать надо

Аноним 2026-10-12 09:14:59 #6 №360938

начну со своей облачной темы, 3.0, теперь облака не скролятся а также уведомления тоже перекрашены, это можно сделать напрямую выделив элемент и поменяв значения background и color на свои, это можго сделать с любым элементом, но если будете менять .settingstab.svelte-1u3w06f то сразу после него сразу ставьте .settingstab--active.svelte-1u3w06f и меняйте те же значения что поменяли до на стандартные, иначе активную вкладу перекроет и ее подсвечивание не будет видно
еще по одному аллаху известной причине из моих старых постов с темой стерлась ссылка на изображение что сломало глав фичу, и я даже не знаю что делать
:root {
--color-bg: url("");
--color-surface: #ececfb;
--color-surface-2: #dedeff;
--color-header: #ececfb;
--color-text: #979797;
--color-muted: #5d5d5d;
--color-border: #454362;
--color-accent: #79adff;
--color-accent-ink: #ffffff;
--color-accent-hover:#005a88;
--color-quote: #7780ff;;
--color-subject: #0f0f4f
--testvar: #000000;

.pn-toast.svelte-kjdupg {
background:var(--color-surface);
color:#ffffff;

}

body {
background-attachment: fixed;
}
}

Аноним 2026-10-12 09:20:40 #7 №360939

>>360938
Ты бы хоть разметку воткнул (выделяешь, жмешь "код")

Аноним 2026-10-12 10:37:57 #8 №360948

>>360934
А на Дваче был шрифт Требушет?

Аноним 2026-10-12 10:52:09 #9 №360959

А встроенные уже все попробовали? Я стал на сепии сидеть. Родная тёмная тема супер, остальные немного неудачные

Аноним 2026-10-12 10:54:53 #10 №360960

179180249370256391.png

>>360948

Аноним 2026-10-12 12:51:44 #11 №361089

>>360930
КАК КРАСИВО
Я ТОЖЕ ТАК ХОЧУ!!!!!!

Аноним 2026-10-12 13:14:46 #12 №361105

>>360960
Я думал, там только Сегое УИ.

Аноним 2026-10-12 17:01:04 #13 №361172

>>361089
ну это и есть моя тема с облочками, только копируй быстро, почему то из постов ссылки через какое то время стираются

  :root {
     --color-bg: url("");
    --color-surface: #ececfb;
    --color-surface-2: #dedeff;
    --color-header: #ececfb;
    --color-text: #979797;
    --color-muted: #5d5d5d;
    --color-border: #454362;
    --color-accent: #79adff;
    --color-accent-ink: #ffffff;
    --color-accent-hover:#005a88;
    --color-quote: #7780ff;;
    --color-subject: #0f0f4f
    --testvar: #000000;


.pn-toast.svelte-kjdupg {
background:var(--color-surface);
color:#ffffff;

  }

body {
background-attachment: fixed;
}
}

Аноним 2026-10-12 17:06:51 #14 №361176

>>361105
так сегое уи же под рукаписный косит

Аноним 2026-10-12 17:07:20 #15 №361177

>>361176
Это Segoe Script

Аноним 2026-10-12 17:12:14 #16 №361183

>>361172
Ой, спасибо тебе большое, но я не имел ввиду тоже самое, хочу сам попробовать сделать.
Хотя твоя тема очень очень красивая и я ее схороню.

Аноним 2026-10-12 17:20:57 #17 №361189

>>361172
>почему то из постов ссылки через какое то время стираются
Потому что там айпи логгер

Аноним 2026-10-12 17:22:34 #18 №361190

>>361189
Мяу

Аноним 2026-10-12 18:42:39 #19 №361263