/* * Custom Dark Purple Tech Theme */ /* 1. Define color variables for our theme using Bootstrap's dark mode selector */ /* This tells the browser: "When in dark mode, use these colors." */ html[data-bs-theme="dark"] { --tech-purple: #9370DB; /* A medium purple for highlights and links */ --tech-purple-darker: #483D8B; /* A darker purple for backgrounds or hover effects */ --background-dark: #12121c; /* A very dark, slightly blue/purple background */ --surface-dark: #1e1e2f; /* A slightly lighter dark color for cards and surfaces */ --text-primary-dark: #EAEAEA; /* Primary text color - off-white */ --text-secondary-dark: #A9A9A9; /* Secondary text color - light gray */ } /* 2. Apply the dark theme to the whole page */ body { background-color: var(--background-dark); color: var(--text-primary-dark); } /* 3. Style links and primary buttons with our tech purple */ a, .btn-link { color: var(--tech-purple); } a:hover, .btn-link:hover { color: white; } .btn-primary { background-color: var(--tech-purple); border-color: var(--tech-purple); } .btn-primary:hover { background-color: var(--tech-purple-darker); border-color: var(--tech-purple-darker); } /* 4. Style specific components */ /* Header and Footer */ .navbar, footer { background-color: var(--surface-dark) !important; } /* Cards (used in Solution page) */ .card { background-color: var(--surface-dark); border: 1px solid var(--tech-purple-darker); } /* Make text in cards use our theme colors */ .card .card-title { color: var(--tech-purple); } .card .card-text { color: var(--text-secondary-dark); } /* Make the icons in the cards use the theme's highlight color */ .card .text-primary { color: var(--tech-purple) !important; } /* 藝廊圖片的懸停美化效果 */ .gallery-item img { transition: transform 0.3s ease, box-shadow 0.3s ease; } .gallery-item:hover img { transform: scale(1.05); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } /* 5. Finally, we need to tell Bootstrap to USE the dark theme. */ /* Add the data-bs-theme="dark" attribute to the tag in _Layout.cshtml */