How do you turn off the new skin?

Question

How do i turn off the new skin? Its horrible, you cant even read the headings anymore, body text is sort of passable.

Who has time to make a user script that will actually, you know fix the design?

Answer 1

To get the Open Sans font back, add this as a user style. You can either use an extension, or your browser's built-in capabilities. Google will tell you how to do it.

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

html, body, h1, h2, h3, h4, p, a, ul, ol, li, input, textarea {
    font-family: 'Open Sans', sans !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

p {
    line-height: 1.5em;
}

#question-header .question-hyperlink {
    font-family: 'Open Sans', sans !important;
}

If you want the red colours back on your buttons, links, tabs, etc, add this:

.s-btn__primary,
.s-btn__filled,
input[type="submit"]:not(.s-btn),
input[type="button"]:not(.s-btn),
button:not(.s-btn),
.button,
a.button,
a.button:visited,
.btn,
.hero-box.double-panel .panel.white .btn {
    border-color: #b03340;
    box-shadow: none;
    background: #ea4a5a;
    color: white;
}

.s-btn__primary:hover,
.s-btn__filled:hover,
.s-btn__filled:active,
input[type="submit"]:not(.s-btn):hover,
input[type="button"]:not(.s-btn):hover,
button:not(.s-btn):hover,
.button:hover,
a.button:hover,
a.button:visited:hover,
.btn:hover,
input[type="submit"]:not(.s-btn):focus,
input[type="button"]:not(.s-btn):focus,
button:not(.s-btn):focus,
.button:focus,
a.button:focus,
a.button:visited:focus,
.btn:focus {
    border-color: #ea4a5a;
    box-shadow: none;
    background: #b03340;
    color: white !important;
}

.s-btn-group {
    margin-top: 10px;
    margin-bottom: 10px;
}

.s-btn__muted.s-btn__outlined,
.s-btn__muted.s-btn__outlined:focus,
.s-btn__muted.s-btn__outlined.is-selected {
    color: #2f3337;
    border-color: #adb3b9;
    box-shadow: none;
}

.s-btn__muted.s-btn__outlined.is-selected {
    background-color: #eeeff1;
}

a,
.s-link,
.started .mod-flair,
.started a:not(.started-link),
.topbar-dialog a,
.topbar-dialog .related-links a {
    color: #ea4a5a;
}

a:hover,
.s-link:hover,
a.s-link__visited:hover,
.s-link.s-link__visited:hover,
a:active,
.s-link:active,
a.s-link__visited:active,
.s-link.s-link__visited:active,
.started .mod-flair:hover,
.started a:not(.started-link):hover,
.started-link:hover,
#sidebar .community-bulletin .bulletin-item-content a:hover,
.topbar-dialog a:visited,
.topbar-dialog.review-dialog .modal-content li > a:visited,
.topbar-dialog .related-links a:visited,
.topbar-dialog.help-dialog a:visited,
.topbar-dialog.siteSwitcher-dialog a:visited,
.topbar-dialog .header .-right a {
    color: #b03340 !important;
}

.mod-flair {
    color: #ea4a5a;
}

.bounty-indicator-tab {
    background-color: #ea4a5a;
}

.s-badge__bounty {
    background-color: #ea4a5a;
}

#tabs a.youarehere:before,
.tabs a.youarehere:before {
    background-color: #ea4a5a;
}

.page-numbers.current {
    background-color: #ea4a5a;
}

.subtabs a.youarehere,
.filter a.youarehere,
.subtabs a.active,
.filter a.active {
    border-color: #ea4a5a;
}

.subtabs a.youarehere,
.filter a.youarehere,
.subtabs a.active,
.filter a.active,
.subtabs a:hover,
.filter a:hover,
.subtabs a.youarehere:hover,
.filter a.youarehere:hover,
.subtabs a.active:hover,
.filter a.active:hover {
    border-color: #eeeff1;
}

.top-bar .indicator-badge._important {
    background-color: #ea4a5a;
}

.top-bar .-secondary .-link._danger-indicator:after {
    background: #ea4a5a;
}

If you want to get rid of those silly borders everywhere:

.flush-left {
    border: 0;
}

.question-summary {
    padding: 15px 10px;
    border: 0;
    border-radius: 3px;
    margin-left: 8px;
}

.subheader {
    border: 0;
}

.dashboard-item {
    padding: 15px 0;
    border-bottom: 0;
}

#question-header {
    border: 0;
    padding-bottom: 15px;
}

.comments {
    border: 0;
}

ul.comments-list .comment > * {
    border: 0;
    padding: 10px 0;
}

If you want all of these shenanigans plus some extras: download the FF code here (for other uses, just delete the FF wrapper around the CSS)

Example of the homepage:

Full size

Example of the homepage with dark mode (external extension) turned on:

Full size

Answer 2

YOU DON'T

It's here to stay 😿