Carbon fullstacks theme

theme.js

var icons = {
  fullstacks: `
  <svg width="24" height="42" viewBox="0 0 24 42" class="logo">
    <path d="M11.1427 6L0 25.4405L11.1427 36L22.2857 25.4405L11.1427 6ZM11.1427 30.0935L5.5134 24.5712L11.1427 14.7402L16.772 24.5712L11.1427 30.0935Z" fill="#D9D9D9"></path>
    <path d="M11.1427 14.7421L5.5134 24.5734L0 25.4427L11.1427 6.0025V14.7421Z" fill="#F2F2F2"></path>
    <path d="M22.2857 25.4405L11.1427 36V30.0935L16.772 24.5712L22.2857 25.4405Z" fill="black" fill-opacity="0.15"></path>
  </svg>`,

  tel: `
  <svg viewBox="0 0 512 512" fill="currentColor" width="20px">
    <path d="M385.268,121.919l-210.569,129.69c-11.916,7.356-17.555,21.885-13.716,35.323l22.768,80 c1.945,6.821,8.015,11.355,14.999,11.355c0.389,0,0.782-0.014,1.176-0.043c7.466-0.542,13.374-6.103,14.367-13.515l5.92-43.866 c0.798-5.902,3.642-11.392,8.001-15.45l173.765-161.524c5.251-4.869,5.945-12.842,1.618-18.545 C399.263,119.636,391.388,118.16,385.268,121.919z M214.32,290.478c-7.808,7.268-12.895,17.089-14.323,27.655l-2.871,21.278 l-16.527-58.072c-1.343-4.704,0.635-9.791,4.805-12.365l154.258-95.007L214.32,290.478z"/>
    <path d="M503.67,37.382c-6.579-5.576-15.657-7.111-23.698-4.005L15.08,212.719C5.873,216.27-0.047,224.939,0,234.804 c0.048,9.874,6.055,18.495,15.316,21.965l108.59,40.529l42.359,136.225c2.326,7.489,8.197,13.308,15.703,15.566 c7.502,2.256,15.604,0.643,21.66-4.31l63.14-51.473c3.032-2.472,7.362-2.594,10.528-0.295l113.883,82.681 c4.097,2.978,8.932,4.511,13.823,4.511c2.865,0,5.749-0.526,8.517-1.596c7.486-2.895,12.93-9.312,14.56-17.163l83.429-401.309 C513.26,51.685,510.257,42.967,503.67,37.382z M491.536,55.99l-83.428,401.308c-0.302,1.45-1.346,2.053-1.942,2.284 c-0.6,0.232-1.785,0.489-2.997-0.393l-113.887-82.685c-5.091-3.696-11.077-5.531-17.052-5.531 c-6.518,0-13.027,2.185-18.347,6.519l-63.154,51.485c-1.124,0.92-2.291,0.756-2.885,0.577c-0.598-0.18-1.665-0.69-2.099-2.086 l-43.845-141.006c-0.937-3.013-3.217-5.423-6.173-6.527L22.462,237.662c-1.696-0.635-2.057-1.958-2.062-2.957 c-0.005-0.99,0.343-2.307,2.023-2.955L487.316,52.409c0.002-0.001,0.005-0.002,0.008-0.003c1.51-0.583,2.627,0.087,3.159,0.537 C491.017,53.398,491.867,54.398,491.536,55.99z"/>
    <path d="M427.481,252.142c-5.506-1.196-10.936,2.299-12.131,7.804l-1.55,7.14c-1.195,5.505,2.299,10.936,7.804,12.131 c0.729,0.158,1.456,0.234,2.174,0.234c4.695,0,8.92-3.262,9.958-8.037l1.55-7.14C436.48,258.769,432.985,253.338,427.481,252.142z "/>
    <path d="M417.281,299.122c-5.512-1.195-10.938,2.299-12.132,7.804l-23.459,108.051c-1.195,5.505,2.299,10.936,7.803,12.131 c0.73,0.158,1.457,0.234,2.174,0.234c4.696,0,8.92-3.262,9.958-8.037l23.459-108.052 C426.279,305.748,422.785,300.317,417.281,299.122z"/>
  </svg>`,

  insta: `
  <svg viewBox="0 0 512 512" fill="currentColor" width="20px">
    <path d="M359.312,0H152.689C68.849,0,0.64,68.208,0.64,152.049v207.903C0.64,443.792,68.849,512,152.689,512h206.623 c83.839,0,152.048-68.208,152.048-152.048V152.049C511.359,68.208,443.151,0,359.312,0z M490.961,359.951 c0,72.593-59.057,131.65-131.649,131.65H152.689c-72.593,0-131.65-59.057-131.65-131.649V152.049 c0-72.593,59.057-131.65,131.65-131.65h206.623c72.592,0,131.649,59.057,131.649,131.65V359.951z"/>
    <path d="M359.312,58.294H152.689c-51.698,0-93.756,42.057-93.756,93.755v207.904c0,51.697,42.058,93.755,93.756,93.755h206.623 c51.697,0,93.755-42.058,93.755-93.755V152.049C453.067,100.352,411.009,58.294,359.312,58.294z M432.669,359.951 c0,40.449-32.908,73.357-73.357,73.357H152.689c-40.45,0-73.358-32.908-73.358-73.357V152.048 c0-40.449,32.908-73.357,73.358-73.357v0.001h206.623c40.449,0,73.357,32.908,73.357,73.357V359.951z"/>
    <path d="M256,124.178c-72.686,0-131.821,59.135-131.821,131.822S183.313,387.821,256,387.821S387.821,328.687,387.821,256 S328.686,124.178,256,124.178z M256,367.422c-61.438,0-111.422-49.984-111.422-111.422c0-61.439,49.984-111.423,111.422-111.423 c61.439,0,111.422,49.984,111.422,111.423C367.422,317.438,317.438,367.422,256,367.422z"/>
    <path d="M256,181.041c-41.332,0-74.959,33.627-74.959,74.959s33.627,74.959,74.959,74.959c41.333,0,74.959-33.627,74.959-74.959 S297.332,181.041,256,181.041z M256,310.561c-30.085,0-54.561-24.476-54.561-54.561s24.476-54.561,54.561-54.561 s54.561,24.475,54.561,54.561C310.561,286.085,286.085,310.561,256,310.561z"/>
    <path d="M380.485,99.843c-17.464,0-31.673,14.208-31.673,31.673s14.208,31.672,31.673,31.672 c17.463,0,31.672-14.207,31.672-31.672S397.948,99.843,380.485,99.843z M380.485,142.789c-6.216,0-11.274-5.057-11.274-11.273 c0-6.217,5.058-11.274,11.274-11.274s11.273,5.058,11.273,11.274C391.759,137.732,386.702,142.789,380.485,142.789z"/>
    <path d="M239.681,463.044h-95.872c-5.633,0-10.199,4.566-10.199,10.199s4.566,10.199,10.199,10.199h95.872 c5.633,0,10.199-4.566,10.199-10.199S245.314,463.044,239.681,463.044z"/>
    <path d="M278.438,463.044h-6.12c-5.632,0-10.199,4.566-10.199,10.199s4.567,10.199,10.199,10.199h6.12 c5.633,0,10.199-4.566,10.199-10.199S284.07,463.044,278.438,463.044z"/>
  </svg>`,
}

