Modules/Qutebrowser: Configuration and theming

home/modules/qutebrowser/colors.nix

@@ -1,58 +1,52 @@
 {color}: {
+  webpage.darkmode.enabled = true;
+
   completion = {
     ## Background color of the completion widget category headers.
     category.bg = color.hexS.base;
+    category.fg = color.hexS.accent;
 
     ## Bottom border color of the completion widget category headers.
-    category.border.bottom = color.hexS.mantle;
+    category.border.top = color.hexS.base;
-
+    category.border.bottom = color.hexS.accent;
-    ## Top border color of the completion widget category headers.
-    category.border.top = color.hexS.overlay2;
-
-    ## Foreground color of completion widget category headers.
-    category.fg = color.hexS.green;
 
     ## Background color of the completion widget for even and odd rows.
-    even.bg = color.hexS.mantle;
+    even.bg = color.hexS.base;
-    odd.bg = color.hexS.mantle;
+    odd.bg = color.hexS.base;
 
     ## Text color of the completion widget.
-    fg = color.hexS.subtext0;
+    fg = color.hexS.text;
 
-    ## Background color of the selected completion item.
+    # Selected item color + border
-    item.selected.bg = color.hexS.surface2;
+    item.selected.bg = color.hexS.accent;
-
+    item.selected.fg = color.hexS.accentText;
-    ## Bottom border color of the selected completion item.
     item.selected.border.bottom = color.hexS.surface2;
-
-    ## Top border color of the completion widget category headers.
     item.selected.border.top = color.hexS.surface2;
 
     ## Foreground color of the selected completion item.
-    item.selected.fg = color.hexS.text;
+    item.selected.match.fg = color.hexS.accentText;
-
-    ## Foreground color of the selected completion item.
-    item.selected.match.fg = color.hexS.rosewater;
 
     ## Foreground color of the matched text in the completion.
-    match.fg = color.hexS.text;
+    match.fg = color.hexS.accent;
 
     ## Color of the scrollbar in completion view
-    scrollbar.bg = color.hexS.crust;
+    scrollbar.bg = color.hexS.base;
-
+    scrollbar.fg = color.hexS.accent;
-    ## Color of the scrollbar handle in completion view.
-    scrollbar.fg = color.hexS.surface2;
   };
 
   downloads = {
     bar.bg = color.hexS.base;
-    error.bg = color.hexS.base;
-    start.bg = color.hexS.base;
-    stop.bg = color.hexS.base;
 
+    error.bg = color.hexS.base;
     error.fg = color.hexS.red;
+
+    # Color gradient
+    start.bg = color.hexS.base;
     start.fg = color.hexS.blue;
+    stop.bg = color.hexS.base;
     stop.fg = color.hexS.green;
+
+    # Set to "none" to disable gradient, otherwise "rgb"
     system.fg = "none";
     system.bg = "none";
   };
@@ -60,162 +54,119 @@
   hints = {
     ## Background color for hints. Note that you can use a `rgba(...)` value
     ## for transparency.
-    bg = color.hexS.peach;
+    bg = color.hexS.accentDim;
-
+    fg = color.hexS.accentText;
-    ## Font color for hints.
-    fg = color.hexS.mantle;
-
-    ## Hints
-    border = "1px solid " + color.hexS.mantle;
 
     ## Font color for the matched part of hints.
-    match.fg = color.hexS.subtext1;
+    match.fg = color.hexS.accent;
   };
 
   keyhint = {
     ## Background color of the keyhint widget.
-    bg = color.hexS.mantle;
+    bg = color.hexS.accentDim;
-
+    fg = color.hexS.accentText;
-    ## Text color for the keyhint widget.
-    fg = color.hexS.text;
 
     ## Highlight color for keys to complete the current keychain.
-    suffix.fg = color.hexS.subtext1;
+    suffix.fg = color.hexS.accent;
   };
 
   messages = {
     ## Background color of an error message.
-    error.bg = color.hexS.overlay0;
+    error.bg = color.hexS.base;
+    error.fg = color.hexS.red;
+    error.border = color.hexS.red;
 
     ## Background color of an info message.
-    info.bg = color.hexS.overlay0;
+    info.bg = color.hexS.base;
+    info.fg = color.hexS.blue;
+    info.border = color.hexS.blue;
 
     ## Background color of a warning message.
-    warning.bg = color.hexS.overlay0;
+    warning.bg = color.hexS.base;
-
+    warning.fg = color.hexS.yellow;
-    ## Border color of an error message.
+    warning.border = color.hexS.yellow;
-    error.border = color.hexS.mantle;
-
-    ## Border color of an info message.
-    info.border = color.hexS.mantle;
-
-    ## Border color of a warning message.
-    warning.border = color.hexS.mantle;
-
-    ## Foreground color of an error message.
-    error.fg = color.hexS.red;
-
-    ## Foreground color an info message.
-    info.fg = color.hexS.text;
-
-    ## Foreground color a warning message.
-    warning.fg = color.hexS.peach;
   };
 
   prompts = {
     ## Background color for prompts.
-    bg = color.hexS.mantle;
+    bg = color.hexS.base;
+    fg = color.hexS.text;
 
     # ## Border used around UI elements in prompts.
     border = "1px solid " + color.hexS.overlay0;
 
-    ## Foreground color for prompts.
-    fg = color.hexS.text;
-
     ## Background color for the selected item in filename prompts.
-    selected.bg = color.hexS.surface2;
+    selected.bg = color.hexS.accent;
-
+    selected.fg = color.hexS.accentText;
-    ## Background color for the selected item in filename prompts.
-    selected.fg = color.hexS.rosewater;
   };
 
   statusbar = {
     ## Background color of the statusbar.
     normal.bg = color.hexS.base;
+    normal.fg = color.hexS.text;
 
     ## Background color of the statusbar in insert mode.
-    insert.bg = color.hexS.crust;
+    insert.bg = color.hexS.green;
+    insert.fg = color.hexS.accentText;
 
     ## Background color of the statusbar in command mode.
-    command.bg = color.hexS.base;
+    command.bg = color.hexS.peach;
+    command.fg = color.hexS.accentText;
 
     ## Background color of the statusbar in caret mode.
-    caret.bg = color.hexS.base;
+    caret.bg = color.hexS.blue;
+    caret.fg = color.hexS.accentText;
 
     ## Background color of the statusbar in caret mode with a selection.
-    caret.selection.bg = color.hexS.base;
+    caret.selection.bg = color.hexS.blue;
+    caret.selection.fg = color.hexS.accentText;
 
     ## Background color of the progress bar.
     progress.bg = color.hexS.base;
 
     ## Background color of the statusbar in passthrough mode.
-    passthrough.bg = color.hexS.base;
+    passthrough.bg = color.hexS.red;
-
+    passthrough.fg = color.hexS.accentText;
-    ## Foreground color of the statusbar.
-    normal.fg = color.hexS.text;
-
-    ## Foreground color of the statusbar in insert mode.
-    insert.fg = color.hexS.rosewater;
-
-    ## Foreground color of the statusbar in command mode.
-    command.fg = color.hexS.text;
-
-    ## Foreground color of the statusbar in passthrough mode.
-    passthrough.fg = color.hexS.peach;
-
-    ## Foreground color of the statusbar in caret mode.
-    caret.fg = color.hexS.peach;
-
-    ## Foreground color of the statusbar in caret mode with a selection.
-    caret.selection.fg = color.hexS.peach;
-
-    ## Foreground color of the URL in the statusbar on error.
-    url.error.fg = color.hexS.red;
 
     ## Default foreground color of the URL in the statusbar.
+    # NOTE: The colors will be barely legible in different modes,
+    #       but currently we can't change url color per mode...
     url.fg = color.hexS.text;
-
-    ## Foreground color of the URL in the statusbar for hovered links.
-    url.hover.fg = color.hexS.sky;
-
-    ## Foreground color of the URL in the statusbar on successful load
-    url.success.http.fg = color.hexS.teal;
-
-    ## Foreground color of the URL in the statusbar on successful load
-    url.success.https.fg = color.hexS.green;
-
-    ## Foreground color of the URL in the statusbar when there's a warning.
     url.warn.fg = color.hexS.yellow;
+    url.error.fg = color.hexS.red;
+    url.hover.fg = color.hexS.sky;
+    url.success.http.fg = color.hexS.red;
+    url.success.https.fg = color.hexS.green;
 
     ## PRIVATE MODE COLORS
     ## Background color of the statusbar in private browsing mode.
-    private.bg = color.hexS.mantle;
+    private.bg = color.hexS.teal;
-
+    private.fg = color.hexS.accentText;
-    ## Foreground color of the statusbar in private browsing mode.
-    private.fg = color.hexS.subtext1;
 
     ## Background color of the statusbar in private browsing + command mode.
-    command.private.bg = color.hexS.base;
+    command.private.bg = color.hexS.peach;
-
+    command.private.fg = color.hexS.accentText;
-    ## Foreground color of the statusbar in private browsing + command mode.
-    command.private.fg = color.hexS.subtext1;
   };
 
   tabs = {
     ## Background color of the tab bar.
-    bar.bg = color.hexS.crust;
+    bar.bg = color.hexS.base;
+
+    # ## Background color of selected even tabs.
+    selected.even.bg = color.hexS.accent;
+    selected.even.fg = color.hexS.accentText;
+
+    # ## Background color of selected odd tabs.
+    selected.odd.bg = color.hexS.accent;
+    selected.odd.fg = color.hexS.accentText;
 
     ## Background color of unselected even tabs.
-    even.bg = color.hexS.surface2;
+    even.bg = color.hexS.base;
+    even.fg = color.hexS.accent;
 
     ## Background color of unselected odd tabs.
-    odd.bg = color.hexS.surface1;
+    odd.bg = color.hexS.base;
-
+    odd.fg = color.hexS.accent;
-    ## Foreground color of unselected even tabs.
-    even.fg = color.hexS.overlay2;
-
-    ## Foreground color of unselected odd tabs.
-    odd.fg = color.hexS.overlay2;
 
     ## Color for the tab indicator on errors.
     indicator.error = color.hexS.red;
@@ -227,28 +178,16 @@
     ##	 - hsl: Interpolate in the HSL color system.
     ##	 - none: Don't show a gradient.
     indicator.system = "none";
-
-    # ## Background color of selected even tabs.
-    selected.even.bg = color.hexS.base;
-
-    # ## Background color of selected odd tabs.
-    selected.odd.bg = color.hexS.base;
-
-    # ## Foreground color of selected even tabs.
-    selected.even.fg = color.hexS.text;
-
-    # ## Foreground color of selected odd tabs.
-    selected.odd.fg = color.hexS.text;
   };
 
   contextmenu = {
     menu.bg = color.hexS.base;
-    menu.fg = color.hexS.text;
+    menu.fg = color.hexS.accent;
 
-    disabled.bg = color.hexS.mantle;
+    disabled.bg = color.hexS.base;
-    disabled.fg = color.hexS.overlay0;
+    disabled.fg = color.hexS.text;
 
-    selected.bg = color.hexS.overlay0;
+    selected.bg = color.hexS.accent;
-    selected.fg = color.hexS.rosewater;
+    selected.fg = color.hexS.accentText;
   };
 }

