Skip to content

DuckDuckGo: Styled by misspent

Screenshot of DuckDuckGo: Styled
Homepage Write a review Install Get Stylus

Details

Authormisspent

LicenseMIT

Categoryduckduckgo

Created

Updated

Size32 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

⛔ Best on 1440p+ monitors; not tested on a 1080p display given that I don't have one.

Notes

📢 IMPORTANT: Your browser has to support :has selector for this and most of my other themes to work properly | Set layout.css.has-selector.enabled to “true” in about:config on Firefox for :has selector to work.
📢 IMPORTANT: Add/remove an “M” at the end of the “duckduckgo.co(m)” below each snippet section for the snippet to work/not
📢 IMPORTANT: If you have issues, please click the “Homepage” button and go to issues on the GitHub page or click this.
📢 IMPORTANT: Enable Dark Mode in quick settings
Other: Zoom 90% on 1440p for ultimate climax (CTRL+scroll wheel up/down)

My Other Themes

🛠️ Random bs to you
If you have a 1080p display and know CSS, any help with making it look “right” will be greatly appreciated. You'll have to open something on my GitHub to be able to contact me. Hopefully I respond fast given how I get Discord notifications (massive QoL).
I do not use DuckDuckGo as my search engine; I use Brave search engine. So if something does get changed, I may not know.

Preview

1 DuckDuckGo All Page Image

✅ Features

  • ✔️ Everything Square
  • ✔️ Variables so you can tweak yourself
  • ✔️ More Results on All & News sections
  • ❌ If you have a 1080p monitor, you might need to modify the classes for which I haven't defined variables
  • ⭕ Work in progress, not perfect and more than likely never will be
  • ⛔ Works in different ways depending on your resolution, I only have 1440p display
  • ⛔ I use the LibreWolf Browser

📷 More Screenshots

(Previews/screenshots may become out-of-date at some point)

More News Results

3 DuckDuckGo News Page Image

Videos Section Results

2 DuckDuckGo Videos Page Image

Make sure your settings are this (Infinite Scroll should be fine?)

5 DuckDuckGo Settings Image

📜 Configurable & Extra's

⌨ Variables

:root {
    /* Main colours */
    --background-primary: #101010;
    --background-secondary: #161616;
    --background-tertiary: #181818;
    --background-snippet: #151515;
    --background-other: #121212; /* Related searches container background */
    /* Buttons/Other */
    --more-buttons: #202020;
    --more-button-hover: #252525;
    --border-color: #202020;
    --Result-Seperator: none; /* none = off, initial = on | Settings this to "none" = infinite scrolling effect... Looks hot */
    /* Optional */
    --Website-link-Directory-tree: inherit; /* none = off, inherit = on */
    --Feedback-button: none; /* none = off, flex = on */
    --main-footer: none; /* none = off, block = on */
    /* Results, work together | Increase/decrease other values by 1 when changing "--Result-Snippets" | DO NOT GO LOWER THAN 2! */
    --Result-Snippets: 3;
    --Searches-Related-Start: 3;
    --Searches-Related-End: 4;
    --News-Section-Snippets: 3;
   /* Removals | none = off, block = on */
   --Related-Searches-Container: none; /* Related Searches */
   --Recent-News-Container: none; /* Recent News */
   --Images-for-Container: none; /* Images for */
   --Videos-Container: none; /* Videos */
   --DuckDuckGo-Logo-Top: none; /* DDG Icon */
}

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name         DuckDuckGo: Styled
@version      20241212.11.27
@namespace    https://userstyles.world/user/misspent
@description  A configurable DuckDuckGo Theme
@author       misspent
@license      MIT
==/UserStyle== */

@-moz-document domain("duckduckgo.com") {
/* |========> ❗ Main Section <========| */ /* ========> MAKE PAGE ZOOM 80-90%! (ctrl + scroll wheel down) <======== */


:root {
    /* Main colours */
    --background-primary: #101010;
    --background-secondary: #161616;
    --background-tertiary: #181818;
    --background-snippet: #151515;
    --background-other: #121212; /* Related searches container background */
    /* Buttons/Other */
    --more-buttons: #202020;
    --more-button-hover: #252525;
    --border-color: #202020;
    --Result-Seperator: none; /* none = off, initial = on | Settings this to "none" = infinite scrolling effect... Looks hot */
    /* Optional */
    --Website-link-Directory-tree: inherit; /* none = off, inherit = on */
    --Feedback-button: none; /* none = off, flex = on */
    --main-footer: none; /* none = off, block = on */
    /* Results, work together | Increase/decrease other values by 1 when changing "--Result-Snippets" | DO NOT GO LOWER THAN 2! */
    --Result-Snippets: 3;
    --Searches-Related-Start: 3;
    --Searches-Related-End: 4;
	--News-Section-Snippets: 3;
   /* Removals | none = off, block = on */
   --Recent-News-Container: none; /* Recent News */
   --Videos-Container: none; /* Videos */
    /* Other / new */
    --module-margin-with-feedback: 0;
}

*, :before, :after {border-radius: 0px !important; box-shadow: none !important;} /* Everything squared! Yay + No shadows */

/* What the fuck?!? Infinite Scroll Moment */
[arial-label*="Page"] {display: none;}




.header__search-wrap {padding-left: var(--gutter-md-alt);}
#react-duckbar[data-testid="duckbar"] > div:first-child {margin-left: var(--gutter-md-alt);}
#web_content_wrapper #react-layout [data-testid="web-vertical"]:first-child {margin-left: var(--gutter-md-alt);}





/* ===> NEW | Top part - Header & Nav bar <=== */
#header #header-non-nav {
    display: flex;
    justify-content: center;
}
#header .header__search-wrap {
    width: 660px;
    max-width: 660px;
    padding: 0;
    margin: 0px 7px 0px 0px;
}
#header .header__search-wrap .header__logo-wrap {margin: 0;}
#header #react-duckbar[data-testid="duckbar"] > div:first-child > div:first-child:has(nav) {justify-content: center;}









