diff --git a/app/controllers/custom_css_controller.rb b/app/controllers/custom_css_controller.rb
index f0ff6f8ca7..eb6417698a 100644
--- a/app/controllers/custom_css_controller.rb
+++ b/app/controllers/custom_css_controller.rb
@@ -13,17 +13,7 @@ class CustomCssController < ActionController::Base # rubocop:disable Rails/Appli
   def custom_css_styles
     Setting.custom_css
   end
-
-  def user_custom_css?
-    return false if current_user.nil?
-
-    current_user.setting_use_custom_css && current_user.custom_css_text.present?
-  end
-
-  def user_custom_css
-    current_user.custom_css_text
-  end
-  helper_method :custom_css_styles, :user_custom_css?, :user_custom_css
+  helper_method :custom_css_styles
 
   def set_user_roles
     @user_roles = UserRole.providing_styles
diff --git a/app/controllers/system_css_controller.rb b/app/controllers/system_css_controller.rb
new file mode 100644
index 0000000000..a19728bbfd
--- /dev/null
+++ b/app/controllers/system_css_controller.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class SystemCssController < ActionController::Base # rubocop:disable Rails/ApplicationController
+  before_action :set_user_roles
+
+  def show
+    expires_in 3.minutes, public: true
+    render content_type: 'text/css'
+  end
+
+  private
+
+  def set_user_roles
+    @user_roles = UserRole.providing_styles
+  end
+end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 94736ab91c..eb07d9fa7c 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -235,6 +235,12 @@ module ApplicationHelper
     full_asset_url(instance_presenter.mascot&.file&.url || frontend_asset_path('images/elephant_ui_plane.svg'))
   end
 
+  def server_css?
+    return true if current_account&.user.nil?
+
+    current_account.user.setting_use_server_css
+  end
+
   def user_custom_css?
     return false if current_account&.user.nil?
 
diff --git a/app/models/concerns/user/has_settings.rb b/app/models/concerns/user/has_settings.rb
index 655e589aae..af452e9286 100644
--- a/app/models/concerns/user/has_settings.rb
+++ b/app/models/concerns/user/has_settings.rb
@@ -283,6 +283,10 @@ module User::HasSettings
     settings['web.hide_favourite_menu']
   end
 
+  def setting_use_server_css
+    settings['web.use_server_css']
+  end
+
   def setting_use_custom_css
     settings['web.use_custom_css']
   end
diff --git a/app/models/user_settings.rb b/app/models/user_settings.rb
index 0a995be81a..f791a7cf43 100644
--- a/app/models/user_settings.rb
+++ b/app/models/user_settings.rb
@@ -55,6 +55,7 @@ class UserSettings
     setting :use_blurhash, default: true
     setting :use_pending_items, default: false
     setting :use_system_font, default: false
+    setting :use_server_css, default: true
     setting :use_custom_css, default: false
     setting :content_font_size, default: 'medium', in: %w(medium large x_large xx_large)
     setting :bookmark_category_needed, default: false
diff --git a/app/views/custom_css/show_system.css.erb b/app/views/custom_css/show_system.css.erb
new file mode 100644
index 0000000000..72f0281aa1
--- /dev/null
+++ b/app/views/custom_css/show_system.css.erb
@@ -0,0 +1,6 @@
+<%- @user_roles.each do |role| %>
+.user-role-<%= role.id %> {
+  --user-role-accent: <%= role.color %>;
+}
+
+<%- end %>
diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml
index 8e2d8e383a..51aa68f1b1 100755
--- a/app/views/layouts/application.html.haml
+++ b/app/views/layouts/application.html.haml
@@ -34,7 +34,10 @@
     = csrf_meta_tags unless skip_csrf_meta_tags?
     %meta{ name: 'style-nonce', content: request.content_security_policy_nonce }
 
