how can I add root css code to custom css?

murdocklawless

there are main root colors below, how can I add them to the custom css?

I added like this but no effect;

:root {
--link-color: #ca003c;
}

:root {
    --primary-color: #c3073f;
    --secondary-color: #4e4e50;
    --body-bg: #212121;
    --body-bg-shaded: #19191a;
    --body-bg-light: #2d2d2e;
    --body-bg-faded: rgba(33, 33, 33, 0.93);
    --text-color: #ddd;
    --link-color: #ca003c;
    --heading-color: #ddd;
    --muted-color: #7e7e81;
    --muted-color-light: #98989a;
    --muted-color-dark: #000;
    --shadow-color: rgba(0, 0, 0, 0.5);
    --control-bg: #19191a;
    --control-bg-light: #212121;
    --control-bg-shaded: #0f0f0f;
    --control-color: #7e7e81;
    --error-color: #d83e3e;
    --header-bg: #212121;
    --header-color: #c3073f;
    --header-control-bg: #19191a;
    --header-control-color: #7e7e81;
    --overlay-bg: rgba(20, 20, 21, 0.9);
    --code-bg: #19191a;
    --code-color: #fff;
    --alert-bg: #fff2ae;
    --alert-color: #ad6c00;
    --alert-error-bg: #d83e3e;
    --alert-error-color: #fff;
    --alert-success-bg: #b4f1af;
    --alert-success-color: #33722d;
    --switch-on-color: #58a400;
    --switch-off-color: #d0021b;
    --enabled-color: #2ECC40;
    --disabled-color: #FF4136;
    --validation-error-color: #d83e3e;
    --avatar-bg: var(--control-bg);
    --badge-bg: var(--muted-color);
    --badge-color: #fff;
    --badge-hidden-bg: #888;
    --usercard-bg: var(--control-bg);
    --hero-bg: #19191a;
    --hero-color: #7e7e81;
    --tooltip-bg: rgba(0, 0, 0, 0.9);
    --tooltip-color: #fff;
    --online-user-circle-color: #7fba00;
    --discussion-title-color: #888889;
    --discussion-list-item-bg-hover: #1d1d1e;
    --button-color: #7e7e81;
    --button-bg: #19191a;
    --button-bg-hover: #0d0d0d;
    --button-bg-active: #000;
    --button-bg-disabled: #19191a;
    --button-primary-color: #212121;
    --button-primary-bg: #c3073f;
    --button-primary-bg-hover: #aa0637;
    --button-primary-bg-active: #92052f;
    --button-primary-bg-disabled: #c3073f;
    --control-danger-color: #a88;
    --control-danger-bg: #411;
    --control-danger-bg-hover: #300c0c;
    --control-danger-bg-active: #1b0707;
    --control-danger-bg-disabled: #411;
    --muted-more-color: #656567;
    --muted-more-bg: rgba(101, 101, 103, 0.3);
    --muted-more-bg-hover: rgba(88, 88, 90, 0.35);
    --muted-more-bg-active: rgba(76, 76, 77, 0.4);
    --muted-more-bg-disabled: rgba(101, 101, 103, 0.3);
    --button-inverted-color: #7e7e81;
    --button-inverted-bg: #212121;
    --button-inverted-bg-hover: #141415;
    --button-inverted-bg-active: #080808;
    --button-inverted-bg-disabled: #212121;
    --light-content-color: #fff;
    --light-content-control-color: #fff;
    --light-content-control-bg: rgba(0, 0, 0, 0.1);
    --light-content-control-bg-shaded: rgba(0, 0, 0, 0.2);
    --light-content-control-bg-fadedin: rgba(0, 0, 0, 0.15);
    --header-colored-color: #c3073f;
    --header-colored-control-color: #7e7e81;
    --header-colored-control-bg: #19191a;
    --header-colored-control-bg-shaded: #0d0d0d;
    --header-colored-control-bg-fadedin: #19191a;
    --border-radius: 14px;
    --drawer-width: 270px;
    --pane-width: 400px;
    --header-height: 52px;
    --header-height-phone: 46px;
    --zindex-header: 1000;
    --zindex-pane: 1010;
    --zindex-composer: 1020;
    --zindex-dropdown: 1030;
    --zindex-modal-background: 1040;
    --zindex-modal: 1050;
    --zindex-alerts: 1060;
    --zindex-tooltip: 1070;
    --flarum-screen: none;
    --screen-phone-max: 767.98px;
    --screen-tablet: 768px;
    --screen-tablet-max: 991.98px;
    --screen-desktop: 992px;
    --screen-desktop-max: 1199.98px;
    --screen-desktop-hd: 1200px
}

clarkwinkelmann

It works for me on Flarum 1.2. Your code example correctly changes the color of links in posts.

Flarum is not fully switched to CSS variables just yet, and there are also many styles overriding each other.

For the time being, it's best to first override the Less variables in custom CSS, which will automatically cascade to the matching CSS variable(s), as well as all Less macros/mixins and other third-party extensions that still rely on the Less variables instead of the new CSS variables.

If you don't want to use Less at all, you might need to override multiple of the CSS variables, and possibly add some additional CSS code to override colors in places that don't use the CSS variables yet.

murdocklawless

clarkwinkelmann I tried it at xampp local and it didn't work but when I tried at real site it worked.

Justoverclock

murdocklawless have you the debug more set to true?

murdocklawless

Justoverclock no I did not.

wolfman

It might be possible, that Flarums CSS is loaded after your custom CSS. Try adding a !important.

:root {
  --link-color: #ca003c !important;
}

Justoverclock

murdocklawless try with debug set to true to on your local Instance

murdocklawless

Justoverclock how do I do that?

askvortsov

murdocklawless edit the config.php file