Pimping up Your DuckDuckGo Search Results 💄

Published by Alicia's Notes 🚀, View original


Yet another awesome feature of DuckDuckGo, is that they make it really easy to modify your theme, just go to: https://duckduckgo.com/settings#appearance. From here you can customize your colors, fonts and layout of your search results and home page.

I am no designer by any stretch of the imagination (as you can probably see!), but here are a couple of themes I made, along with their code if you want to use them. You can preview themes live without making any changes by clicking the link below each screenshot, or to apply a theme, see the JS snippet at the end of this post.

Settings in DDG can either be applied temporarily with DuckDuckGo's URL parameters, locally as cookies, or globally using DDG's Cloud Save feature.

Callisto

Screenshot - Navy Turquoise

Try it Out!

Color Palette: #0b1021, #080813, , #00af87, #0a7355, #d3d5e5, #a8d3ff

JSON

{"kae":"d", "k5":"1", "kay":"b", "kbc":"1", "kax":"v261-7", "kx":"a8d3ff", "kaa":"0a7355", "kj":"080813", "k9":"00af87", "k18":"1", "ka":"Hack", "k8":"d3d5e5", "k21":"080813", "k7":"0b1021", "kt":"v"}

Cookie Data

5=1; ay=b; bc=1; ae=d; ax=v261-7; 18=1; aa=0a7355; x=a8d3ff; 8=d3d5e5; 9=00af87; j=080813; 7=0b1021; 21=080813; a=Hack; t=v


Titanium

Screenshot - Titanium

Try it Out!

Color Palette: #dedede, #9b83db, #000000

JSON

{"kae":"d", "k5":"1", "kay":"b", "kbc":"1", "kax":"v261-7", "kx":"000000", "kaa":"9b83db", "kj":"9b83db", "k9":"9b83db", "k18":"1", "k8":"000000", "k21":"9b83db", "k7":"dedede", "kt":"b", "ku":"1", "ka":"Arial Rounded MT Bold"}

Cookie Data

5=1; ay=b; bc=1; ae=d; ax=v261-7; u=1; 18=1; j=9b83db; x=000000; 7=dedede; 8=000000; aa=9b83db; 9=9b83db; 21=9b83db; t=b; a=Arial%20Rounded%20MT%20Bold


Cyberpunk

Screenshot - Cyberpunk

Try it Out!

Color Palette: #101116, #ff0055, #9254b5, #785eef, #fffc58

JSON

{"kae":"d", "k5":"1", "kay":"b", "kbc":"1", "kax":"v261-7", "kx":"FFFC58", "kaa":"9254b5", "kj":"FF0055", "k9":"FF0055", "k18":"1", "ka":"Cyberpunk", "k8":"785eef ", "k21":"FFFC58", "k7":"101116", "kt":"e"}

Cookie Data

5=1; ay=b; bc=1; ae=d; ax=v261-7; 8=785eef%20; aa=9254b5; x=FFFC58; 18=1; j=FF0055; 21=FFFC58; 7=101116; 9=FF0055; a=Cyberpunk; t=e


Dracula

Screenshot - Dracula

Try it Out!

Credit: This theme was inspired by Dracula

JSON

{"kae":"t", "ks":"m", "kw":"n", "ko":"s", "ku":"-1", "ky":"44475a", "k7":"282a36", "k8":"f8f8f2", "k9":"50fa7b", "kt":"p", "km":"l", "kj":"282a36", "ka":"p", "kaa":"bd93f9", "kx":"f1fa8c", "kaf":"1", "kai":"1", "kf":"1"}

Cookie Data

ae=t; s=m; w=n; o=s; u=-1; y=44475a; 7=282a36; 8=f8f8f2; 9=50fa7b; t=p; m=l; j=282a36; a=p; aa=bd93f9; x=f1fa8c; af=1; ai=1; f=1


Hack

Screenshot - Hack

Try it Out!

Color Palette: #101116, #070709, #00ff2b, #d1d1d1, #fffc58, #118b25, Font: Courier

JSON

{"kae":"d", "k5":"1", "kay":"b", "kbc":"1", "kax":"v261-7", "kx":"FFFC58", "kaa":"0cbd2b", "kj":"070709", "k9":"00ff2b", "k18":"1", "ka":"Courier New", "k8":"d1d1d1", "k21":"118b25", "k7":"101116", "kt":"Courier"}