-    = stylesheet_link_tag custom_css_path, skip_pipeline: true, host: root_url, media: 'all'
+    - if server_css?
+      = stylesheet_link_tag custom_css_path, skip_pipeline: true, host: root_url, media: 'all'
+    - else
+      = stylesheet_link_tag system_css_path, skip_pipeline: true, host: root_url, media: 'all'
 
     - if user_custom_css?
       = stylesheet_link_tag user_custom_css_path({ version: user_custom_css_version }), skip_pipeline: true, host: root_url, media: 'all'
diff --git a/app/views/settings/preferences/custom_css/show.html.haml b/app/views/settings/preferences/custom_css/show.html.haml
index 03ee400093..c38ca9b63b 100644
--- a/app/views/settings/preferences/custom_css/show.html.haml
+++ b/app/views/settings/preferences/custom_css/show.html.haml
@@ -8,6 +8,13 @@
   = render 'shared/error_messages', object: current_user
 
   = f.simple_fields_for :settings, current_user.settings do |ff|
+    .fields-group
+      = ff.input :'web.use_server_css',
+                 hint: false,
+                 label: I18n.t('simple_form.labels.defaults.setting_use_server_css'),
+                 kmyblue: true,
+                 wrapper: :with_label
+
     .fields-group
       = ff.input :'web.use_custom_css',
                  hint: false,
diff --git a/app/views/system_css/show.css.erb b/app/views/system_css/show.css.erb
new file mode 100644
index 0000000000..72f0281aa1
--- /dev/null
+++ b/app/views/system_css/show.css.erb
@@ -0,0 +1,6 @@
+<%- @user_roles.each do |role| %>
+.user-role-<%= role.id %> {
+  --user-role-accent: <%= role.color %>;
+}
+
+<%- end %>
diff --git a/config/locales/simple_form.en.yml b/config/locales/simple_form.en.yml
index 1a60ca8206..9f3b7e7fd1 100644
--- a/config/locales/simple_form.en.yml
+++ b/config/locales/simple_form.en.yml
@@ -329,9 +329,10 @@ en:
         setting_trends: Show today's trends
         setting_unfollow_modal: Show confirmation dialog before unfollowing someone
         setting_use_blurhash: Show colorful gradients for hidden media
-        setting_use_custom_css: Enable custom CSS
+        setting_use_custom_css: Enable custom CSS set by yourself
         setting_use_pending_items: Slow mode
         setting_use_public_index: Include permitted accounts post to results of search
+        setting_use_server_css: Enable server CSS set by the administrator
         severity: Severity
         sign_in_token_attempt: Security code
         title: Title
diff --git a/config/locales/simple_form.ja.yml b/config/locales/simple_form.ja.yml
index bd8cb11415..e5ffd4b38e 100644
--- a/config/locales/simple_form.ja.yml
+++ b/config/locales/simple_form.ja.yml
@@ -329,9 +329,10 @@ ja:
         setting_trends: 本日のトレンドタグを表示する
         setting_unfollow_modal: フォローを解除する前に確認ダイアログを表示する
         setting_use_blurhash: 非表示のメディアを色付きのぼかしで表示する
-        setting_use_custom_css: カスタムCSSを有効にする
+        setting_use_custom_css: あなた自身が設定する以下のカスタムCSSを有効にする
         setting_use_pending_items: 手動更新モード
         setting_use_public_index: Mastodonの標準設定によって検索が許可されたアカウントの公開投稿を検索結果に含める
+        setting_use_server_css: 管理者の設定したカスタムCSSを有効にする
         severity: 重大性
         sign_in_token_attempt: セキュリティコード
         title: タイトル
diff --git a/config/routes.rb b/config/routes.rb
index d45a970fce..08a2524044 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -94,6 +94,7 @@ Rails.application.routes.draw do
   get 'manifest', to: 'manifests#show', defaults: { format: 'json' }
   get 'intent', to: 'intents#show'
   get 'custom.css', to: 'custom_css#show', as: :custom_css
+  get 'system.css', to: 'system_css#show', as: :system_css
   get 'user_custom.css', to: 'user_custom_css#show', as: :user_custom_css
 
   get 'remote_interaction_helper', to: 'remote_interaction_helper#index'