Dark theme/mode

Community Information Forum Feedback
3

Hi @TomNVIDIA

Thanks for the info.
It would be great to have a dark theme in the future!

In the meantime, I have found a way to set up a dark mode (to be improved).

Screenshot from 2023-02-08 15-52-26
Screenshot from 2023-02-08 15-52-261920×1080 303 KB

Screenshot from 2023-02-08 15-52-17
Screenshot from 2023-02-08 15-52-171920×1080 310 KB


For future me and other interested users the following steps describe how to configure a custom dark theme/mode for the NVIDIA forum. The steps are done locally for Firefox.

  • Download and place the userContent.css style sheet file in the PATH_TO_FIREFOX_PROFILE_DIRECTORY/chrome folder. Create the chrome folder if it does not exist.

    Use the address about:support to identify the path to the active Profile Directory

    userContent.css (2.2 KB)

    @-moz-document domain(forums.developer.nvidia.com) { 

  :root {
    --scheme-type: dark !important;
    --primary: #dfdfdf !important;
    --secondary: #313131 !important;
    
    --primary-very-low: #111 !important;
    --primary-low: #202020 !important;
    --primary-low-mid: #404040 !important;
    
    --primary-medium: #d0d0d0 !important;
    --primary-high: #dfdfdf !important;
    --primary-very-high: #e6e6e6 !important;
    
    --blend-primary-secondary-5: #464646 !important;
    
    --tertiary-very-low: #f3ffdf !important;
    --tertiary-low: #a8fb19 !important;
    --tertiary-medium: #c4ff5d !important;
    --tertiary-high: #9ffa00 !important;
    --tertiary-hover: #598b00 !important;

    --tertiary-50: #f3ffdf !important;
    --tertiary-100: #f1ffd8 !important;
    --tertiary-200: #f0ffd5 !important;
    --tertiary-300: #edffce !important;
    --tertiary-400: #e0ffab !important;
    --tertiary-500: #d3ff87 !important;
    --tertiary-600: #c4ff5d !important;
    --tertiary-700: #b8ff3c !important;
    --tertiary-800: #adff1c !important;
    --tertiary-900: #9ffa00 !important;

    --hljs-string: #4eaa46 !important;
    --hljs-bg: #4c4c4d !important;

    --highlight-low: #000000 !important;
    --highlight-medium: #1b1b1b !important;
    --highlight-high: #383838 !important;
  }

  .category-list .badge-wrapper span.badge-category {
    color: #e6e6e6 !important;
  }

  .topic-list-item:nth-child(2n+1) {
    background-color: #313131 !important;
    border-bottom: 1px solid #262626 !important;
  }

  .topic-list-item:nth-child(2n) {
    background-color: #393939 !important;
    border-bottom: 1px solid #262626 !important;
  }

  .topic-list-main-link a.title, .topic-list .main-link a.title, .latest-topic-list-item .main-link a.title {
    color: #eee !important;
  }

  .visited a.title, .visited .main-link a.title, .visited .main-link a.title {
    color: #8a8a8a !important;
  }

  .topic-post.group-Employee .cooked, .topic-post.staff .cooked {
    background: #323729 !important;
  }

  .hljs-built_in, .lisp .hljs-title, .clojure .hljs-built_in, .hljs-builtin-name {
    color: #e4c40f !important;
  }

  .select-kit .select-kit-row.is-selected, .autocomplete ul li a.selected {
    background-color: #395900 !important;
  }
}

  • Set the toolkit.legacyUserProfileCustomizations.stylesheets to true in the address about:config to allow CSS customization

  • Restart the browser

2 Likes