Skip Navigation

Photon Gray Dark [theme]

EDIT: This is now integrated to Photon as the Neutral theme.

I did this a while ago, when theming was first introduced. I wanted a dark theme that wasn't black, and also not tinted.

{"other":{"black":"#000000","white":"#ffffff"},"primary":{},"zinc":{"700":"#484e57","800":"#373b41","900":"#282a2e","925":"#202225","950":"#1d1f21"},"slate":{}}
9
9 comments
  • Dang, I like this a lot, it might end up as a default theme

    • Feel free to steal.

    • I went and did the same to light colors. The change is more subtle, but I like it.

      {
          "slate": {
              "25": "251 251 251",
              "50": "242 242 242",
              "100": "229 229 229",
              "200": "226 226 226",
              "300": "222 222 222",
              "400": "154 153 150",
              "500": "102 102 102",
              "600": "51 51 51",
              "700": "85 85 85",
              "800": "51 51 51",
              "900": "51 51 51",
              "950": "2 6 23"
          },
          "zinc": {
              "50": "250 253 255",
              "100": "243 244 246",
              "300": "209 213 219",
              "400": "156 163 175",
              "500": "107 114 128",
              "600": "75 85 99",
              "700": "72 78 87",
              "800": "55 59 65",
              "900": "40 42 46",
              "925": "32 34 37",
              "950": "29 31 33"
          },
          "primary": {
              "100": "241 245 249",
              "900": "15 23 42"
          },
          "other": {
              "black": "0 0 0",
              "white": "255 255 255"
          }
      }
      

      Edit: Orange replaced with dark gray.

      <Also: blue accent version>
      {
          "slate": {
              "25": "251 251 251",
              "50": "242 242 242",
              "100": "229 229 229",
              "200": "226 226 226",
              "300": "222 222 222",
              "400": "154 153 150",
              "500": "102 102 102",
              "600": "51 51 51",
              "700": "85 85 85",
              "800": "51 51 51",
              "900": "51 51 51",
              "950": "2 6 23"
          },
          "zinc": {
              "50": "250 253 255",
              "100": "243 244 246",
              "300": "209 213 219",
              "400": "156 163 175",
              "500": "107 114 128",
              "600": "75 85 99",
              "700": "72 78 87",
              "800": "55 59 65",
              "900": "40 42 46",
              "925": "32 34 37",
              "950": "29 31 33"
          },
          "primary": {
              "100": "26 145 235",
              "900": "22 122 198"
          },
          "other": {
              "black": "0 0 0",
              "white": "255 255 255"
          }
      }
      
  • This looks really nice. You definitely know your stuff when it comes to UX and readability.

    (I'd probably still juice the text size up a bit, but I'm also old.)

You've viewed 9 comments.