/* New fixes | 2024 */
[data-layout="about"] {padding: 0 !important;}
[data-testid="web-vertical"] .RHsWhMlxc4ETEMDS9ltw::before,
[data-testid="web-vertical"] .RHsWhMlxc4ETEMDS9ltw::after {display: none !important;}
[data-testid="mainline"] [data-layout="organic"] [aria-label*="Page"] {display: none;}








/* => Main background <= */
.header-wrap, .header-wrap--home, .is-link-style-exp .header-wrap {
    background: var(--background-secondary) !important;
}
body, .body--home, .site-wrapper, .modal__box, .sitelinks_td, .zci-wrap, html, body, .body--home, .site-wrapper, .region__body, .badge-link, .module--carousel__image-wrapper, .result__image, .vertical--map__sidebar, .vertical--map__sidebar__header, .page-chrome_newtab, .zci--type--tiles:not(.is-fallback).is-full-page.is-expanded, .zci--type--tiles:not(.is-fallback).is-full-page.is-expanded .metabar:not(.is-stuck) {
    background: var(--background-primary) !important;
}
.module:not(.module--carousel):not(.module--placeholder):not(.module--images):not(.module--translations):not(.module__chromeless), .modal--popout .modal__box, .modal__box, .sidebar-modules .module, .results--main .result:not(.result--ad).highlight, .module .module--carousel__item, .user-loc-cta, .address-detail, .modal--dropdown.modal--popout .modal__box, .tile--info, .place-detail, .badge-link, .is-atb-fullbleed .content-info__item, .atb-banner__bottom, .multi-step-mobile-onboarding__step__content, .is-mobile .results_links_deep, .is-mobile .results_links, .is-mobile .result--news, .is-mobile .related-searches, .most-visited__info-tt, .user-loc-tooltip, .anomaly-modal__modal, [data-testid="about"] {
    border: 1px solid var(--border-color);
    background: var(--background-tertiary);
}


/* ==> Optional <== */
.serp__bottom-right, .TccjmKV6RraCaCw5L9gd:has([data-testid="feedback-prompt"]) {display: var(--Feedback-button);}
.footer, .footer--mobile {display: var(--main-footer) !important;}


/* ==================> Settings Sidebar <================== */
.nav-menu, .nav-menu--slideout {background: var(--background-primary); border-left: 1px solid var(--border-color);}
.nav-menu__close, .nav-menu__close:hover {color: red;} /* Close icon */


/* ==================> Top Section <================== */
.header--aside__item.header--aside__item--hidden-lg {display: none;} /* "Help Spread DuckDuckGo" Button | FIREFOX */
.header--aside__item [data-type="showcase"] {display: none;} /* "Help Spread DuckDuckGo" Button */
.header--aside__item [data-type="social"] {display: none;} /* Social/announcement Button */

/* => Search bar <= */
.search--home, .search--header {
    background-color: var(--more-buttons);
    border-color: var(--more-button-hover);
    box-shadow: none;
}

/* Clear (x) button */
.search__clear, .search__clear:hover {color: red;}
.search:hover .search__clear, .search__input:focus ~ .search__clear, .search--header.has-text.search--hover .search__clear, .search--header.has-text.search--focus .search__clear, .search--home.has-text .search__clear {opacity: 1;}
/* Search bar dropdown footer */
.search__autocomplete {
    border-color: var(--more-button-hover);
    background: var(--more-buttons);
    border-top: 1px solid var(--more-button-hover);
    z-index: 1001;
}
.acp-wrap, .acp-footer {
    background-color: var(--more-buttons);
    border-color: var(--more-button-hover);
    z-index: 1001;
}


