ライト&ダークモード対応のプロフィールページをHTML,CSS,JSで作成する

ソースコード
使い方(カスタマイズ)

ソースコード

ﾒﾁｬｸﾁｬ唐突ですがディクトリ構成はこんな感じ↓

┃
┣index.html
┣style.css
┣script.js
┣img
  ┗icon.png

icon.pngがプロフィール画像になります

次にソースコードを張ります解説は次の章で書きます。

 <!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>プロフィール & リンク集</title>
    
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">

    
    <link rel="stylesheet" href="style.css">
</head>
<body class="dark">
    <div class="container">
        <div class="profile-container">
            <img src="img/icon.png" alt="Profile Icon" class="profile-icon">
            <h1>あなたの名前</h1>
            <p>自己紹介的なやつ</p>
            <p><i class="fas fa-birthday-cake"></i> xxxx年xx月xx日</p>
            <p><i class="fas fa-map-marker-alt"></i> 日本 / Japan</p>
            <p><i class="fas fa-graduation-cap"></i> 人形</p>
        </div>

        <div class="links-container">
            <a href="YouTubeのリンク">
                <i class="fab fa-youtube"></i> 
                <span>YouTube @YouTubeのユーザー名</span>
            </a>
            <a href="#" class="link-item">
                <i class="fab fa-discord"></i> 
                <span>Discord @Discordのユーザー名</span>
            </a>
            <a href="Discordのサーバーリンク" class="link-item">
                <i class="fab fa-discord"></i> 
                <span>DiscordServer</span>
            </a>
            <a href="GitHubのリンク" class="link-item">
                <i class="fab fa-github"></i> 
                <span>GitHub @GitHubのユーザー名</span>
            </a>
            <a href="ブログリンク" class="link-item">
                <i class="fas fa-code"></i> 
                <span>ブログ</span>
            </a>

        </div>
    </div>

    <button id="theme-toggle" class="theme-icon">
        <i class="fas fa-moon"></i>
    </button>

    <script src="script.js"></script>
</body>
</html>

/*style.css*/
/* 全体の設定 */
body {
  font-family: 'Noto Sans JP', sans-serif;
  margin: 0;
  padding: 0;
  transition: background-color 0.3s, color 0.3s;}
/* ダークモード */
body.dark {
  background-color: black;
  color: white;
}
/* ライトモード */
body.light {
  background-color: white;
  color: black;
}
.container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 1200px;
  margin: 50px auto;
  padding: 20px;
  gap: 40px;
}
/* プロフィールコンテナ */
.profile-container {
  width: 45%;
  text-align:center;  width: 40%;
}
/* プロフィールアイコン */
.profile-icon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-bottom: 15px;}
/* リンクカードコンテ*/
.links-container {
  width: 40%;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content:   center;
}
/* リンクアイテム */
.link-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  background-color: rgba

//script.js
const themeToggle = 
document.getElementById('theme-toggle');
const body = document.body;const themeIcon = themeToggle.querySelector('i');
themeToggle.addEventListener('click', () => {
  if 
(body.classList.contains('dark')) {    
body.classList.replace('dark', 'light');    
themeIcon.classList.replace('fa-moon', 'fa-sun');  }
   
else {    body.classList.replace('light', 'dark');    
themeIcon.classList.replace('fa-sun', 'fa-moon');  }});

インデントがおかしいところがありますが、多めに見てください(笑)

使い方(カスタマイズ)

基本的にindex.htmlの日本語部分とicon.pngを変更するだけで自分のプロフィールページを作れます

一応GitHubのリンク張ります

GitHub - UrMokn/ProfilePage-Dark-Light

Contribute to UrMokn/ProfilePage-Dark-Light development by creating an account on GitHub.