Xdebug is an essential development tool for me, but, to be blunt, the default output style is kind of hideous. I looked for a way to customize it through xdebug.ini, but there doesn’t appear to be one.

You can, however, use a browser extension like Stylish Stylus (FireFox) or Stylebot (Chrome) to override the default styles with CSS.

.xdebug-error {
    width: 97%;
    margin: 10px auto;
    border-collapse: collapse;
    border-right: 1px #5b5440 solid;
    border-left: 1px #5b5440 solid;
}

.xdebug-error th,
.xdebug-error td {
    padding: 4px 6px 3px 5px;
    border-top: 1px #5b5440 solid;
    border-bottom: 1px #5b5440 solid;
    border-left: none;
    border-right: none;
}

    .xdebug-error th:first-child {
       padding-top: 0;
    }

.xdebug-error th {
    background-color: #E4DBBF;
    color: #383127;
}

.xdebug-error td {
    background-color: #fff;
}

.xdebug-error span {
    background-color: inherit !important;
    color: #DC5B21 !important;
}

That will come out looking this:

I’m sure a designer could make it much better than that, but it’s good enough for me, for now. If anyone out there comes up with a better color scheme, I’d love to see it; please post it in the comments.

Update: Here’s a new style based off the She Is French, Yes? color pallete from Colour Lovers.

.xdebug-error {
    width: 97%;
    margin: 10px auto;
    border-collapse: collapse;
    border-right: 1px #5b5440 solid;
    border-left: 1px #5b5440 solid;
}

.xdebug-error th,
.xdebug-error td {
    padding: 4px 6px 3px 5px;
    border-left: none;
    border-right: none;
}

    .xdebug-error th:first-child {
       padding-top: 0;
    }

.xdebug-error th {
    background-color: #3E4147;
    color: #DFBA69;
}

.xdebug-error td {
    background-color: #FFFEDF;
    border-top: 1px #5b5440 solid;
    border-bottom: #DFBA69;
}

.xdebug-error span {
    background-color: inherit !important;
    color: #ce5c00 !important;
}

…and another based off metro. I think this one is my favorite.

.xdebug-error {
    width: 97%;
    margin: 10px auto;
    border-collapse: collapse;
    border-right: 1px #5b5440 solid;
    border-left: 1px #5b5440 solid;
}

.xdebug-error th,
.xdebug-error td {
    padding: 6px 6px 5px 5px;
    border-left: none;
    border-right: none;
}

.xdebug-error th {
    background-color: #515151;
    color: #EEEEEE;
}

.xdebug-error td {
    background-color: #EEEEEE; 
    border-top: 1px #5b5440 solid;
    border-bottom: #DFBA69;
}

.xdebug-error span {
    background-color: inherit !important;
    color: #ce5c00 !important;
}