var state = {
  paddingVertical: "67px",
  paddingHorizontal: "42px",
  marginVertical: "45px",
  marginHorizontal: "45px",
  backgroundMode: "color",
  backgroundColor: "#c1cce2",
  dropShadow: false,
  dropShadowOffsetY: "8px",
  dropShadowBlurRadius: "32px",
  theme: "theme:kzowomuefy",
  windowTheme: "none",
  fontFamily: "Hack",
  fontSize: "13.5px",
  lineHeight: "158%",
  windowControls: false,
  widthAdjustment: false,
  lineNumbers: true,
  exportSize: "2x",
  watermark: true,
  squaredImage: false,
  preset: null,
  loading: false
};

var themes = [{
  id: "theme:kzowomuefy",
  name: "S-Kill",
  highlights: {
    background: "#3B4252",
    text: "#f8f8f2",
    variable: "#fff",
    attribute: "rgba(97,186,134,1)",
    definition: "rgba(255,255,255,1)",
    keyword: "rgba(254,129,131,1)",
    operator: "rgba(255,255,255,1)",
    property: "rgba(250,209,133,1)",
    number: "#bd93f9",
    string: "rgba(0,238,255,1)",
    comment: "rgba(214,251,255,0.5)",
    meta: "#f8f8f2",
    tag: "#ff79c6"
  },
  custom: true
}];

localStorage.setItem('CARBON_STATE', JSON.stringify(state));
localStorage.setItem('CARBON_THEMES', JSON.stringify(themes));

document.querySelector('.watermark').outerHTML = icons.fullstacks;

var styles = document.createElement('style');
styles.textContent = `
.container-bg div:last-child {
  height: calc(100% + 2px) !important;
}
.container-bg div:last-child {
  top: -1px !important;
}
.CodeMirror {
  padding: 80px 40px 40px 20px !important;
  box-shadow: 0 2px 2px rgba(15, 17, 21, .4), 0 2px 5px rgba(15, 17, 21, .2) !important;
}

.CodeMirror-wrap pre {
  padding-left: 10px;
}

.CodeMirror-linenumber {
  color: rgba(255, 255, 255, 0.2);
  left: -5px !important;
}

.logo {
  z-index: 100;
  position: absolute;
  top: 81px;
  height: 60px;
  width: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.social {
  display: flex;
  align-items: center;
  color: #3b4252;
  position: absolute;
  bottom: -45px;
  font-family: Rajdhani;
  font-size: 22px;
  left: 50%;
  transform: translateX(-50%);
}

.social-icon {
  margin: 6px 4px 0 10px;
  width: 24px;
  height: 30px;
}

.container-bg .bg {
  position: relative;
  display: flex;
  justify-content: center;
}
`
document.head.appendChild(styles);

var telIcon = document.createElement('svg');
telIcon.innerHTML = icons.tel;
telIcon.classList.add('social-icon');

var telegram = document.createElement('span');
telegram.textContent = '@full_stacks';

var telContainer = document.createElement('span');
telContainer.classList.add('social-item');
telContainer.appendChild(telIcon);
telContainer.appendChild(telegram);

var insIcon = document.createElement('svg');
insIcon.innerHTML = icons.insta;
insIcon.classList.add('social-icon');

var instagram = document.createElement('span');
instagram.textContent = '@full_stacks';

var insContainer = document.createElement('span');
insContainer.classList.add('social-item');
insContainer.appendChild(insIcon);
insContainer.appendChild(instagram);

var container = document.createElement('div');
container.classList.add('social');

container.appendChild(telContainer);
container.appendChild(insContainer);

document.querySelector('.CodeMirror__container').appendChild(container);