Berbagi Tema Bearblog

22 Apr 2025

Melanjutkan postingan kemarin tentang mengubah tampilan blog saya, tanpa lama-lama begini kode blog saya, barangkali ada yang mau menggunakan. Tentu saya tidak menulis kodenya sendiri tetapi karena dibantu AI jadi deh. Sekalian saya mau belajar bagaimana caranya menulis kode di bearblog ini. Kode CSS bisa dicopas di Themesnya Bearblog.

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100..900&display=swap');

/* =============== GLOBAL FONT SIZE =============== */
html {
  font-size: 100%;
}
@media (max-width: 480px) {
  html {
    font-size: 90%;
  }
}

/* =============== RESET & BOX-SIZING =============== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* =============== ROOT VARIABLES =============== */
:root {
  --width: 720px;

  /* Typography */
  --font-main: 'Roboto Mono', monospace;
  --font-size: 0.9rem;

  /* Grayscale Palette */
  --gray-100: #ffffff;
  --gray-200: #eeeeee;
  --gray-300: #d9d4d1;
  --gray-400: #aaa9a6;
  --gray-500: #7d7d7d;
  --gray-700: #505050;
  --gray-800: #2d2d2d;
  --gray-900: #151515;

  /* Dark Theme (Default) */
  --bg-dark: var(--gray-900);
  --text-dark: var(--gray-100);

  --background-color: var(--bg-dark);
  --text-color: var(--text-dark);
  --heading-color: var(--gray-100);
  --link-color: var(--gray-100);
  --visited-color: var(--gray-300);
  --code-background-color: var(--gray-800);
  --code-color: var(--gray-100);
  --blockquote-color: var(--gray-500);

  /* Light Theme */
  --bg-light: var(--gray-100);
  --text-light: var(--gray-900);

  /* Transitions */
  --transition-duration: 0.3s;
  --transition-timing: ease;
}

/* Light Theme Overrides */
html[data-theme='light'],
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --background-color: var(--bg-light);
    --text-color: var(--text-light);
    --heading-color: var(--gray-900);
    --link-color: var(--gray-900);
    --visited-color: var(--gray-700);
    --code-background-color: var(--gray-200);
    --code-color: var(--gray-900);
    --blockquote-color: var(--gray-700);
  }
}
html[data-theme='light'] {
  --background-color: var(--bg-light);
  --text-color: var(--text-light);
  --heading-color: var(--gray-900);
  --link-color: var(--gray-900);
  --visited-color: var(--gray-700);
  --code-background-color: var(--gray-200);
  --code-color: var(--gray-900);
  --blockquote-color: var(--gray-700);
}

/* =============== BASE STYLES =============== */
body {
  font-family: var(--font-main);
  font-size: var(--font-size);
  font-weight: 400;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin: auto;
  max-width: var(--width);
  padding-inline: clamp(12px, 4vw, 24px);
  background-color: var(--background-color);
  color: var(--text-color);
  text-align: left;
  transition: background-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing);
}

h1, h2, h3, h4, h5, h6,
strong, b {
  font-family: var(--font-main);
  color: var(--heading-color);
  transition: color var(--transition-duration) var(--transition-timing);
}
h1 { font-weight: 700; font-size: 2rem; }
h2, h3 { font-weight: 600; font-size: 1.75rem; }
h4, h5, h6 { font-weight: 500; font-size: 1.25rem; }
strong, b { font-weight: 700; }

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--transition-duration) var(--transition-timing);
}
a:hover {
  color: var(--heading-color);
}

main {
  margin: 40px 0 20px;
  line-height: 1.6;
}

footer {
  padding: 25px 0;
  text-align: center;
  opacity: 0.8;
}

/* =============== HEADER =============== */
header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
  position: relative;
}
header::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  border-bottom: 2px solid var(--heading-color);
  transition: border-color var(--transition-duration) var(--transition-timing);
}
header nav {
  display: flex;
  gap: 12px;
}
header nav a {
  position: relative;
    margin-right: 10px;
  font-weight: 500;
  padding-bottom: 4px;
}
header nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background-color: var(--heading-color);
  transition: width var(--transition-duration) var(--transition-timing);
}
header nav a:hover::after {
  width: 100%;
}

/* =============== TITLE =============== */
.title h1 {
  font-size: 1.25rem;
  padding: 5px 10px;
  background: var(--heading-color);
  color: var(--background-color);
  display: inline-block;
  font-weight: 400;
  transition: background-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing);
}

/* =============== BLOCKQUOTE & CODE =============== */
blockquote {
  border-top: 1px solid var(--heading-color);
  border-bottom: 1px solid var(--heading-color);
  padding: 20px;
  color: var(--blockquote-color);
  font-style: italic;
  font-weight: 300;
  transition: border-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing);
}
code, .highlight, .code {
  font-family: var(--font-main);
  background-color: var(--code-background-color);
  color: var(--code-color);
  padding: 2px;
  border-radius: 3px;
  font-weight: 400;
  font-style: normal;
  transition: background-color var(--transition-duration) var(--transition-timing),
              color var(--transition-duration) var(--transition-timing);
}
.highlight {
  border-left: 5px solid var(--heading-color);
}

/* =============== TABLE & IMAGES =============== */
table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--heading-color);
}
th, td {
  border: 1px solid var(--heading-color);
  padding: 10px;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
  object-fit: contain;
}

/* =============== BUTTONS =============== */
button {
  cursor: pointer;
  font-family: var(--font-main);
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
  font-weight: 500;
}