home/modules/qutebrowser/default.nix

@@ -96,6 +96,7 @@ in {
 
       # TODO: Find a unified version for qutebrowser + firefox (+ other browsers ideally)
       searchEngines = {
+        DEFAULT = "https://kagi.com/search?q={}";
         k = "https://kagi.com/search?q={}";
         w = "https://en.wikipedia.org/wiki/Special:Search?search={}";
         np = "https://searchix.ovh/?query={}";
@@ -129,24 +130,49 @@ in {
       enableDefaultBindings = true;
 
       settings = {
+        # Theme
         colors = import ./colors.nix {inherit color;};
+        fonts = {
+          default_family = color.font;
+          default_size = "12pt";
+          web.family.fixed = color.font;
+        };
+        hints.border = "1px solid " + color.hexS.mantle;
+
+        # Settings
+        auto_save.session = true;
+        changelog_after_upgrade = "minor";
+        completion.height = "33%";
+        content = {
+          autoplay = true;
+          blocking.enabled = true;
+          blocking.method = "auto"; # "auto", "adblock", "hosts", "both"
+          dns_prefetch = true;
+        };
+        editor.command = ["neovide" "{file}" "--" "normal {line}G{column0}l"];
+        # TODO: termfilechooser, also for downloads (those are separate)
+        # fileselect = {
+        #   handler = "external";
+        #   folder.command = [];
+        #   multiple_files.command = [];
+        #   single_file.command = [];
+        # };
+        input.media_keys = false;
+        prompt.radius = 6;
+        scrolling.smooth = true;
+        session.lazy_restore = true;
+        tabs.position = "right";
+        url = {
+          default_page = "about:blank";
+          open_base_url = true;
+          start_pages = ["https://kagi.com"];
+        };
       };
 
       # Same keys as qutebrowser.settings, but per domain
       # perDomainSettings = {
       #   "github.com".colors.webpage.darkmode.enabled = false;
       # };
-
-      extraConfig = builtins.concatStringsSep "\n" [
-        # Options
-        ''
-          c.editor.command = ["neovide", "{file}", "--", "normal {line}G{column0}l"]
-        ''
-
-        # Theme
-        ''
-        ''
-      ];
     };
   };
 }