Cookie Data

5=1; ay=b; bc=1; ae=d; ax=v261-7; j=070709; x=FFFC58; 18=1; 7=101116; 9=00ff2b; aa=0cbd2b; 21=118b25; 8=d1d1d1; t=Courier; a=Courier%20New


Neon

Screenshot - Neon

Try it Out!

Color Palette: #261d49, #2a1f48, #df95ff, #9254b5, #1bccfd, #21f6bc, Font: Hack

JSON

{"kae":"d", "k5":"1", "kay":"b", "kbc":"1", "ka":"Hack", "k7":"261d49", "k8":"1bccfd", "k21":"2a1f48", "k18":"1", "kx":"21f6bc", "kaa":"9254b5", "kj":"2a1f48", "k9":"df95ff"}

Cookie Data

5=1; ay=b; bc=1; ae=d; j=2a1f48; a=Hack; 18=1; aa=9254b5; 7=261d49; 9=df95ff; 8=1bccfd; 21=2a1f48; x=21f6bc


Nord

Pale grey and dusty pastel

Screenshot - Nord

Try it Out!

Color Palette: #2e3440, #404855, #81a1c1, #87c0d0, #b28ead

JSON

{"kae":"d", "k5":"1", "kay":"b", "kbc":"1", "kax":"v261-7", "kx":"b28ead", "kaa":"87c0d0", "kj":"404855", "k9":"#81a1c1", "k18":"1", "ka":"Courier New", "k8":"#81a1c1", "k21":"#81a1c1", "k7":"2e3440", "kt":"h"}

Cookie Data

5=1; ay=b; bc=1; ae=d; ax=v261-7; a=Courier%20New; 7=2e3440; 18=1; 9=81a1c1; 8=81a1c1; aa=87c0d0; x=b28ead; 21=81a1c1; j=404855; t=h


Usage

There are three different methods of applying themes: Using cookies, URL parameters or DDG's cloud store

For cookies, settings can be applied programmatically with JavaScript directly through the browser console (or using a dev tool or third-party extension). Settings are specified as individual cookies, with a single string identifier and a corresponding value. The following is a quick script to apply settings easily, just replace ddg_cookie_input with your desired data (or use one of the examples above). Note that you must be on the DuckDuckGo domain for this to work.

// Converts DDG cookie string into formatted JSON
const makeCookieData = (ddg_cookie_input) => {
    let ddg_json = {};
  const items = ddg_cookie_input.split(/[ ,]+/);
  items.forEach((item)=>{
    let parts = item.split('=');
    ddg_json[parts[0]] = parts[1];
  });
  return ddg_json;
}

// Iterates over JSON, and adds to browser cookie store
const setCookies = (ddg_json) => {
  Object.keys(ddg_json).forEach(function(key) {
    document.cookie=`${key}=${ddg_json[key]}`;
  });
}

// Paste your cookie data here
const ddg_cookie_input = `5=1; ay=b; bc=1; ae=d; ax=v261-7; 18=1; aa=0a7355; x=a8d3ff; 8=d3d5e5; 9=00af87; j=080813; 7=0b1021; 21=080813; a=Hack; t=v`;

// Call set cookies, passing in formated cookie data
setCookies(makeCookieData(ddg_cookie_input));

// All done, reload page for changes to take effect :)
location.reload();

This is handy, because once you've got DDG setup just how you like, you can make note of these values, and then easily apply them to any other system or browser with a single command.

If you would rather not set cookies, then you can use URL GET parameters (but note that the identifiers are different, see the full list of options here). You can find pre-formatted URL under Settings --> Appearance --> Show Bookmarklet and Settings Data. Here you can also enable cloud save, where you pick a password which is encoded into a URL so that you can access your setup on a different browser/ device.

Alternatively, if you're already using TamperMonkey, then you can manage this with JavaScript. Similarly if you're comfortable with CSS, then you have a lot more flexibility, and extensions like Stylish can make it easy to manage CSS overrides (here are some examples). - But the great thing about DDG, is that no extensions of hacks are required. (Also note that browser extensions can be pretty bad for privacy- they make your fingerprint much more unique, and occasionally are plain malicious)