feat(docz-theme-default): add dark mode 🌚 (#81)

* SAVEPOINT * feat(docz-theme-default): add dark mode 🌚
doczjs · Jun 25, 2018 · 964cf4d · 964cf4d
1 parent d9baaa9
commit 964cf4d
Show file tree

Hide file tree

Showing 25 changed files with 359 additions and 181 deletions.
diff --git a/packages/docz-theme-default/src/components/shared/Main/index.tsx b/packages/docz-theme-default/src/components/shared/Main/index.tsx
@@ -3,7 +3,6 @@ import { Component } from 'react'
 import styled from 'react-emotion'
 import equals from 'fast-deep-equal'
 import { base } from '../../../styles/base'
-import webfont from 'webfontloader'
 
 const Wrapper = styled('div')`
   display: flex;
@@ -14,13 +13,6 @@ interface MainProps {
   config: any
 }
 
-const loadfonts = () =>
-  webfont.load({
-    google: {
-      families: ['Inconsolata', 'Source Sans Pro:300,400,600,700'],
-    },
-  })
-
 export class Main extends Component<MainProps> {
   public componentDidUpdate(prevProps: MainProps): void {
     const { config } = this.props
@@ -32,7 +24,6 @@ export class Main extends Component<MainProps> {
 
   public componentDidMount(): void {
     base(this.props.config)
-    loadfonts()
   }
 
   public render(): React.ReactNode {

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Docz.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Docz.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react'
+import { SFC } from 'react'
+
+interface DoczProps {
+  width?: number
+  className?: string
+}
+
+export const Docz: SFC<DoczProps> = ({ width = 100, className }) => (
+  <svg
+    width={width}
+    height={width * 0.29}
+    className={className}
+    viewBox="0 0 385 112"
+  >
+    <path d="M146.8,111.2 C129.4,111.2 116.35,97.25 116.35,77.45 C116.35,58.4 130.15,43.1 147.85,43.1 C156.25,43.1 162.4,46.25 166.15,49.4 L166.15,14 L156.25,14 L156.25,0.2 L182.5,0.2 L182.5,96.5 L192.25,96.5 L192.25,110 L166.15,110 L166.15,102.8 C161.35,107.45 155.2,111.2 146.8,111.2 Z M150.55,97.1 C156.7,97.1 161.65,94.4 166.15,90.5 L166.15,62.3 C161.8,59.3 156.7,57.2 150.55,57.2 C141.4,57.2 133.15,64.25 133.15,77.3 C133.15,89.9 140.95,97.1 150.55,97.1 Z M225.45,111.2 C203.7,111.2 190.5,95.45 190.5,77.15 C190.5,59.15 204,43.1 225.45,43.1 C247.2,43.1 260.4,58.85 260.4,77.15 C260.4,95.15 246.9,111.2 225.45,111.2 Z M225.45,97.55 C236.1,97.55 243.6,89.15 243.6,77.15 C243.6,65.15 236.1,56.75 225.45,56.75 C214.8,56.75 207.3,65.15 207.3,77.15 C207.3,89.15 214.8,97.55 225.45,97.55 Z M296.9,111.2 C276.2,111.2 260.6,97.7 260.6,76.55 C260.6,59.45 274.4,43.1 293.9,43.1 C311.9,43.1 323.75,54.8 323.75,65.15 C323.75,72.05 319.1,76.25 313.25,76.25 C307.85,76.25 303.35,71.75 303.35,66.35 C303.35,64.4 304.25,62.15 305.45,60.8 C304.25,59.15 300.2,56.3 293.75,56.3 C286.25,56.3 276.95,62.45 276.95,76.85 C276.95,89.45 286.55,97.4 298.25,97.4 C306.2,97.4 313.1,95.15 321.65,90.5 L320.3,105.2 C313.25,109.25 306.5,111.2 296.9,111.2 Z M323.65,110 L323.65,100.4 L363.25,57.2 L340,57.2 L340,69.35 L326.05,69.35 L326.05,44.3 L383.65,44.3 L383.65,53.75 L344.05,96.95 L370.6,96.95 L370.6,84.8 L384.4,84.8 L384.4,110 L323.65,110 Z M87,18.5 C87,19.3284477 86.2115475,20 85.2391775,20 L47.760588,20 C46.7882179,20 46,19.3284477 46,18.5 C46,17.6715523 46.7882179,17 47.760588,17 L85.239412,17 C86.2117821,17 87,17.6713524 87,18.5 Z M31.8615438,20 C30.833168,20 30,19.3284477 30,18.5 C30,17.6715523 30.833416,17 31.8615438,17 L38.1384562,17 C39.166584,17 40,17.6715523 40,18.5 C40,19.3284477 39.166584,20 38.1384562,20 L31.8615438,20 Z M31.7657124,71 L50.2342876,71 C51.2094879,71 52,71.6713524 52,72.5 C52,73.3284477 51.2094879,74 50.2342876,74 L31.7657124,74 C30.7905121,74 30,73.3286476 30,72.5 C30,71.6715523 30.7905121,71 31.7657124,71 Z M60,56.5 C60,57.3284477 59.1933987,58 58.1988865,58 L31.8011135,58 C30.8063613,58 30,57.3286476 30,56.5 C30,55.6715523 30.8063613,55 31.8011135,55 L58.1988865,55 C59.1936387,55 60,55.6713524 60,56.5 Z M73,38.5 C73,39.3286475 72.1908104,40.0001998 71.192569,40 L31.807431,40 C30.8091896,40 30,39.3284477 30,38.5 C30,37.6715523 30.8091896,37 31.807431,37 L71.192569,37 C72.1908104,37 73,37.6713524 73,38.5 Z M94.4110629,60.8520717 C95.3815188,60.8520717 96.1684193,61.6483184 96.1684193,62.6308855 L96.1684193,84.1888093 C96.1684193,90.7014865 90.9354492,96 84.503047,96 L84.2817971,96 L11.6626593,96 C5.08322545,96 0.0693980867,90.6732777 9.65270039e-05,83.6092251 C-0.0048201377,83.1344165 0.178267091,82.6773865 0.508386007,82.3398291 C0.838270796,82.0025088 1.28802855,81.8126327 1.75698472,81.8126327 L20.0341004,81.8126327 L20.0341004,11.8111907 C20.0341004,5.29851351 25.2670706,0 31.6994728,0 L104.318611,0 C110.916775,0 115.930602,5.32672231 115.999903,12.3907749 C116.00482,12.8655835 115.821733,13.3226135 115.491614,13.6601709 C115.161729,13.9974912 114.711971,14.1873673 114.243015,14.1873673 L96.1677169,14.1873673 L96.1677169,27.6014816 C96.1677169,28.5840486 95.3810506,29.3805324 94.4105946,29.3805324 C93.4401387,29.3805324 92.6534723,28.5842856 92.6534723,27.6014816 L92.6534723,12.4083165 L92.6534723,11.8111907 C92.6534723,11.6092251 92.6586231,11.4084449 92.6684564,11.2090869 C92.6719683,11.1384463 92.6794604,11.068517 92.6841429,10.9981135 C92.6928056,10.8698701 92.7005318,10.7413897 92.7131747,10.6143316 C92.7213691,10.5318386 92.7337778,10.4507679 92.7436112,10.3687491 C92.7574246,10.2552027 92.7695992,10.1411823 92.7864564,10.0285841 C92.7995675,9.94087609 92.8168929,9.85459035 92.831877,9.76735641 C92.8501389,9.66186972 92.8667619,9.55614598 92.8878333,9.45160749 C92.905627,9.36247716 92.9276349,9.27453208 92.9475357,9.18611289 C92.970246,9.08560423 92.9913174,8.98462146 93.016369,8.88506099 C93.0393134,8.79450837 93.0660039,8.70561509 93.0908213,8.61601067 C93.1175118,8.52000593 93.1425634,8.42352709 93.1715951,8.32870759 C93.1992221,8.23862907 93.230361,8.15044694 93.2598609,8.06131661 C93.2905316,7.96863055 93.3197974,7.87547039 93.3528093,7.78396958 C93.3848847,7.69483925 93.4202379,7.60736827 93.4544204,7.51918613 C93.4890712,7.42981876 93.5223172,7.33974023 93.5590751,7.25132105 C93.5953648,7.16385007 93.6349322,7.07803842 93.673329,6.99151563 C93.71196,6.90475579 93.7491861,6.8172848 93.7896901,6.73147316 C93.8299599,6.64613561 93.8735075,6.56245741 93.9158845,6.47806805 C93.9582615,6.39344165 93.9994678,6.30834115 94.0439519,6.22513704 C94.0882019,6.14193293 94.1354955,6.06062522 94.1816185,5.9788434 C94.2277415,5.89658749 94.2731621,5.81385747 94.3213923,5.7327868 C94.3693883,5.65219023 94.4199597,5.57349005 94.4698287,5.49407872 C94.5196977,5.41419329 94.5690985,5.33407082 94.6208406,5.25560768 C94.6723485,5.17809275 94.7261977,5.10223715 94.7793445,5.02590745 C94.8334278,4.94815546 94.8868087,4.87016643 94.9425309,4.79383673 C94.9970825,4.71940343 95.0537412,4.64710356 95.1099316,4.57409255 C95.1679951,4.49871105 95.2251221,4.42285545 95.2848244,4.34889624 C95.3424196,4.27754457 95.402122,4.20832634 95.4613561,4.13839696 C95.5229315,4.06538594 95.5840386,3.99213788 95.647487,3.92078621 C95.7074235,3.85346437 95.7694671,3.78803892 95.8308083,3.72190232 C95.8813797,3.66738111 95.9300781,3.6114376 95.9815861,3.55810163 L31.7001752,3.55810163 C27.2058754,3.55810163 23.5492816,7.26009186 23.5492816,11.8109536 L23.5492816,81.8126327 L74.3763566,81.8126327 C75.3400229,81.8126327 76.1238797,82.5984493 76.1334789,83.5741419 C76.1831138,88.6294434 79.6861203,92.4418984 84.2817971,92.4418984 L84.503047,92.4418984 C88.9973468,92.4418984 92.6539406,88.7399081 92.6539406,84.1890464 L92.6539406,62.6311225 C92.6539406,61.6485555 93.4406069,60.8520717 94.4110629,60.8520717 Z M96.2578558,10.5918119 C96.2562169,10.6041385 96.2550463,10.6167021 96.2543439,10.6287915 L112.318258,10.6287915 C111.563199,6.49371327 108.371815,3.55786459 104.339214,3.55786459 C104.270849,3.55786459 104.203186,3.56094622 104.135289,3.56260556 C104.072075,3.5642649 104.008861,3.564739 103.946115,3.56758358 C103.83748,3.57279866 103.729781,3.58085831 103.622317,3.59034026 C103.604289,3.59176256 103.586262,3.59271075 103.568468,3.59437009 C103.45117,3.60551138 103.334575,3.61926021 103.218682,3.63537952 C103.211424,3.63632772 103.204167,3.63727591 103.196909,3.63822411 C103.075397,3.65529162 102.954587,3.67520371 102.834948,3.69772334 C102.834246,3.69796039 102.83331,3.69796039 102.832607,3.69819744 C101.371187,3.97364808 100.046965,4.64283668 98.9709182,5.5917428 C98.9681087,5.59435034 98.965065,5.59672083 98.9622555,5.59932836 C98.8779698,5.67376167 98.7955572,5.75009136 98.7145493,5.82784335 C98.7058866,5.83637711 98.6972239,5.84467381 98.6885612,5.85297052 C98.6117675,5.92740382 98.5363787,6.00349647 98.4623946,6.08077436 C98.4504541,6.09310089 98.4389819,6.10566448 98.4272756,6.11799101 C98.3558669,6.19360956 98.2858629,6.27017631 98.2174979,6.34840239 C98.204855,6.36286236 98.1924463,6.37755939 98.1800376,6.39201936 C98.1128431,6.4700084 98.0463511,6.54894563 97.9819662,6.6295422 C97.9714305,6.64281693 97.961363,6.65632871 97.9508273,6.66960344 C97.8850377,6.75304459 97.8201845,6.8371969 97.7574385,6.92300854 C97.7555655,6.92561608 97.7539266,6.92798657 97.7520536,6.9305941 C97.55726,7.19822213 97.3790895,7.47888785 97.2168395,7.76974665 C97.2025578,7.79558497 97.1871054,7.82071213 97.1730578,7.8467875 C97.136534,7.91387229 97.1023515,7.98214233 97.0677007,8.05041237 C97.044288,8.09639982 97.0201729,8.14191318 96.9976968,8.18837473 C96.9674944,8.25071855 96.9389309,8.31448467 96.9101333,8.37777668 C96.8857841,8.4313497 96.8612008,8.48492271 96.8380222,8.53920687 C96.8118,8.6001284 96.7872167,8.66152403 96.7626334,8.7231567 C96.7392207,8.78170774 96.7160421,8.84002173 96.6940342,8.89904687 C96.671558,8.95878315 96.6502525,9.01923058 96.629181,9.07967801 C96.6074072,9.14225888 96.5863358,9.20483975 96.5662009,9.26789471 C96.5472366,9.32691985 96.5287406,9.38618203 96.5111811,9.44591832 C96.4917485,9.51181787 96.4732525,9.57842856 96.4552248,9.64503926 C96.4395383,9.70335325 96.4240859,9.76190429 96.40957,9.82069238 C96.3924787,9.89062176 96.3767922,9.96102524 96.3613399,10.0316658 C96.3489311,10.0885575 96.3362883,10.1454492 96.3250502,10.202815 C96.3103002,10.2781965 96.2974232,10.3540521 96.2847804,10.4299076 C96.2756494,10.4837177 96.2658161,10.5375278 96.2578558,10.5918119 Z M11.6624252,92.4418984 L75.9979194,92.4418984 C75.9649075,92.4068152 75.9335345,92.3698355 75.9009909,92.3342782 C75.8553361,92.284498 75.8099155,92.2344807 75.7651973,92.1837523 C75.6987052,92.1083708 75.6331497,92.0320411 75.5685307,91.9547632 C75.5252172,91.9030866 75.4819037,91.8514099 75.4392927,91.7990222 C75.3746736,91.7193738 75.3114594,91.637829 75.2487134,91.5560472 C75.2089118,91.5041335 75.1688761,91.452931 75.1297769,91.4003062 C75.0646896,91.3128352 75.0019436,91.2234678 74.9391976,91.1338634 C74.9050151,91.0847943 74.8698961,91.0366734 74.8361818,90.9871302 C74.7633683,90.8797471 74.6928961,90.7702306 74.6233604,90.660003 C74.602289,90.6265791 74.580047,90.5943405 74.5592097,90.5606795 C74.4700073,90.4165539 74.3836145,90.2700578 74.3000312,90.1211912 C74.2777891,90.081604 74.2569519,90.0408316 74.2351781,90.0007704 C74.1750074,89.8907798 74.1153051,89.7805521 74.0581781,89.6684281 C74.0282099,89.60964 74.0003488,89.5499037 73.971317,89.4906415 C73.9247258,89.3951109 73.8779004,89.2993432 73.8334163,89.2021532 C73.8032139,89.1362536 73.7744163,89.0694059 73.7453846,89.0027952 C73.7048806,88.9098721 73.6646108,88.816949 73.6259799,88.7228406 C73.5974164,88.6529113 73.5700236,88.5822707 73.5423966,88.5116302 C73.5061069,88.4187071 73.4707538,88.3253099 73.4365712,88.2309645 C73.4101149,88.1584276 73.3845951,88.0854166 73.3595435,88.0121685 C73.3269998,87.917112 73.2953927,87.8213443 73.2649562,87.7251025 C73.2415435,87.6516174 73.218365,87.5778952 73.196357,87.5036989 C73.1668571,87.4048496 73.1392301,87.3050521 73.1118372,87.2050175 C73.0919364,87.1320065 73.0715674,87.0589955 73.0528373,86.9852733 C73.0259127,86.8802608 73.0013293,86.7738259 72.9769801,86.667391 C72.9610595,86.5972246 72.9439683,86.5275322 72.9289841,86.4566546 C72.9036984,86.3386044 72.8814564,86.2188948 72.8592143,86.0991851 C72.8479762,86.0387377 72.8353334,85.9792385 72.8250318,85.918554 C72.7938929,85.7374488 72.7657977,85.5551583 72.7416826,85.3709714 L21.7919251,85.3709714 L3.68338077,85.3709714 C4.43844,89.5060497 7.62982365,92.4418984 11.6624252,92.4418984 Z M120.998408,32.7899677 C120.998647,32.8098599 121.000556,32.8297522 120.99984,32.850118 C120.998408,32.9064794 120.993634,32.9621303 120.986951,33.0170708 C120.986712,33.0203861 120.986712,33.0234647 120.986235,33.0267801 C120.975971,33.1077699 120.958785,33.1863916 120.938019,33.2635925 C120.933962,33.2787485 120.929665,33.2934308 120.92513,33.30835 C120.878347,33.4655934 120.810559,33.6131276 120.72463,33.7488211 C120.716514,33.7616089 120.708399,33.77416 120.700045,33.7867111 C120.654455,33.854913 120.605285,33.9202732 120.551102,33.981134 C120.54776,33.9846862 120.54418,33.9880016 120.540838,33.9917906 C120.485939,34.0526514 120.426267,34.1087759 120.363491,34.1615851 C120.358478,34.1658477 120.354659,34.1708208 120.349647,34.1748466 C116.038893,37.7064298 112.307441,41.2448806 107.873046,46.0062306 C102.802778,51.4498371 91.7857706,58.7815489 86.0428726,60.5339606 C83.3864839,61.3445694 81.1912456,61.9366004 79.2545094,62.4594822 C75.5209096,63.4666453 72.7568714,64.2130779 69.3242606,65.8091935 L66.5163033,75.703689 C66.2938436,76.487538 65.5749072,77 64.7927178,77 C64.632079,77 64.4685759,76.9786869 64.3062662,76.9332189 C63.354129,76.6670418 62.7994119,75.6852176 63.0674615,74.7405729 L66.0950142,64.0724114 C66.1009815,64.0513351 66.1074262,64.0304956 66.1141095,64.0098929 C66.2733162,63.5189808 66.4310907,63.0273583 66.589104,62.5354989 C68.5186795,56.5263844 70.5141337,50.3124272 74.8387316,45.4144364 C84.7202875,34.2226827 104.265713,30.6427897 119.255011,31.0276098 C119.339269,31.0297412 119.421379,31.0396873 119.502295,31.0529488 C119.520435,31.0557905 119.538337,31.0588691 119.556239,31.0624213 C119.637155,31.0782877 119.716639,31.0979431 119.793259,31.1239925 C119.793736,31.1239925 119.794214,31.1242293 119.794691,31.1244661 C119.871788,31.1507523 119.945305,31.1836692 120.017151,31.2196647 C120.030995,31.2265323 120.0446,31.233163 120.058205,31.2405042 C120.128619,31.2783942 120.196885,31.3198363 120.261331,31.3662516 C120.269208,31.3719351 120.276369,31.378329 120.284007,31.3840125 C120.341293,31.4268755 120.395714,31.473054 120.447271,31.5223109 C120.459445,31.5339147 120.472095,31.5450449 120.48403,31.5571224 C120.53869,31.6120628 120.58977,31.6703187 120.636792,31.7318899 C120.646101,31.7442042 120.654694,31.7572288 120.663764,31.7697799 C120.706489,31.8287462 120.745635,31.8900806 120.780961,31.9540199 C120.785735,31.9630188 120.791225,31.9713072 120.795998,31.9803061 C120.834189,32.0527707 120.866651,32.1285507 120.894816,32.2064619 C120.896965,32.2126191 120.900545,32.2183026 120.902693,32.2244597 C120.905319,32.2318009 120.906274,32.2396157 120.90866,32.2471937 C120.959502,32.3997009 120.989815,32.5607333 120.996976,32.7279228 C120.997692,32.7487623 120.998169,32.769365 120.998408,32.7899677 Z M77.5340269,47.756511 C75.2953469,50.2920613 73.752689,53.2567157 72.4766485,56.4636291 C76.7888345,52.5955355 82.6281636,48.2464759 88.0376107,44.6611362 C91.3895441,42.4395991 97.3876024,38.6593629 103.660632,35.6411889 C101.191855,36.0456645 98.7963549,36.5581265 96.5295094,37.1757332 C88.0946578,39.4737607 81.7037145,43.0337614 77.5340269,47.756511 Z M105.24172,43.5935859 C108.084287,40.541311 110.64878,37.9761591 113.255998,35.5938264 C107.252689,37.4175187 99.0698944,41.6242541 90.0278137,47.6172653 C84.8055001,51.0785153 79.7992015,54.8284396 75.9309802,58.1760196 C74.9697728,59.0079415 74.1544054,59.7489275 73.4588607,60.4098709 C75.0136919,59.9201429 76.5859475,59.4953014 78.3143067,59.0290178 C80.2245483,58.513714 82.3894729,57.9292611 84.9897693,57.1359395 C89.6492502,55.7143547 100.307028,48.8917896 105.24172,43.5935859 Z" />
+  </svg>
+)
diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/Menu.tsx
@@ -25,7 +25,7 @@ const Icon = styled.div`
   transition: transform 0.3s;
 
   & svg {
-    stroke: ${p => p.theme.colors.main};
+    stroke: ${p => p.theme.colors.text};
   }
 `
 

diff --git a/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx b/packages/docz-theme-default/src/components/shared/Sidebar/index.tsx
@@ -3,26 +3,27 @@ import { Docs, Link, Entry, ThemeConfig } from 'docz'
 import styled from 'react-emotion'
 
 import { Menu } from './Menu'
-import logo from '../../../images/docz.svg'
+import { Docz } from './Docz'
 
 const Wrapper = styled('div')`
   display: flex;
   flex-direction: column;
   height: 100%;
-  background: ${p => p.theme.colors.grayLight};
+  background: ${p => p.theme.colors.sidebarBg};
   ${p => p.theme.styles.sidebar};
 
   a {
     position: relative;
     display: block;
     padding: 6px 16px;
     font-weight: 600;
-    color: ${p => p.theme.colors.main};
+    color: ${p => p.theme.colors.sidebarText};
+    text-decoration: none;
   }
 
   a:hover,
   a:visited {
-    color: ${p => p.theme.colors.main};
+    color: ${p => p.theme.colors.sidebarText};
   }
 
   a:hover,
@@ -51,6 +52,7 @@ const LogoText = styled('h1')`
   margin: 24px 16px 64px;
   padding: 0;
   font-size: 32px;
+  color: ${p => p.theme.colors.text};
 
   &:before {
     position: absolute;
@@ -73,15 +75,19 @@ const Footer = styled('div')`
   align-items: center;
   justify-content: center;
   font-size: 14px;
-  color: ${p => p.theme.colors.grayDark};
-  border-top: 1px dashed ${p => p.theme.colors.gray};
+  color: ${p => p.theme.colors.footerText};
+  border-top: 1px dashed ${p => p.theme.colors.border};
 
-  a {
+  & > a {
     padding: 0;
     margin-left: 5px;
   }
 `
 
+const FooterLogo = styled(Docz)`
+  fill: ${p => p.theme.colors.footerText};
+`
+
 export const Sidebar = () => (
   <Docs>
     {({ docs, menus }) => {
@@ -112,7 +118,7 @@ export const Sidebar = () => (
           <Footer>
             Built with
             <a href="https://docz.site" target="_blank">
-              <img src={logo} width={40} alt="Docz" />
+              <FooterLogo width={40} />
             </a>
           </Footer>
         </Wrapper>

diff --git a/packages/docz-theme-default/src/components/ui/InlineCode.tsx b/packages/docz-theme-default/src/components/ui/InlineCode.tsx
@@ -0,0 +1,7 @@
+import styled from 'react-emotion'
+
+export const InlineCode = styled('code')`
+  background: ${p => p.theme.colors.codeBg};
+  color: ${p => p.theme.colors.codeColor};
+  ${p => p.theme.styles.code};
+`
diff --git a/packages/docz-theme-default/src/components/ui/Link.tsx b/packages/docz-theme-default/src/components/ui/Link.tsx
@@ -0,0 +1,12 @@
+import styled from 'react-emotion'
+
+export const Link = styled('a')`
+  &, &:visited, &:active {
+    text-decoration: none;
+    color: ${p => p.theme.colors.link};
+  }
+
+  &:hover {
+    color: ${p => p.theme.colors.link};
+  }
+`
diff --git a/packages/docz-theme-default/src/components/ui/Page.tsx b/packages/docz-theme-default/src/components/ui/Page.tsx
@@ -12,6 +12,8 @@ const Wrapper = styled('div')`
   flex: 1;
   height: 100%;
   overflow-y: auto;
+  color: ${p => p.theme.colors.text};
+  background: ${p => p.theme.colors.background};
 `
 
 export const Page: SFC<PageProps> = ({ children, ...props }) => (

diff --git a/packages/docz-theme-default/src/components/ui/Paragraph.tsx b/packages/docz-theme-default/src/components/ui/Paragraph.tsx
@@ -0,0 +1,5 @@
+import styled from 'react-emotion'
+
+export const Paragraph = styled('p')`
+  color: ${p => p.theme.colors.text};
+`
diff --git a/packages/docz-theme-default/src/components/ui/Pre.tsx b/packages/docz-theme-default/src/components/ui/Pre.tsx
@@ -7,6 +7,11 @@ import styled, { cx } from 'react-emotion'
 
 const PreStyled = styled('pre')`
   border: 1px solid ${p => p.theme.colors.border};
+  padding: 2em;
+  margin: 2em 0;
+  border-radius: 5px;
+  background: ${p => p.theme.colors.preBg};
+  ${p => p.theme.prismTheme};
   ${p => p.theme.styles.pre};
 `
 
@@ -22,7 +27,6 @@ export class Pre extends PureComponent<PreProps> {
     const { children } = this.props
     const childrenProps = children.props.props
     const childrenClassName = childrenProps && childrenProps.className
-
     const className = cx('react-prism', this.props.className, childrenClassName)
 
     return (

diff --git a/packages/docz-theme-default/src/components/ui/Render.tsx b/packages/docz-theme-default/src/components/ui/Render.tsx
@@ -4,15 +4,17 @@ import { RenderComponent } from 'docz'
 import styled from 'react-emotion'
 
 const Playground = styled('div')`
-  background: transparent;
+  background: 'render';
   border: 1px solid ${p => p.theme.colors.border};
   border-bottom: 0;
   border-radius: 5px 5px 0 0;
   ${p => p.theme.styles.playground};
 `
 
 const Code = styled('div')`
-  pre {
+  & code[class*='language-'],
+  & pre[class*='language-'] {
+    margin: 0;
     border-radius: 0 0 5px 5px;
   }
 `

diff --git a/packages/docz-theme-default/src/components/ui/Table.tsx b/packages/docz-theme-default/src/components/ui/Table.tsx
@@ -12,11 +12,11 @@ export const Table = styled('table')`
   border-style: hidden;
   border-radius: 5px;
   font-size: 14px;
-  color: ${p => p.theme.colors.grayDark};
+  color: ${p => p.theme.colors.tableColor};
 
   & thead {
-    color: ${p => p.theme.colors.grayDark};
-    background: ${p => p.theme.colors.grayLight};
+    color: ${p => p.theme.colors.theadColor};
+    background: ${p => p.theme.colors.theadBg};
   }
 
   & thead th {