/* ============> Icon colours & Menu sections colours <============ */
/* Menu sections under searchbar */
.zcm__link.js-zci-link.js-zci-link--web .zcm__link__icon {color: #769DFF;} /* All Icon */
.zcm__link.js-zci-link.js-zci-link--images .zcm__link__icon {color: #00adee;} /* Images Icon */
.zcm__link.js-zci-link.js-zci-link--videos .zcm__link__icon {color: #f00;} /* Videos Icon */
.zcm__link.js-zci-link.js-zci-link--news .zcm__link__icon {color: #6dec50;} /* Recent News Icon */
.zcm__link.js-zci-link.js-zci-link--maps_expanded .zcm__link__icon {color: #9250ec;} /* Maps Icon */
.zcm__link.js-zci-link.js-zci-link--products .zcm__link__icon {color: #eccd50;} /* Shopping Icon */
/* Images colour when active */
.dark-bg.is-vertical-tabs-exp #duckbar .js-zci-link--images:not(.dropdown__button).is-active, .dark-bg.is-vertical-tabs-exp #duckbar .js-zci-link--images:not(.dropdown__button).is-active:active, .dark-bg.is-vertical-tabs-exp #duckbar .js-zci-link--images:not(.dropdown__button).is-active:hover {
    color: #00adee;
    border-color: #00adee;
}
/* Videos colour when active */
.dark-bg.is-vertical-tabs-exp #duckbar .js-zci-link--videos:not(.dropdown__button).is-active, .dark-bg.is-vertical-tabs-exp #duckbar .js-zci-link--videos:not(.dropdown__button).is-active:active, .dark-bg.is-vertical-tabs-exp #duckbar .js-zci-link--videos:not(.dropdown__button).is-active:hover {
    color: #f00;
    border-color: #f00;
}
/* News colour when active */
.dark-bg.is-vertical-tabs-exp #duckbar .js-zci-link--news:not(.dropdown__button).is-active, .dark-bg.is-vertical-tabs-exp #duckbar .js-zci-link--news:not(.dropdown__button).is-active:active, .dark-bg.is-vertical-tabs-exp #duckbar .js-zci-link--news:not(.dropdown__button).is-active:hover {
    color: #6dec50;
    border-color: #6dec50;
}
/* Maps colour when active */
.dark-bg.is-vertical-tabs-exp #duckbar .js-zci-link--maps_expanded:not(.dropdown__button).is-active, .dark-bg.is-vertical-tabs-exp #duckbar .js-zci-link--maps_expanded:not(.dropdown__button).is-active:active, .dark-bg.is-vertical-tabs-exp #duckbar .js-zci-link--maps_expanded:not(.dropdown__button).is-active:hover {
    color: #9250ec;
    border-color: #9250ec;
}
/* Snippets icon colours */
.module__header.module__header--link.js-images-show-more .module__header__icon {color: #00adee;} /* Images Icon */
.module.module--carousel.module--carousel-videos.js-module--videos .module__header__icon {color: #f00;} /* Videos Icon */
.module.module--carousel.module--carousel-news.js-module--news .module__header__icon {color: #6dec50;} /* Recent News Icon */


/* ==================> Search Filters <================== */
.search-filters-wrap:before, .search-filters-wrap:after, .metabar__dropdowns-wrap:after, .metabar__dropdowns-wrap:before {background: transparent;}

.search-filters .dropdown, .metabar__dropdowns .dropdown { /* Filter button colours */
    background:var(--border-color);
    padding: 0px 0px 0px 6px;
}
.tileview--grid .metabar--fixed {padding-top: 8px;} /* Search Filter in "Images" Section */


/* ==================> Calculator/other <================== */
.zci.is-active {
    border-bottom-color: #181818;
    background: #121212;
    display: flex;
    justify-content: center;
}
.zci .cw {
    padding: 0px;
	margin: 0px;
}
.zci--calculator .zci__main {
    max-width: -webkit-fill-available;
    padding-left: 0px;
}

/* ==================> Snippets <================== */
[data-layout="organic"] {
    background: var(--background-snippet);
    margin-bottom: 0px !important;
    border: 1px solid var(--border-color);
	overflow: hidden;
}
a.Rn_JXVtoPVAFyGkcaXyK, .Rn_JXVtoPVAFyGkcaXyK .Wo6ZAEmESLNUuWBkbMxx {
    color: #00adee !important;
    opacity: 0.9;
}
.oaxCunrdbQs3WQDCq3Ls {
    display: var(--Website-link-Directory-tree);
    color: #ccc !important;
    opacity: 0.9;
}
[data-layout="organic"] [data-testid="result"] {padding: 4px;}
.react-results--main > li:first-child:not([data-layout]) {padding: 0;}
/* Spelling mistake */
.msg--spelling {margin-bottom: 0px; padding: 0px 0px 0px 10px}
.msg--spelling .js-spelling-recourse-link {color: red !important; text-decoration...

Reviews

No reviews yet.