/* =============== BLOG POSTS LIST =============== */
ul.blog-posts {
  list-style: none;
  padding: 0;
}
ul.blog-posts li {
  display: flex;
  margin-bottom: 20px;
}
ul.blog-posts li span {
  flex: 0 0 130px;
}
ul.blog-posts li time {
  font-style: normal;
}
ul.blog-posts li a {
  position: relative;
  font-weight: 500;
}
ul.blog-posts li a:visited {
  color: var(--visited-color);
}
ul.blog-posts li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background-color: var(--heading-color);
  transition: width 0.3s ease;
}
ul.blog-posts li a:hover::after {
  width: 100%;
}

/* =============== RESPONSIVE =============== */
@media only screen and (max-width: 767px) {
  main {
    margin: 30px 0 10px;
  }
  ul.blog-posts li {
    flex-direction: column;
  }
  ul.blog-posts li span {
    flex: unset;
  }
  #theme-toggle {
    padding: 4px 10px;
  }
  #theme-toggle span {
    font-size: 0.875rem;
  }
}

/* =============== OTHER ELEMENTS =============== */
.inline {
  width: auto !important;
}
hr {
  border: 0;
  border-top: 1px solid var(--heading-color);
}

/* =============== UPVOTE BUTTON =============== */
.upvote-button {
  padding: 10px;
  border: 1px solid var(--heading-color);
  background-color: var(--gray-800);
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 6px;
  transition: all var(--transition-duration) var(--transition-timing);
}
.upvote-button:hover,
.upvote-button.upvoted {
  background-color: var(--heading-color);
  color: var(--background-color);
}
.upvote-button:disabled:not(.upvoted) {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-color);
  cursor: not-allowed;
  font-size: 0.875rem;
  font-weight: 300;
  font-style: italic;
}
.upvote-button:disabled:not(.upvoted)::after {
  content: "toasted";
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--text-color);
  font-size: 0.875rem;
  padding: 4px 8px;
  border-radius: 4px;
  margin-top: 6px;
}
.upvote-button.upvoted:disabled::after {
  content: "";
}

/* =============== THEME TOGGLE =============== */
#theme-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 2rem auto;
  padding: 4px 8px;
  border: 1px solid var(--heading-color);
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}
#theme-toggle span {
  margin-top: 1px;
  font-size: 0.9rem;
  user-select: none;
  pointer-events: none;
}

/* =============== HUMAN MADE FOOTER =============== */
#human-made {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color);
  transition: all 0.3s ease;
}

/* =============== CUSTOM SCROLLBAR =============== */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(125, 125, 125, 0.3);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(125, 125, 125, 0.5);
}
html[data-theme='light'] ::-webkit-scrollbar-thumb {
  background-color: rgba(80, 80, 80, 0.2);
}
html[data-theme='light'] ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(80, 80, 80, 0.4);
}

/* =============== EMBEDDED POSTS (STATUS PAGE) =============== */
.status ul.embedded.blog-posts > li {
  border: 1px solid #ddd;
  background-color: transparent;
  margin-top: 1em;
  padding: 1em;
  display: flex;
  flex-direction: column-reverse;
}
.status ul.embedded.blog-posts > li > a {
  display: none;
}
.status ul.embedded.blog-posts > li div p:first-child {
  margin-top: 0;
}
.status ul.blog-posts li span {
  flex: none;
}
pre {
  overflow-x: auto;
  max-width: 100%;
  padding: 1rem;
  background-color: var(--code-background-color);
  color: var(--code-color);
  font-family: var(--font-main);
  font-size: 0.85rem;
  line-height: 1.6;
  border-radius: 8px;
  margin: 1.5rem 0;
  white-space: pre;
}

Untuk kode Javascript agar bisa mengganti tema terang atau gelap dan kalo dilihat di blog saya ada tulisan "ditulis manusia bukan AI" serta tombol untuk kembali ke atas. Bagian ini bisa ditambahkan di Dashboard Bearblog > Setting - Footer Directive.

<footer>
  <div style="text-align: center; margin-top: 2rem;">
    <button id="theme-toggle" aria-label="Toggle theme" style="background: none; border: none; font-size: 1.5rem; cursor: pointer; display: flex; flex-direction: column; align-items: center;">
      <span id="bear-icon" style="font-size: 2rem;">🐻</span>
      <span id="theme-label" style="font-size: 0.875rem;">bear dark</span>
    </button>
  </div>

  <script>
    const toggleButton = document.getElementById("theme-toggle");
    const themeLabel = document.getElementById("theme-label");
    const bearIcon = document.getElementById("bear-icon");
    const savedTheme = localStorage.getItem("theme");

    function updateTheme(theme) {
      document.documentElement.setAttribute("data-theme", theme);
      localStorage.setItem("theme", theme);
      themeLabel.textContent = theme === "light" ? "bear light" : "bear dark";
      bearIcon.textContent = theme === "light" ? "🐻‍❄️" : "🐻";
    }

    // Set theme on load
    if (savedTheme === "dark" || savedTheme === "light") {
      updateTheme(savedTheme);
    } else {
      updateTheme("dark");
    }

    toggleButton.addEventListener("click", () => {
      const current = document.documentElement.getAttribute("data-theme");
      const next = current === "dark" ? "light" : "dark";
      updateTheme(next);
    });
  </script>

  <div id="human-made" style="text-align: center; margin-top: 1rem; font-size: 0.7rem; color: var(--text-color); font-weight: 400;">
    | ditulis manusia bukan AI |  
    <a href="#top" class="back-to-top" style="text-align: center; margin-top: 1rem; font-size: 0.7rem; color: var(--text-color); text-decoration: none; font-weight: 400;">↑ Kembali Ke Atas |</a>
  </div>
</footer>

Sebetulnya masih belum puas, paling 2 hari lagi sudah bosan dan saya oprek lagi wkwkwk.. Untuk sementara ini dulu ya, semoga bermanfaat. Salam.

#Blog