# \[Custom CSS\] Dark Mode for the forum!

**URL:** <https://community.homey.app/t/custom-css-dark-mode-for-the-forum/92188>\
**Category:** Off-Topic\
**Created:** [October 18, 2023, 5:21pm UTC](https://community.homey.app/t/custom-css-dark-mode-for-the-forum/92188 "2023-10-18T17:21:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![spkesDE](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/spkesde/32/54352_2.png) [@spkesDE](https://community.homey.app/u/spkesDE)\
**Post date:** [October 18, 2023, 5:21pm UTC](https://community.homey.app/t/custom-css-dark-mode-for-the-forum/92188/1 "2023-10-18T17:21:31Z")

</div>

Use this CSS with a custom CSS plugin for your browser. e.g. [User CSS - Chrome Web Store](https://chrome.google.com/webstore/detail/user-css/okpjlejfhacmgjkmknjhadmkdbcldfcb?hl=de)

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/1/a/1ab5aff0847edd9d9f114e1e379adb52b3d8bdf9.png)

```auto
.topic-body .cooked p, .topic-body .cooked ul, .topic-body .cooked ol {
    color: #dddddd;
}
.nav-pills>li a.active {
    background-color: #363636;
    color: var(--header_primary) !important;
}
:root {
    --scheme-type: dark;
    --primary: #dddddd;
    --secondary: #222222;
    --tertiary: #0f82af;
    --quaternary: #c14924;
    --header_background: #111111;
    --header_primary: #dddddd;
    --highlight: #a87137;
    --danger: #e45735;
    --success: #1ca551;
    --love: #fa6c8d;
    --d-selected: #2c2c2c;
    --d-hover: #313131;
    --always-black-rgb: 0, 0, 0;
    --primary-rgb: 221, 221, 221;
    --primary-low-rgb: 49, 49, 49;
    --primary-very-low-rgb: 40, 40, 40;
    --secondary-rgb: 34, 34, 34;
    --header_background-rgb: 17, 17, 17;
    --tertiary-rgb: 15, 130, 175;
    --highlight-rgb: 168, 113, 55;
    --primary-very-low: #282828;
    --primary-low: #313131;
    --primary-low-mid: #7a7a7a;
    --primary-medium: #909090;
    --primary-high: #a6a6a6;
    --primary-very-high: #c7c7c7;
    --primary-50: #282828;
    --primary-100: #2c2c2c;
    --primary-200: #313131;
    --primary-300: #585858;
    --primary-400: #7a7a7a;
    --primary-500: #858585;
    --primary-600: #909090;
    --primary-700: #9b9b9b;
    --primary-800: #a6a6a6;
    --primary-900: #c7c7c7;
    --header_primary-low: rgb(72, 72, 72);
    --header_primary-low-mid: rgb(131, 131, 131);
    --header_primary-medium: rgb(164, 164, 164);
    --header_primary-high: rgb(185, 185, 185);
    --header_primary-very-high: rgb(210, 210, 210);
    --secondary-low: #bdbdbd;
    --secondary-medium: #919191;
    --secondary-high: #646464;
    --secondary-very-high: #313131;
    --tertiary-very-low: #04212c;
    --tertiary-low: #052e3d;
    --tertiary-medium: #084860;
    --tertiary-high: #0b6283;
    --tertiary-hover: #14aeea;
    --tertiary-50: #04212c;
    --tertiary-100: #042431;
    --tertiary-200: #052836;
    --tertiary-300: #052e3d;
    --tertiary-400: #06374a;
    --tertiary-500: #073e54;
    --tertiary-600: #084860;
    --tertiary-700: #09516d;
    --tertiary-800: #0a5a79;
    --tertiary-900: #0b6283;
    --quaternary-low: #3a160b;
    --highlight-bg: #22170b;
    --highlight-low: #22170b;
    --highlight-medium: #4c3319;
    --highlight-high: #976632;
    --danger-low: #591b0c;
    --danger-low-mid: rgba(99, 30, 13, 0.7);
    --danger-medium: #a13116;
    --danger-hover: #c63c1b;
    --success-low: #0b4220;
    --success-medium: #116331;
    --success-hover: #168441;
    --love-low: #8a0524;
    --wiki: green;
    --blend-primary-secondary-5: rgb(60, 60, 60);
    --primary-med-or-secondary-med: #919191;
    --primary-med-or-secondary-high: #646464;
    --primary-high-or-secondary-low: #bdbdbd;
    --primary-low-mid-or-secondary-high: #646464;
    --primary-low-mid-or-secondary-low: #bdbdbd;
    --primary-or-primary-low-mid: #7a7a7a;
    --highlight-low-or-medium: #4c3319;
    --tertiary-or-tertiary-low: #052e3d;
    --tertiary-low-or-tertiary-high: #0b6283;
    --tertiary-med-or-tertiary: #0f82af;
    --secondary-or-primary: #dddddd;
    --tertiary-or-white: #fff;
    --facebook-or-white: #fff;
    --twitter-or-white: #fff;
    --hljs-comment: #bba;
    --hljs-number: #aff;
    --hljs-string: #f99;
    --hljs-literal: #9ae;
    --hljs-tag: #99f;
    --hljs-attribute: #0ee;
    --hljs-symbol: #fbe;
    --hljs-bg: #333;
    --hljs-builtin-name: #14aeea;
    --google: #ffffff;
    --google-hover: #f2f2f2;
    --instagram: #e1306c;
    --instagram-hover: #ac194b;
    --facebook: #1877f2;
    --facebook-hover: #0a54b3;
    --cas: #70ba61;
    --twitter: #1da1f2;
    --twitter-hover: #0c85d0;
    --github: #100e0f;
    --github-hover: #463e42;
    --discord: #7289da;
    --discord-hover: #4a67cf;
    --gold: rgb(231, 195, 0);
    --silver: #c0c0c0;
    --bronze: #cd7f32;
}

```

---

<div class="post-metadata">

**Author:** ![martijnpoppen](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/martijnpoppen/32/84849_2.png) [@martijnpoppen](https://community.homey.app/u/martijnpoppen)\
**Post date:** [October 19, 2023, 8:14am UTC](https://community.homey.app/t/custom-css-dark-mode-for-the-forum/92188/2 "2023-10-19T08:14:53Z")

</div>

@spkesDE oeh really nice! Thanks for this 😃

 ![image](https://us1.discourse-cdn.com/flex025/uploads/athom/original/3X/6/f/6fb0f401214137f176cc945a01674780498a0b27.jpeg)

---

<div class="post-metadata">

**Author:** ![robertklep](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/robertklep/32/160628_2.png) [@robertklep](https://community.homey.app/u/robertklep)\
**Post date:** [October 19, 2023, 8:25am UTC](https://community.homey.app/t/custom-css-dark-mode-for-the-forum/92188/3 "2023-10-19T08:25:46Z")

</div>

I wrapped your CSS with this to make it automatically switch between light and dark based on system preferences:

```auto
@media (prefers-color-scheme: dark) {
...
}

```

---

<div class="post-metadata">

**Author:** ![spkesDE](https://sea1.discourse-cdn.com/flex025/user_avatar/community.homey.app/spkesde/32/54352_2.png) [@spkesDE](https://community.homey.app/u/spkesDE)\
**Post date:** [October 19, 2023, 8:28am UTC](https://community.homey.app/t/custom-css-dark-mode-for-the-forum/92188/4 "2023-10-19T08:28:05Z")

</div>

Only one path exists: dark mode.