mirror of
https://github.com/shadoll/theme-switcher.git
synced 2025-12-20 02:26:12 +00:00
Update README and add GitLab CI/CD configuration for automatic deployment
This commit is contained in:
20
.gitlab-ci.yml
Normal file
20
.gitlab-ci.yml
Normal file
@@ -0,0 +1,20 @@
|
||||
# GitLab CI/CD configuration for GitLab Pages
|
||||
pages:
|
||||
stage: deploy
|
||||
script:
|
||||
# Create the public directory (GitLab Pages serves from this directory)
|
||||
- mkdir -p public
|
||||
|
||||
# Copy all necessary files to the public directory
|
||||
- cp index.html public/
|
||||
- cp script.js public/
|
||||
- cp styles.css public/
|
||||
- cp *.svg public/
|
||||
|
||||
# Print deployment info
|
||||
- echo "Deploying theme switcher to GitLab Pages..."
|
||||
artifacts:
|
||||
paths:
|
||||
- public
|
||||
only:
|
||||
- main # This job will only run on the main branch
|
||||
34
README.md
34
README.md
@@ -15,14 +15,10 @@ A lightweight, elegant theme switcher for web applications that allows users to
|
||||
- **Modern UI** with accessible controls
|
||||
- **Smooth transitions** between themes
|
||||
|
||||
## Demo
|
||||
## Live Demo
|
||||
|
||||
The project includes a demo page with various UI elements to showcase the theme switching capabilities:
|
||||
- Text elements (headings, paragraphs)
|
||||
- Cards with different backgrounds
|
||||
- Buttons
|
||||
- Form elements
|
||||
- Footer
|
||||
You can see a live demo of this project on GitLab Pages:
|
||||
https://[your-gitlab-username].gitlab.io/theme_switch/
|
||||
|
||||
## How It Works
|
||||
|
||||
@@ -76,22 +72,18 @@ To prevent flash of unstyled content when loading in dark mode, the project incl
|
||||
|
||||
### CSS Variables
|
||||
|
||||
The theme switcher uses CSS custom properties (variables) to define theme colors:
|
||||
The theme switcher uses CSS custom properties (variables) to define theme colors.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--background-color: #ffffff;
|
||||
--text-color: #333333;
|
||||
--accent-color: #4a90e2;
|
||||
/* more variables... */
|
||||
}
|
||||
## Deploying to GitLab Pages
|
||||
|
||||
[data-theme="dark"] {
|
||||
--background-color: #1a1a1a;
|
||||
--text-color: #f5f5f5;
|
||||
/* more variables... */
|
||||
}
|
||||
```
|
||||
This project is configured to automatically deploy to GitLab Pages when changes are pushed to the main branch. The deployment is handled by the GitLab CI/CD pipeline defined in `.gitlab-ci.yml`.
|
||||
|
||||
To deploy your own instance:
|
||||
|
||||
1. Fork this repository
|
||||
2. Push changes to the main branch
|
||||
3. Wait for the pipeline to complete
|
||||
4. Access your site at https://[your-gitlab-username].gitlab.io/theme_switch/
|
||||
|
||||
## Browser Support
|
||||
|
||||
|
||||
Reference in New Issue
Block a user